Android ScrollView with fixed Header and Footer Layout

By Arvind Rai, September 19, 2015

This page will provide Android ScrollView with fixed header and footer layout example. When the number of lines of body content will be more, there will be scroll line. In our example there will be a header which will always be fixed at the top of mobile screen and a footer that will always be fixed at the bottom of the screen. The body content have scroll view with full body view. Find the complete example.

Layout

Find the layout.
layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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" 
	    xmlns:ads="http://schemas.android.com/apk/res-auto">
	    <RelativeLayout 
	            android:id="@+id/header"
		    android:layout_width="match_parent"
		    android:layout_height="30dp"
		    android:layout_alignParentTop="true"
		    android:background="#689F38"
		    android:gravity="center"        
                    android:layout_gravity="center">
		    <TextView
		        android:id="@+id/header_text"
		        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
		        android:text="@string/header_msg"
		        android:textColor="#FFFFFF"
		        android:textSize="25sp"/>
	    </RelativeLayout> 
	    <RelativeLayout 
	            android:id="@+id/footer"
		    android:layout_width="match_parent"
		    android:layout_height="30dp"
		    android:layout_alignParentBottom="true"
		    android:background="#689F38"
		    android:gravity="center"        
                    android:layout_gravity="center">
		    <TextView
		        android:id="@+id/footer_text"
		        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
		        android:text="@string/footer_msg"
		        android:textColor="#FFFFFF"
		        android:gravity="center"
		        android:textSize="25sp"/>
	    </RelativeLayout>
	    <ScrollView 
		    android:id="@+id/scroll_view"
		    android:layout_width="fill_parent"
		    android:layout_height="fill_parent"
		    android:layout_above="@+id/footer"
		    android:layout_below="@+id/header"	
		    android:fillViewport="true">  	  
			<LinearLayout
			    android:id="@+id/myLayout"
			    android:orientation="vertical"
			    android:layout_width="match_parent"
			    android:layout_height="wrap_content"
			    android:background="#FFFFFF"
			    android:fillViewport="true">
			    <TextView
			        android:id="@+id/bodytext"
			        android:layout_width="wrap_content"
		                android:layout_height="wrap_content"
			        android:text="@string/body_msg"
			        android:textColor="#F44336"
			        android:gravity="center"
			        android:textSize="25sp"/>
			</LinearLayout>
	    </ScrollView>
</RelativeLayout>

1. Create <RelativeLayout> as a root element.
2. To create header and footer, create another two <RelativeLayout> within root element.
3. For header, add the attribute
android:layout_alignParentTop="true"
This keeps header always at the top.
4. For footer, add the attribute
android:layout_alignParentBottom="true"
This keeps footer always at the bottom.
5. For body content, first create <ScrollView> and within it, create your layout. In our example we have created <LinearLayout>. To keep scroll view lower and upper limit within footer and header, we have to add attributes in ScrollView like
android:layout_above="@+id/footer"
android:layout_below="@+id/header"
To fill the view in the full screen, use the below attribute
android:fillViewport="true"

Activity Class

Find the activity class.
MainActivity.java

package com.concretepage;
import android.app.Activity;
import android.os.Bundle;
import android.text.Html;
import android.view.Menu;
import android.widget.TextView;
public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
	   super.onCreate(savedInstanceState);
	   setContentView(R.layout.activity_main);
	   setBodyText();
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
           getMenuInflater().inflate(R.menu.menu_main, menu);
           return true;
    }
    private void setBodyText() {
    	TextView textView = (TextView)findViewById(R.id.bodytext);
    	String text = "Line 1<br/><br/>Line 2<br/><br/>Line 3<br/><br/>" +
    				  "Line 4<br/><br/>Line 5<br/><br/>Line 6<br/><br/>" +
    				  "Line 7<br/><br/>Line 8<br/><br/>Line 9<br/><br/>" +
    				  "Line 10<br/><br/>Line 11<br/><br/>Line 12<br/><br/>" +
    				  "Line 13<br/><br/>Line 14<br/><br/>Line 15<br/><br/>";
    	textView.setText(Html.fromHtml(text));
    }
}

AndroidManifest.xml

Find the manifest file.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.concretepage"
    android:versionCode="1"
    android:versionName="1.0" >
    <uses-sdk android:minSdkVersion="14"/>
    <application 
        android:allowBackup ="false"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" android:theme="@android:style/Theme.NoTitleBar">
        <activity android:name="com.concretepage.MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

strings.xml

Find the strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Concretepage</string>
    <string name="footer_msg">Footer Text</string>
    <string name="header_msg">Header Text</string>
    <string name="body_msg"> Body Message </string>                                      
</resources>