Nikos Maravitsas

About Nikos Maravitsas

Nikos has graduated from the Department of Informatics and Telecommunications of The National and Kapodistrian University of Athens. Currently, his main interests are system’s security, parallel systems, artificial intelligence, operating systems, system programming, telecommunications, web applications, human – machine interaction and mobile development.

Android fixed Header and Footer with scrollable content layout example

In this tutorial we are going to see how you can create a simple Android Layout with a fixed header and footer but with a scrollable content. You may find this particularly useful when some components of your layout should always be visible to the user despite the number of  items to be displayed. Menu bars, option buttons, widgets or simply titles could be such components. For example, when creating an Image Gallery application, you want the user to be able to scroll up and down the image list, but you also want your image processing menu bar to be always visible. This tutorial will provide the basic infrastructure to produce such layouts.

For this tutorial, we will use the following tools in a Windows 64-bit platform:
 

  1. JDK 1.7
  2. Eclipse 4.3 Kepler
  3. Android SKD 4.3

1. Create a new Android Project

Open Eclipse IDE and go to File -> New -> Project -> Android -> Android Application Project.

new-android-project

You have to specify the Application Name, the Project Name and the Package name in the appropriate text fields and then click Next.

project-name

In the next window make sure the “Create activity” option is selected in order to create a new activity for your project, and click Next. This is optional as you can create a new activity after creating the project, but you can do it all in one step.

configure-project

Select “BlankActivity” and click Next.

You will be asked to specify some information about the new activity.  In the Layout Name text field you have to specify the name of the file that will contain the layout description of your app. In our case the file res/layout/main.xml will be created. Then, click Finish.

2. Creating the layout of the Main Activity

Open res/layout/main.xml file :

project-stucture

And paste the following code :

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

  <!-- Header aligned to top -->
  <RelativeLayout
    android:id="@+id/header"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:background="#FC9"
    android:gravity="center" >

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="5dp"
      android:text="Fixed Header"
      android:textColor="#000"
      android:textSize="20sp" />
  </RelativeLayout>

  <!-- Footer aligned to bottom -->
  <RelativeLayout
    android:id="@+id/footer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="#FC0"
    android:gravity="center" >

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="5dp"
      android:text="Fixed Footer"
      android:textColor="#000"
      android:textSize="20sp" />
  </RelativeLayout>

  <!-- Scrollable Item below header and above footer -->
  <ScrollView
    android:id="@+id/scrollableContents"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_above="@id/footer"
    android:background="#005"
    android:layout_below="@id/header" >

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

      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 1"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 2"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 3"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 4"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 5"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 6"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 7"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

       <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 8"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

        <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 9"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

         <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 10"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

    </LinearLayout>

  </ScrollView>

</RelativeLayout>

The idea here is very simple. We have two RelativeLayouts, one aligned at the top of the screen, using android:layout_alignParentTop="true" property, and one aligned at the bottom of the screen using android:layout_alignParentBottom="true" property. Then we simply place a ScrollView between these two view using android:layout_above="@id/footer" and android:layout_below="@id/header". These properties will place our ScrollView above the element with id footer and bellow the element with id header.

2. Code the Main Activity

Use the Package Explorer to navigate to the Java file of the Activity you’ve created:

For this example you don’t have to change anything to the auto generated code so you can leave it as it is.

MainActivity.java:

package com.javacodegeeks.android.androidscrollablecontent;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}
}

4. Run the application

This is the main screen of our Application:

emulator-screen1

Now, if you scroll down the item list you will see that the header and the footer elements hold their positions.

emulator-screen-scrolled

Making your scrollable contents flexible

In the above code we sort of hard coded the contents of the ScrollView in the main layout of the activity. But you may want to inflate the ScrollView dynamically in your code, using a custom ArrayAdapter for example. Or, more importantly you may want to make this layout reusable to your other activities, each one having their own contents to display.

