I want to do something very simple. I want a layout that has a spinner at the top, followed by a List View, followed by a Linear Layout at the very bottom that wraps some buttons. I want the List View to expand to fill the space between the spinner and the buttons, no matter how big the window is. I have been trying this with a Linear Layout wrapping all three elements and I have tried every combination of Wrap Content and Fill Parent for Layout_Height that I can think of but unless I hard code the List View Layout_Height to say 300 dip, the buttons are pushed off the screen. I know that there must be an easy way to do this but I am at my wits end. I have tried everything I can think of.
Here is the code that works with the hard-coded height.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Spinner
android:id="#+id/fileType"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<ListView
android:id="#+id/android:list"
android:layout_width="fill_parent"
android:layout_height="300dip" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="bottom"
android:gravity="bottom"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/ManageFiles_DeleteItem"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:layout_margin="5dip"
android:layout_weight="1"
android:text="Delete item" />
<Button
android:id="#+id/ManageFiles_DeleteAll"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:layout_margin="5dip"
android:layout_weight="1"
android:text="Delete all" />
<Button
android:id="#+id/ManageFiles_DisplayItem"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:layout_margin="5dip"
android:layout_weight="1"
android:text="Display item" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/ManageFiles_OKcustom"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:layout_margin="10dip"
android:layout_weight="1"
android:text="OK" />
<Button
android:id="#+id/ManageFiles_CancelCustom"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:layout_margin="10dip"
android:layout_weight="1"
android:text="Cancel" />
</LinearLayout>
</LinearLayout>
`
You can try something as simple as
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/spinner1"
android:layout_above="#+id/button1" >
</ListView>
<Button
android:id="#id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Button1" />
<Button
android:id="#id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="Button2" />
The trick is to use RelativeLayout instead of LinearLayout.
Use the Following
android:weightSum="Your total length" //in your main layout
android:layout_weight="" //in each of your listview,spinner,linearlayout
Eg: if u need equal space for all 3 elements use
android:weightSum="3"
then in
Spinner
android:layout_weight="1"
/>
ListView
android:layout_weight="1"
/>
LinearLayout
android:layout_weight="1"
/>
Use weight, give weight of two to the list view and 1 each to the spinner and layout at bottom containing the buttons you can then vary the weight and check out which suits you more.
Try it like this way it will fit to all screen size.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/ftr_btn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:gravity="bottom"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/ManageFiles_DeleteItem"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:layout_margin="5dip"
android:layout_weight="1"
android:text="Delete item" />
<Button
android:id="#+id/ManageFiles_DeleteAll"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:layout_margin="5dip"
android:layout_weight="1"
android:text="Delete all" />
<Button
android:id="#+id/ManageFiles_DisplayItem"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:layout_margin="5dip"
android:layout_weight="1"
android:text="Display item" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/ManageFiles_OKcustom"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:layout_margin="10dip"
android:layout_weight="1"
android:text="OK" />
<Button
android:id="#+id/ManageFiles_CancelCustom"
android:layout_width="fill_parent"
android:layout_height="40dip"
android:layout_margin="10dip"
android:layout_weight="1"
android:text="Cancel" />
</LinearLayout>
</LinearLayout>
<Spinner
android:id="#+id/fileType"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/ftr_btn"
android:layout_alignParentLeft="true"
android:layout_below="#+id/fileType" >
</ListView>
Related
Question Edited :
I have added buttons at the bottom of screen now my listview is overlapping buttons in spite of putting scroll view. How can i limit my scroll view till button. Below is screenshot and code
Code edited as per suggestion
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
<View
android:id="#+id/separator"
android:layout_width="fill_parent"
android:layout_height="2dip"
android:layout_below="#android:id/tabs" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/btnSend"
android:layout_below="#+id/separator" >
<!-- Scrollview for message data -->
<ScrollView
android:id="#+id/formTab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="vertical" >
<LinearLayout
android:id="#+id/formLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<View
android:layout_width="fill_parent"
android:layout_height="5dip" />
</LinearLayout>
</ScrollView>
</FrameLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tabcontent"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/add_bt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_weight="1"
android:text="Home" />
<Button
android:id="#+id/back_bt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_weight="1"
android:text="Messages" />
<Button
android:id="#+id/back_bt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_weight="1"
android:text="History" />
<Button
android:id="#+id/back_bt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_weight="1"
android:text="Settings" />
<Button
android:id="#+id/back_bt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_weight="1"
android:text="Support" />
</LinearLayout>
</RelativeLayout>
</TabHost>
You may want to use ListView#addFooterView() to add a View at the bottom of the ListView.
Add android:layout_below="#+id/tabcontent" to your Button instead of declaring that the FrameLayout is above the Button, because XML is read from top to bottom, so when the definitions for the FrameLayout are read, there is no Button yet, which means it can't be "above" it.
I have a little problem defining a Relative Layout. I have a List View with scroll and two buttons always visible at the bottom of the list view. I just would like my two button have 50% of the width, filling the line. This is my code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:id="#+id/testbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Save" />
<Button
android:id="#+id/cancelButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/testbutton"
android:text="Cancel"/>
<ListView android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/LstPeriodOptions"
android:layout_alignParentTop="true"
android:layout_above="#id/testbutton" />
</RelativeLayout>
I tried to introduce the buttons in a Linear Layout and give the gravity=1 with width=0dp but in that case the ListView dissapears. Could you help me please?
Sorry for my english. This is the result I would like to have:
Thanks a lot, best regards.
EDIT: This is what I tried with Linear Layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/container" >
<Button
android:id="#+id/testbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Guardar" />
<Button
android:id="#+id/cancelButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/testbutton"
android:text="Cancelar"/>
</LinearLayout>
<ListView android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/LstPeriodOptions"
android:layout_alignParentTop="true"
android:layout_above="#id/container" />
</RelativeLayout>
Did you try with your LinearLayout in this way because this should work. Note all of the property changes. Since I don't know how yours was, I can't point out all of the differences.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/btnLL"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/testbutton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Save" />
<Button
android:id="#+id/cancelButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cancel"/>
</LinearLayout>
<ListView android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/LstPeriodOptions"
android:layout_above="#id/btnLL" />
</RelativeLayout>
Try out as below to set your button in LinearLayout and set it below your ListView:
<LinearLayout
android:id="#+id/laytbtns"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_below="#+id/LstPeriodOptions" >
<Button
android:id="#+id/testbutton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:text="Save"/>
<Button
android:id="#+id/cancelButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:text="Cancel" />
</LinearLayout>
Try this..
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/LstPeriodOptions"
android:layout_above="#id/testbutton" />
<LinearLayout
android:id="#+id/laytbtns"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_below="#+id/LstPeriodOptions" >
<Button
android:id="#+id/testbutton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:text="Save"/>
<Button
android:id="#+id/cancelButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:text="Cancel" />
</LinearLayout>
</LinearLayout>
I have the listView with set of items. And I want to add 2 buttons below the list. But if I do like this:
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fileManager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center" >
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:background="#000000"
android:id="#+id/fileManagerList"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</ListView>
<CheckedTextView
android:id="#+id/checkedTextItem"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:clickable="true"
android:checkMark="?android:attr/listChoiceIndicatorMultiple"
android:textColor="#000000"
android:paddingLeft="10dip"
android:paddingRight="6dip"
android:typeface="sans" android:textSize="16dip"/>
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fileManager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:gravity="center"
android:layout_alignBottom="#+id/fileManagerList">
<Button
android:id="#+id/attachFiles"
android:layout_width="200dp"
android:layout_height="55dp"
android:background="#007FFF"
android:gravity="center|center"
android:text="Attach files"
android:layout_alignBottom="#+id/fileManagerList"
android:textColor="#FFFFFF"
android:textSize="18dp"
android:textStyle="bold" />
<Button
android:id="#+id/cancelFiles"
android:layout_width="82dp"
android:layout_height="55dp"
android:background="#838B83"
android:gravity="center|center"
android:layout_alignRight="#+id/attachFiles"
android:layout_alignBottom="#+id/fileManagerList"
android:text="Do not attach"
android:textColor="#FFFFFF"
android:textSize="18dp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
my buttons displaying in each row of ListView. I tried do it the same way but using RelativeLayout, but I get correct list, buttons were in the bottom, but they overlay the last item of the list. How can I implement this?
Try this Layout, You can achieve your goal using the below XML Layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relRingtone"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ListView
android:id="#+id/fileManagerList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:choiceMode="singleChoice"
android:contentDescription="#string/ringtone"
android:layout_marginLeft="3dip"
android:textSize="2dp" />
<LinearLayout
android:id="#+id/closecalmlayout"
android:layout_below="#+id/fileManagerList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="1.0" >
<Button
android:id="#+id/btnOk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dip"
android:layout_marginTop="5dip"
android:layout_weight=".50"
/>
<Button
android:id="#+id/btnCancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dip"
android:layout_marginRight="5dip"
android:layout_marginTop="5dip"
android:layout_weight=".50"
/>
</LinearLayout>
</RelativeLayout>
Hope it helps.
This is because you are using #+id everywhere, wherever you are referring any id. Ex.:
android:layout_alignBottom="#+id/fileManagerList"
Use "#id/" instead.
And also, try:
android:layout_below="#id/fileManagerList" // Add this attribute in button.
How to display the layout with a ListView at top and mutliple Buttons at the bottom (as in pic)
Below is the code that I tried (Problem is the buttons are overlapping the list which is somewhat visible behind the buttons & the 3 buttons are not equal is size though I used the weight sum):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:weightSum="3" >
<Button
android:id="#+id/bDone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Done" />
<Button
android:id="#+id/bCancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cancel" />
<Button
android:id="#+id/bSelAll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Select All" />
</LinearLayout>
<ListView
android:id="#android:id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
</ListView>
</RelativeLayout>
What I did is basically do a 2 linear layouts, 1 for the list and 1 for the button. Also setting the weight = 1 and the width = 0 will make them equal size
This code worked for me:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="5dip"
android:layout_marginBottom="5dip"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_above="#+id/footerlayout"
android:id="#+id/listviewlayout">
<ListView
android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
</ListView>
</LinearLayout>
<LinearLayout android:id="#+id/footerlayout"
android:layout_marginTop="3dip"
android:layout_height="45dip"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:gravity="center"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/bDone"
android:text="Done"
android:layout_width="0dip"
android:layout_height="40dip"
android:layout_weight="1">
</Button>
<Button
android:id="#+id/bCancel"
android:text="Cancel"
android:layout_width="0dip"
android:layout_height="40dip"
android:layout_weight="1"
>
</Button>
<Button
android:id="#+id/bSelAll"
android:text="Select All"
android:layout_width="0dip"
android:layout_height="40dip"
android:layout_weight="1"
>
</Button>
</LinearLayout>
</RelativeLayout>
Add to LinearLayout id property and add this to ListView
android:layout_above="#id/linear_layout_id"
To make buttons equal size change in their properties this
android:layout_width="wrap_content"
to this
android:layout_width="match_parent"
I am making an android application that needs to use a scrollable layout that contains a couple of linearlayouts, a textview and a listview. How can i make this happen??? Please help and thanks SO much in advance! This is the xml code that i am using so far:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
android:orientation="vertical" >
<TextView
android:id="#+id/NotesWelcomeTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/NotesWelcomeText" />
<ListView
android:id="#+android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</ListView>
<LinearLayout
android:id="#+id/DeleteAllItemsFromListViewLinearLayout"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:visibility="invisible" >
<Button
android:id="#+id/CancelButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Cancel" />
<Button
android:id="#+id/DeleteAllButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Delete" />
</LinearLayout>
<LinearLayout
android:id="#+id/DeleteItemFromListViewLinearLayout"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:visibility="invisible" >
<Button
android:id="#+id/CancelButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Cancel" />
<Button
android:id="#+id/DeleteButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Delete" />
</LinearLayout>
<LinearLayout
android:id="#+id/AddItemToListViewLinearLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone" >
<EditText
android:id="#+id/AddItemToListViewEditText"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_weight="1" >
</EditText>
<Button
android:id="#+id/AddItemToListViewButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/Add" />
</LinearLayout>
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:singleLine="false"
android:text="#string/terms_and_conditions" />
</ScrollView>
Make your main layout as scroll layout inside that put the linear layout.
Keep in mind Scroll layout can hold only one type of item...
Once you do this, the whole layout is scroll able up and down or left and right as per your XML config.