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

Solution 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>

Solution 2

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. :)

Solution 3

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>

Comments

[Anis BEN NSIR]

its just a sample you have to add your widget to the specific groupview, for example your header must be added to the LinearLayout headerView.

[DroidLearner]

How to set this android:scaleType="fitXY"and android:src="@drawable/square"

[DroidLearner]

MyBAD!! I got it.. what is meant by fitXY

[moondroid]

fitXY simply tells to the ImageView that the image must be fitted to the imposed dimensions, without respecting the proportions.

[Harsha]

when keyboard pop up footer view also scroll up how to disable