Question

I’m attempting to build an Android layout that has a fixed footer, with the remaining area taken up by a ScollView. Where this gets tricky is that at the bottom of the ScrollView, I need a second “footer”, where there’s another image, but but fixed to the bottom of the ScrollView, and which sits behind the ScrollView (and have contents scrolled over it.) Here’s a visual example.

When I use the RelativeLayout method to create a fixed footer, that works, but it seems like the space that’s taken up by it isn’t removed from the overall screen size. I’ve tried what seems like a seemingly endless combination of methods, and I can’t seem to come up with one that works.

Here’s what I’ve been working with.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:gravity="top" android:layout_height="fill_parent" android:layout_width="fill_parent" android:background="@drawable/background_image" android:orientation="vertical">
<ScrollView android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="fill" android:layout_weight="1">
    <FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1">
        <ImageView android:layout_centerHorizontal="true" android:layout_width="fill_parent" android:layout_height="wrap_content" android:src="@drawable/scroll_footer_image" android:layout_gravity="bottom" android:layout_weight="1"></ImageView>
        <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_weight="1">
            <!-- content for the scrollview goes here. -->
        </LinearLayout>
    </FrameLayout>
</ScrollView>
<RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/footer_background_image" android:layout_alignParentBottom="true">
    <ImageView android:scaleType="centerInside" android:layout_gravity="center"  android:clickable="false" android:src="@drawable/footer_contents" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:layout_weight="0"></ImageView>
</RelativeLayout>
</LinearLayout> 

Answer 1

Ok, so finally, it appears that answer appears to be to use android:layout_gravity and android:layout_weight. This appears to do the trick for me, with no padding on the images.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent" android:background="@drawable/background_image" android:orientation="vertical">
<FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:layout_gravity="fill">
    <ImageView android:src="@drawable/scroll_footer_image" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="bottom" android:layout_gravity="bottom"/>
    <ScrollView android:fillViewport="true" android:layout_width="fill_parent" android:layout_height="fill_parent">
        <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical">
            <!-- additional content goes here -->
        </LinearLayout>
    </ScrollView>
</FrameLayout>

<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_weight="0" android:gravity="bottom">
    <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/footer_topper_image" android:orientation="vertical"/>
    <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/footer_background_image" android:orientation="vertical" android:gravity="center">
        <ImageView android:src="@drawable/footer_contents" android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageView>
    </LinearLayout>
</LinearLayout>