Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to have a fixed footer with scrollview in android?

I have been trying to use

Fixed footer not displaying the bottom-most list item

but does not work with scrollview . Note i am not using listview but it is a big layouts with images and buttons . The footer should be positioned at the botton always even while user is scrolling . FourSquare has this in their app where there is fixed footer even while scrolling.

<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:id="@+id/root"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <LinearLayout
        android:id="@+id/search_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/red" />

    <LinearLayout
        android:id="@+id/main_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/search_container"
        android:layout_below="@+id/root"
        android:background="@color/layout_bg_wallet_login"
        android:orientation="vertical" >
        ------More Buttons and Images
    </LinearLayout>
</RelativeLayout>

like image 660
Preethi Avatar asked Nov 07 '12 20:11

Preethi


2 Answers

Seems like your trying to put the footer inside the scroll view with the code you have. If you don't want the footer to move with your scroll content, you need to keep it on the same layer as the scroll view. Put together a simple example of what I believe your looking to accomplish. (didn't use strings.xml or colors.xml in this example but they should be used in for a real project)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<ScrollView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_above="@+id/footer"
    android:background="#0000ff"
    android:fillViewport="true" >

    <TextView
        android:id="@+id/texthere"
        android:layout_width="160dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:gravity="center_vertical|center_horizontal"
        android:text="test test test test test test test test test test 
        test test test test test test test test test test test test test 
        test test test test test test test test test test test test test"
        android:textSize="35sp" >
    </TextView>
</ScrollView>

<RelativeLayout
    android:id="@+id/footer"
    android:layout_width="fill_parent"
    android:layout_height="100dp"
    android:background="#ffff00" 
    android:layout_alignParentBottom="true">

    <TextView
        android:id="@+id/texthere2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="things in your footer here"
        android:textSize="20sp" />

</RelativeLayout>

</RelativeLayout>
like image 65
AJak Avatar answered Nov 07 '22 18:11

AJak


This solution has only a problem: the footer float over the scroll view and if there is not enough vertical space the footer hide the bottom part of the scroll view.

In order to be sure that the whole scroll view will be always shown I had a bottom padding to the scroll view equals to the footer height in the example (50dp):

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
  >
     <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="50dp" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            .......

        </LinearLayout>
    </ScrollView>

    <include
        android:layout_height="50dp"
        android:layout_width="match_parent"
        android:layout_alignParentBottom="true"
        layout="@layout/footer" >
    </include>
  </RelativeLayout>
like image 32
Panciz Avatar answered Nov 07 '22 19:11

Panciz