How to set Header , Scrollable content and Footer? in Android

Question

I want to make middle part to be scrollable. I couldn't get any idea.. and this is my xml outline. I want to insert this xml outline in scrollable area.

Note: Header and Footer has to be constant. Only middle area has to be scrolled

Answer 1

The easier way is to use :

<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"
    tools:context=".MainActivity" >

    <LinearLayout
        android:id="@+id/headerView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true" >
    </LinearLayout>

    <ScrollView
        android:id="@+id/scrollablContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/footerView"
        android:layout_below="@+id/headerView" >

        <LinearLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
        </LinearLayout>
    </ScrollView>

    <LinearLayout
        android:id="@+id/footerView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" >
    </LinearLayout>

</RelativeLayout>

Answer 2

You have to replace the external container from LinearLayout to RelativeLayout, then set the alignParentTop=true for the header ImageView, alignParentBottom=true for the footer ImageView, and set layout_above="@+id/imageViewFooter", layout_below="@+id/imageViewHeader" for the ScrollView. 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" >

    <ImageView
        android:id="@+id/imageViewHeader"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="false"
        android:layout_alignParentTop="false"
        android:scaleType="fitXY"
        android:src="@drawable/square" />

    <ImageView
        android:id="@+id/imageViewFooter"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"

        android:scaleType="fitXY"
        android:src="@drawable/square" />

    <ScrollView
        android:id="@+id/scrollView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/imageViewFooter"

        android:layout_below="@+id/imageViewHeader" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />
        </LinearLayout>
    </ScrollView>

</RelativeLayout>

Answer 3

You might want the listView with header and footer in it.

Have you seen this?

Also See this one.

and also this one.

Hope this all help you. if not then let me know.

Enjoy coding. :)