Develop Reference

Using ScrollView with LinearLayout, Android

In my xml file , i have one linearLayout and a button. The linearLayout contains a lot of textViews and checkboxes. So i wanted these textViews and checkboxes to scroll but the button should remain at its place i.e it should not scroll with the textViews. For this purpose, i cover my linearLayout with scrollView like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/homeo11" >
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/nexttodetail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="10dp">
</LinearLayout>
</ScrollView>>
<Button android:id="#+id/Next4"
android:layout_gravity="right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Next" />
</LinearLayout>
But doing this , hid my button. means the textviews and checkboxes are now scrolling properly but i can't see my next button. I try replacing the scrollView layout:height from fill_parent to wrap_content but this didn't work as well. Any help?

Use a RelativeLayout as your root View and then set your component with align_above, align_parent_top and align_parent_bottom like this:
<?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:background="#drawable/homeo11" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_above="#+id/Next4" >
<LinearLayout
android:id="#+id/nexttodetail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="10dp">
(...)
</LinearLayout>
</ScrollView>>
<Button
android:id="#+id/Next4"
android:layout_gravity="right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginTop="10dp"
android:text="Next" />
</RelativeLayout>

How to center a ListView in a LinearLayout in android

I have a ListView which has two columns and what I want is to center that ListView in a Linerlayout. Here is the layout code of the ListView.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center" >
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:id="#+id/mylist">
</ListView>
</LinearLayout>
And here is the layout of the individual items of the ListView
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/prayLabel"
android:layout_width="100dip"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/prayValue"
android:layout_width="100dip"
android:layout_height="wrap_content" />
</LinearLayout>
Although my ListView is appearing vertically centered, but it's not appearing horizontally centered as its width is spanning the entire width of the screen. I guess as I used wrap_content in the layout_width in all the places its width should not span the entire width of the screen/layout?
Thanks

I would wrap it in a RelativeLayout for simplicity- I struggle with this too and end up doing this on simpler layouts**:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- Note the 'centre in parent' tag below -->
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:id="#+id/mylist"/>
</RelativeLayout>
</LinearLayout>
** Disclaimer: This pattern can become expensive on more complex views but a LinearLayout > RelativeLayout > ListView hierarchy is just fine.

You can use android:weightSum on your linear layout and then use empty views either side to center your ListView as follows:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".05"/>
<ListView
android:id="#+id/list_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".9"
android:paddingLeft="4dp"
android:paddingRight="4dp" />
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".05"/>
</LinearLayout>
of course you can adjust the weights, jsut make sure the Views are set the same so the ListView is centered.

Are there any ways to put view slightly outside its parent layout?

It's a question about Android layouts. Here's what I eagerly want to get:
Dark-gray is a LinearLayout. Orange is layout X and then Green is a FrameLayout. I need to put Green outside its parent - layout X. The layout hierarchy described can't be changed. The only option is layout X - it could be whatever you want.
Any ideas?

Use -
android:clipChildren="false"
android:clipToPadding="false"
in every parent of your child view, then you put 'left margin' of your view to be negative,which will put your child view outside of parent view and will not even clip the view.

You can't put the Green part in Layout X, because it can not be drawn outside its parents.
So, you should implements a RelativeLayout or FrameLayout (root Layout) as the parents of all of these Views.
And Put the Green View as the childView of the root Layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_root"
android:layout_width="fill_parent"
android:layout_height="200dp"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/layout_dark_grey"
android:layout_width="100dp"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:id="#+id/layout_orange"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#id/layout_dark_grey"
android:orientation="vertical" >
</LinearLayout>
<RelativeLayout
android:id="#+id/layout_green"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerVertical="true"
android:layout_toLeftOf="300dp" >
</RelativeLayout>
</RelativeLayout>

Just add android:clipChildren="false" to the parent layout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:clipChildren="false">
<LinearLayout
android:layout_marginLeft="-25dp"
android:background="#color/colorGray"
android:layout_width="100dp"
android:layout_height="100dp"/>
<LinearLayout
android:gravity="center|left"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:background="#color/colorOrange">
<LinearLayout
android:layout_marginLeft="-25dp"
android:background="#color/colorGreen"
android:layout_width="50dp"
android:layout_height="50dp"></LinearLayout>
</LinearLayout>
</LinearLayout>

Android Layout Listview height adjustment under relativelayout

I would like add a listview or tableview occupy 2/3 of the screen and then there would a giant button at the center just beneath the listview. Right now the problem is the listview take up the whole height of the screen. I couldn't adjust the height on the graphical layout. I would like to take up only 5 Items height size. Beneath would be button center on screen,
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/relativeLayout"
android:padding="3dp" xmlns:android="http://schemas.android.com/apk/res/android">
<ListView android:layout_height="wrap_content"
android:id="#+id/listView1"
android:layout_width="fill_parent" android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"></ListView>
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/relativeLayout"
android:padding="3dp" xmlns:android="http://schemas.android.com/apk/res/android">
<ListView android:layout_height="fill_parent"
android:id="#+id/listView1"
android:layout_above="#+id/button1"
android:layout_width="fill_parent"></ListView>
<Button android:layout_height="wrap_content"
android:id="#+id/button1"
android:layout_alignParentBottom="true"
android:layout_width="fill_parent"></Button >
</RelativeLayout>

