LinearLayout背景颜色填充整个页面

Question

I'm trying to fill a LinearLayout with a background colour, however at the bottom of the screen I have a footer with a ListView, which the background colour with covering.

Code:

 <ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fillViewport="true">

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:background="#ffffff">

        <!--  Header Starts-->
        <LinearLayout android:id="@+id/header"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@layout/header_gradient"
            android:paddingTop="5dip"
            android:paddingBottom="5dip">
            <!-- Logo Start-->
            <ImageView android:src="@drawable/reglogo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dip"/>
            <!-- Logo Ends -->
        </LinearLayout>
        <!--  Header Ends -->

        <!-- Footer Start -->
        <LinearLayout android:id="@+id/footer"
            android:layout_width="fill_parent"
            android:layout_height="90dip"
            android:orientation="vertical"
            android:layout_alignParentBottom="true">
            <!-- List Starts -->
            <ListView
                android:id="@+id/list"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
            </ListView>
        </LinearLayout>
        <!-- Footer Ends -->

        <LinearLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            android:layout_below="@id/header"
            android:background="@color/blue">
        </LinearLayout>

    </RelativeLayout>
</ScrollView>

I understand android:layout_width="fill_parent" is what is causing the problem, but when I used wrap_content it didn't fill the area I wanted it to.

How do I stop the background colour continuing to the bottom of the page?

Answer 1

The problem is that android:layout_below="@id/header" is causing the LinearLayout to overlap your footer. Try making it like this:

<LinearLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            android:layout_below="@id/header"
            android:layout_above="@id/footer"
            android:background="@color/blue">
</LinearLayout>

Where we now align above as well so that it won't overlap.

edit: The key point to remember is that RelativeLayout and FrameLayout allow Views to overlap each other. Also keep in mind that Views later in XML for a ViewGroup have a higher Z-order. If my suggestion doesn't work (can't test it at the moment, sorry) then you can alternatively try to declare your footer after your blue background to see if the Z-order will show above the blue background.