How to make android:layout_gravity="bottom|center_horizontal" stays at bottom

Question

I have a vertical LinearLayout which has a list view and one ImageView at the bottom and one at top and the list view filled up the space left behind.

It looks like this:

<LinearLayout layout_height="match_parent" layout_width="@dimen/width"
    orientation="vertical"> 
    <ImageView layout_height="@dimen/width" layout_width="@dimen/width" id="@+id/top">

     <ListView  android:layout_height="0px"
        android:background="#00ffff"
        android:layout_width="@dimen/width"
        android:layout_weight="1" />

     <ImageView layout_height="@dimen/width" layout_width="@dimen/width" id="@+id/bottom" layout_gravity="bottom|center_horizontal">

It works fine whenever I have the list view visible.

But whenever I set the ListView to visibility gone, the 'bottom' ImageView will popup to be just underneath the top Image View.

My question is why the bottom ImageView does not stay at the bottom despite I said ' android:layout_gravity="bottom|center_horizontal"' I have looked at hierarchyViewer, the height of the parent does match the screen's height. So the bottom Image view should honor the android:layout_gravity="bottom|center_horizontal" and stay at the bottom, right?

Answer 1

As alternative to my comments, you can replace your LinearLayout with a RelativeLayout. Agarwal already suggested this, but his code is a bit of a mess and at the time of this writing not correct in terms of what you want it to do.

Give below code a try. When you set the ListView to gone, the top and bottom images will stay positioned identical to when it's visible. Do note that I replaced the @dimens/width references, so you might want to put those back in.

<?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">

    <ImageView android:id="@+id/top" android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <ListView android:layout_width="fill_parent"
        android:layout_height="fill_parent" android:layout_above="@+id/bottom"
        android:layout_below="@+id/top" android:background="#00ffff" />

    <ImageView android:id="@+id/bottom" android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

Answer 2

The best solution is to use ralaticelayout for this::::

<?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:background="#0000FF">

 <ImageView android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/top" />
<ImageView android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/bottom" android:layout_alignParentBottom="true"/>
     <ListView  android:layout_height="fill_parent"
        android:background="#00ffff"
        android:layout_width="fill_parent"
        android:layout_below:@id/top android:layout_above:@id/bottom />


</RelativeLayout>