I'm developing android app as per the following design.
I want to set the height of the scroll view to the remaining screen size (after occupied by header,footer and other texts) although there are no any contents in the list view. When the items added to the list view (dynamically) I want to scroll it withing the same. But now I'm unable to set initial height when there are no items in the list view.
bellow is my layout file.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background_color"
tools:context=".HomeActivity"
android:weightSum="1.0" >
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#color/header_color"
android:paddingBottom="#dimen/header_vertical_margin"
android:paddingLeft="#dimen/header_horizontal_margin"
android:paddingRight="#dimen/header_horizontal_margin"
android:paddingTop="#dimen/header_vertical_margin" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:orientation="horizontal"
android:weightSum="1.0" >
<ImageButton
android:id="#+id/ImageButton03"
android:layout_width="62dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:layout_weight="0.2"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:gravity="left"
android:scaleType="centerInside"
android:src="#drawable/title_left_img" />
<ImageView
android:id="#+id/headerImg"
android:layout_width="139dp"
android:layout_height="match_parent"
android:layout_weight="0.7"
android:scaleType="centerInside"
android:src="#drawable/header_img"
android:layout_margin="5dp" />
<ImageButton
android:id="#+id/ImageButton04"
android:layout_width="38dp"
android:layout_height="wrap_content"
android:layout_weight="0.1"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:scaleType="centerInside"
android:src="#drawable/title_right_img" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/relativeLayout1"
android:paddingBottom="#dimen/body_vertical_margin"
android:paddingLeft="#dimen/body_horizontal_margin"
android:paddingRight="#dimen/body_horizontal_margin"
android:paddingTop="#dimen/body_vertical_margin" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:orientation="vertical" >
<TextView
android:id="#+id/dayText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="TextView"
android:textColor="#color/day_color"
android:textSize="#dimen/day_size"
android:textStyle="bold" />
<TextView
android:id="#+id/dateTimeText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="TextView | TextView"
android:textColor="#color/time_date_color"
android:textSize="#dimen/date_time_size"
android:textStyle="normal" />
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="wrap_content"
android:layout_height="0px"
android:background="#drawable/rounced_rect"
android:layout_weight="1"
android:fillViewport="true" >
<ListView
android:id="#+id/list_tracking"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:dividerHeight="1dp"
android:scrollingCache="true" >
</ListView>
</ScrollView>
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="#+id/relativeLayout3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="1dp"
android:paddingBottom="#dimen/footer_vertical_margin"
android:paddingLeft="#dimen/footer_horizontal_margin"
android:paddingRight="#dimen/footer_horizontal_margin"
android:paddingTop="#dimen/footer_vertical_margin" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/track_button"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:scaleType="centerInside" />
</RelativeLayout>
I'm new to android app and any guidance is really appreciated.
You can't use a ListView inside a ScrollView.
You could either use a ScrollView or ListView, but not both together or one inside the other.
To summarize my comment:
Remove the unnecessary relativeLayout1, 2, and 3 and scrollView. Then move the bottom image button above the linear layout, so you can make the linear layout position itself with layout_above the image button and give it a height of match_parent. This makes it fill the space between the top linear layout and the bottom image button. And finally make the scroll view's height match_parent so it will also fill the space remaining below the text views.
Related
When the keypad appears when the user clicks on an EditText, parts of the layout is covered by the keypad. So I tried using ScrollView so the user can scroll down and see the rest of the layout. But its not scrolling. I can't seem to get my scroll view working. The I have searched on stackoverflow for the solution for 3 hours and couldn't find it.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
android:id="#+id/new_meal_form_relative"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/meal_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="2dp"
android:text="#string/meal_label"
android:textSize="20sp"
android:textIsSelectable="false"
android:textStyle="bold"/>
<EditText
android:id="#+id/meal_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/meal_label"
android:hint="Event Title"
android:inputType="textCapSentences"
android:maxLines="1"/>
<EditText
android:id="#+id/meal_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/meal_name"
android:hint="Location(eg: CSC Room232)* "
android:inputType="textCapSentences"
android:maxLines="1"/>
<EditText
android:id="#+id/meal_event"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/meal_location"
android:gravity="top"
android:hint="Description of the event. What kind of food. Any additional info... \n"
android:inputType="textMultiLine|textCapSentences"/>
<TextView
android:id="#+id/textViewRating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/meal_event"
android:text="Rating: "/>
<Spinner
android:id="#+id/rating_spinner"
android:layout_width="71dp"
android:layout_height="47dp"
android:layout_alignTop="#+id/textViewRequired"
android:layout_toRightOf="#+id/textViewRating"/>
<TextView
android:id="#+id/textViewRequired"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/textViewRating"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:text="*Required"
android:textColor="#ffff4b48"
android:textSize="15sp"/>
<com.parse.ParseImageView
android:id="#+id/meal_preview_image"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_below="#+id/rating_spinner"
android:layout_centerHorizontal="true"/>
<ImageButton
android:id="#+id/photo_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_action_photo"
android:layout_below="#+id/meal_preview_image"/>
<Button
android:id="#+id/save_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/photo_button"
android:layout_toLeftOf="#+id/cancel_button"
android:background="#ffff001f"
android:text="#string/post_button_text"/>
<Button
android:id="#+id/cancel_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/photo_button"
android:text="#string/cancel_button_text"/>
<Space
android:layout_width="20px"
android:layout_height="20px"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/rating_spinner"
android:id="#+id/space"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/editText"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"/>
</RelativeLayout>
</ScrollView>
I have also tried adding "adjustResize" to the manifest file but it didn't do anything.
android:windowSoftInputMode="adjustResize"
Your ScrollView layout height should be wrap_content. Right now it's match_parent which means be as tall as my parent, not; be as tall as the content within me.
I want to design an android activity with a relative layout. There should be 3 (or later 4) elements in a vertical line among each other. I've tried it, but the textview is hidden behind the listview.
What's wrong with the code, how should I change it and how should it look, if I want to insert a fourth element between the text and listview or the listview and button ... like a image.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:paddingBottom="10dp"
android:layout_above="#+id/listview"
android:text="#string/info" />
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_above="#+id/button"
android:layout_marginBottom="10dp" />
<ImageButton
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:onClick="start"
android:src="#drawable/button1" />
</RelativeLayout>
Try changing ReltiveLayout to LinearLayoutor put LinearLayout outside your RelativeLayout, whith orientation="vertical" an put the TextView outside RelativeLayout. Something like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/info" />
<RelativeLayout
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_above="#+id/button"
android:layout_marginBottom="10dp" />
<ImageButton
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:onClick="start"
android:src="#drawable/button1" />
</RelativeLayout>
</LinearLayout>
I need to layout 2 images (longImg and shortImg) horizontally.
The longImg is too long to fit on screen, so really wanting to display a window of it, linked to a SeekBar where the user can scroll the part of the longImg. The container around the longImg must be at a fixed size so the shortImg is not nudged off screen.
What is the best way to do this?
So far:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container_images_layout"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/short_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_weight="0.3"
android:scaleType="fitXY"
android:background="#drawable/bg_black"
android:src="#drawable/shortImg"
/>
<ImageView
android:id="#+id/long_image"
android:layout_width="3906dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:layout_toLeftOf="#id/short_image"
android:scaleType="fitXY"
android:src="#drawable/longImg"
/>
</RelativeLayout>
It seems OK in Eclipse graphical layout, but when testing on device, I only get the long image.
How do you force the smallImg to be always present?
Thanks
Actually you using 'RelativeLayout' in that android:layout_weight="0.7" won't work unless its parent is Linear Layout. I have changed your xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container_images_layout"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/short_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_weight="0.3"
android:scaleType="fitXY"
android:background="#drawable/bg_black"
android:src="#drawable/shortImg"
/>
<ImageView
android:id="#+id/long_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:layout_toLeftOf="#id/short_image"
android:scaleType="fitXY"
android:src="#drawable/longImg"
/>
use This :
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container_images_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/short_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_weight="0.3"
android:background="#drawable/ic_launcher"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/long_image"
android:layout_width="3906dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/short_image"
android:layout_weight="0.7"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
I'm attempting to split the UI for my horizontal layout into two halves each with it's own realative layout so I am able to center text and graphics within the two left and right halves of the screen. The problem is when I attmept to do so - the go button still ends up in the middle of the screen instead of centered on the right hand of the screen.
(If I can figure out how to center correctly I'm sure I'll be able to apply the same technique to the other elements to achieve the result I desire.
SOURCE:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="8sp"
android:layout_marginLeft="8sp"
android:layout_marginRight="8sp"
android:layout_marginTop="8sp"
android:background="#drawable/background"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/start"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/emblem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginTop="24dp"
android:gravity="center"
android:scaleType="fitStart"
android:src="#drawable/apn_app_logo" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/start2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true" >
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/go_button"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center"
android:text="#string/start_text2"
android:textColor="#000000"
android:textSize="18sp" />
<Button
android:id="#+id/go_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/apn_app_go_button" />
</RelativeLayout>
</RelativeLayout>
EDIT: (in response to Kuba's answer)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/background"
android:gravity="center"
android:orientation="horizontal" >
<ImageView
android:id="#+id/emblem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="24dp"
android:gravity="center"
android:scaleType="fitStart"
android:src="#drawable/apn_app_logo" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/background"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button
android:id="#+id/go_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/apn_app_go_button"
android:gravity="center_horizontal" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="#string/start_text2"
android:textColor="#000000"
android:textSize="18sp" />
</LinearLayout>
</LinearLayout>
Instead of Relative layout, I would recommend using LinearLayout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#00dd00"
android:gravity="center"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#dd0000"
android:gravity="center_horizontal"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</LinearLayout>
In the inner LinearLayout you can either use android:gravity="center" to have its children centered vertically and horizontally. Or use use android:gravity="center_horizontal" to center in only horizontal way.
EDIT: Added the textview, which was discussed in the comments.
To have the textView appear underneath the button, you must change the orientation of the LinearLayout from horizontal to vertical. Please see the developer site .
The inner LinearLayout thus looks like this.
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:background="#dd0000"
android:gravity="center"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text here"
/>
</LinearLayout>
How can I use android:layout_below="#+id/go_button" in a linear layout?
You can't. These relationships only work in relative layout where you place views in relation to each other or the parent view. In linear layout items are stacked either vertically or horizontally.
Set android:gravity="center" in
<Button
android:id="#+id/go_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/apn_app_go_button" />
Maybe its work.
I have a HorizontalScrollView with some buttons, I am trying to stretch these buttons to fill the whole width of the HorizontalScrollView so that they can appear organized and equally spaced between each others. Here is the Image which I have.
I want these 4 buttons to be stretched over the whole width! here is my code
<HorizontalScrollView
android:id="#+id/items_HorizontalBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/vf"
android:background="#80000000"
android:fillViewport="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<Button
android:layout_width="90dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/rss"
android:text="Light"
android:textColor="#color/green_color"
android:textSize="20sp" />
<Button
android:layout_width="90dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/rss"
android:text="Door"
android:textColor="#color/green_color"
android:textSize="20sp" />
<Button
android:layout_width="90dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/rss"
android:text="Alarms"
android:textColor="#color/green_color"
android:textSize="20sp" />
<Button
android:layout_width="90dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:background="#android:color/transparent"
android:drawableTop="#drawable/rss"
android:text="Window"
android:textColor="#color/green_color"
android:textSize="20sp" />
</LinearLayout>
</HorizontalScrollView>
Instead of messing with LinearLayout you should follow the correct solution that is setting the HorizontalScrollView (or Vertical) to FillViewPort.
XML:
android:fillViewport="true"
Programmatically:
hsv.setFillViewport(true);
For equal distributions, set the weightSum value of the parent, and assign layout_weight to its children.
For 4 equal sized buttons, add android:weightSum="1" to the LinearLayout. For each of the buttons set android:layout_width="0dp", then add android:layout_weight="0.25".
This is what occurs in the code but depending on the View, the "Distribute Weights Evenly" button in the Eclipse GUI can also help.
However, HorizontalScrollView can only host one direct child, I wonder about the structure of this layout...
try making the container a horizontal scroll view. After that add in a table layout, and in each row of the table add in a horizontal linear layer. what will now happen instead, is that the scroll view will be stretched to fit the button size you set, and should scroll w/o you having to program a thing, and you should have effectively created a grid.
try something similar to this:
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/sc1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="horizontal" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="180dp"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="180dp"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="230dp"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="233dp"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</TableRow>
</TableLayout>
Also perhaps you could wrap the horizontal scroll view in a vertical scroll view then you can scroll up/down, left/right and do as you need.