To achieve that, we are simply going to separate the main layout from the contents of the ScrollView. Go ahead and rename the main.xml file of the previous example to scrollable_contents.xml and simply erase the items from the ScrollView.

scrollable_contents.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" >

  <!-- Header aligned to top -->
  <RelativeLayout
    android:id="@+id/header"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:background="#FC9"
    android:gravity="center" >

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="5dp"
      android:text="Fixed Header"
      android:textColor="#000"
      android:textSize="20sp" />
  </RelativeLayout>

  <!-- Footer aligned to bottom -->
  <RelativeLayout
    android:id="@+id/footer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="#FC0"
    android:gravity="center" >

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="5dp"
      android:text="Fixed Footer"
      android:textColor="#000"
      android:textSize="20sp" />
  </RelativeLayout>

  <!-- Scrollable Item below header and above footer -->
  <ScrollView
    android:id="@+id/scrollableContents"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_above="@id/footer"
    android:background="#005"
    android:layout_below="@id/header" >

     <!-- Inflate the contents of the ScrollView dynamicaly -->

  </ScrollView>

</RelativeLayout>

Now you can create a new XML Layout file containing the items you want to fill your ScrollView with. To create a new layout file, go to the Package Explorer and find /res/layout folder. Right Click on the folder -> New -> Other -> Android -> Android XML Layout file:

new-layout-file

Put a name for your new layout file and click “Finish”:

name-new-xml-layout-file

So this is the new Project Structure:

new-project-structure

Open contents.xml and put the items you want:

contents.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 1"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 2"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 3"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 4"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 5"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 6"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 7"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 8"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 9"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 10"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

</LinearLayout>

Code the Main Activity

Now we have to inflate the ScrollView with the items form the contents.xml file. Let’s see how you can do that:

MainActivity.java:

package com.javacodegeeks.android.androidscrollablecontent;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ScrollView;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.scrollable_contents);

		ScrollView scrollable_contents = (ScrollView) findViewById(R.id.scrollableContents);
		getLayoutInflater().inflate(R.layout.contents, scrollable_contents);

	}

}

Run the application

This is the main screen of our Application:

emulator-screen1

Now, if you scroll down the item list you will see that the header and the footer elements hold their positions.

emulator-screen-scrolled

Download Eclipse Project

This was an Android example on how to create fixed Header and Footer with scrollable content layout. Download the Eclipse Project of this tutorial: AndroidScrollableContent.zip

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

JPA Mini Book

Learn how to leverage the power of JPA in order to create robust and flexible Java applications. With this Mini Book, you will get introduced to JPA and smoothly transition to more advanced concepts.

JVM Troubleshooting Guide

The Java virtual machine is really the foundation of any Java EE platform. Learn how to master it with this advanced guide!

Given email address is already subscribed, thank you!
Oops. Something went wrong. Please try again later.
Please provide a valid email address.
Thank you, your sign-up request was successful! Please check your e-mail inbox.
Please complete the CAPTCHA.
Please fill in the required fields.

9 Responses to "Android fixed Header and Footer with scrollable content layout example"

  1. Zoujun says:

    great,thanks so much.

  2. siddhu says:

    Really Appreciating ..!!!!

  3. dc says:

    Nice tutor sir, thanks :)

  4. Tui says:

    Thank So Much Sir.

  5. guananddu says:

    great!!!!!

  6. RAKSHIT says:

    nice work

  7. Rens says:

    This helps me a lot,i love you man :D thanks a lot

  8. karaca says:

    hi.
    when landscape to portrait or portrait to landscape, the added views are gone. like on create.
    how can we prevent it?
    thanks

  9. Massoud says:

    Very nice tutorial. Thanks very much.
    Good Luck!!!

Leave a Reply


four − 1 =



Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy | Contact
All trademarks and registered trademarks appearing on Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.
Do you want to know how to develop your skillset and become a ...
Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

Get ready to Rock!
You can download the complementary eBooks using the links below:
Close