From what you said in your question, it sounds like a vertical LinearLayout would work better for you.
That way you could have the ListView take up exactly two thirds of the screen by placing two views inside the top level LinearLayout, and use weights to distribute the views on the screen.
For example:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2" >
</ListView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
</LinearLayout>

Android: How can you align a button at the bottom and listview above?

I want to have a button at the bottom of the listview.
If I use relativeLayout/FrameLayout, it aligns but listView goes down to very botton.
(Behind the button at the bottom)
FrameLayout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/btnButton"
android:text="Hello"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
</FrameLayout>
</FrameLayout>
RelativeLayout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/btnButton"
android:text="Hello"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
</RelativeLayout>
</RelativeLayout>
Above two codes only work like the first image. What I want is second image.
Can anybody help?
Thank you.

A FrameLayouts purpose is to overlay things on top of each other. This is not what you want.
In your RelativeLayout example you set the ListViews height and width to MATCH_PARENT this is going to make it take up the same amount of space as its parent, and thus take up all of the space on the page (and covers the button).
Try something like:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"/>
</LinearLayout>
The layout_weight dictates how the extra space is to be used. The Button does not want to stretch beyond the space it requires, so it has a weight of 0. The ListView wants to take up all of the extra space, so it has a weight of 1.
You could accomplish something similar using a RelativeLayout, but if it is just these two items then I think a LinearLayout is simpler.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
>
<ListView android:id="#+id/ListView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
</ListView>
<FrameLayout android:id="#+id/FrameLayout01"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button android:id="#+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"
android:layout_gravity="center_horizontal">
</Button>
</FrameLayout>
</LinearLayout>
Here is the design you are looking for.
Try it.

I needed two buttons side-by-side at the bottom. I used a horizontal linear layout, but assigning android:layout_height="0dp" and android:layout_weight="0" for the buttons' linear layout didn't work. Assigning android:layout_height="wrap_content" for just the buttons' linear layout did. Here's my working layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/new_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="New" />
<Button
android:id="#+id/suggest_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Suggest" />
</LinearLayout>
</LinearLayout>

RelativeLayout will ignore its children android:layout_width or android:layout_height attributes, if the children have attributes that properly define their left and right or top and bottom values, respectively.
To achieve the result on the right image, showing the list above the button, your layout should look like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#android:id/button1"
android:layout_alignParentTop="true"/>
<Button
android:id="#android:id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="#android:string/ok"/>
</RelativeLayout>
The key is to define android:layout_alignParentTop (defines top value) and android:layout_above (defines bottom value) in your RecyclerView. This way, RelativeLayout will ignore android:layout_height="match_parent", and the RecyclerView will be placed above the Button.
Also, make sure you look into android:layout_alignWithParentIfMissing, if you have a more complex layout and you still need to define these values.

I am using Xamarin Android, and my requirement is exactly the same as William T. Mallard, above, i.e. a ListView with 2 side-by-side buttons under it.
The solution is this answer didn't work in Xamarin Studio however - when I set the height of the ListView to "0dp", the ListView simply disappeared.
My working Xamarin Android code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#+id/ListView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_above="#+id/ButtonsLinearLayout" />
<LinearLayout
android:id="#id/ButtonsLinearLayout"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/Button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:id="#+id/Button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
</RelativeLayout>
I aligned ButtonsLinearLayout to the bottom of the screen, and set the ListView to be above ButtonsLinearLayout.

#jclova one more thing you can do is use layout-below=#+id/listviewid in relative layout

In your relative layout height of listview is match_parent which is fill_parent(for 2.1 and older) so best solution is if you want to use relative layout then first Declare your button then your list view, make list view position as above your button id, If you want button always at bottom then make it alignParentBottom..
Snippet is
<RelativeLayout
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:id="#+id/rl1"><Button
android:layout_width="MATCH_PARENT"
android:layout_height="WRAP_CONTENT"
/><ListView
android:layout_width="MATCH_PARENT"
android:layout_height="0"
android:layout_above="#id/listview"/></RelativeLayout>
This prevents your list view taking whole place and make your button appear..

This will be the best and the most simple solution to the problem. Just add android:layout_above="#id/nameOfId" in the layout that you want to move above with respect to that layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.sumeru.commons.activity.CommonDocumentUploadActivity">
<ListView
android:id="#+id/documentList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/verifyOtp" />
<com.sumeru.commons.helper.CustomButton
android:id="#+id/verifyOtp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="#string/otp_verification" />
</RelativeLayout>