Android Header and Footer layout example

29 September 2013
By Gonçalo Marques
In this tutorial we will create an Android Header and Footer activity layout.

Introduction

Components reuse is an essential concept when we design an application's User Interface. Android applications are no exception to this rule. In this tutorial we will create an Android activity composed by three major sections (or components): Header, Footer and Content. The Header and Footer sections will be defined as reusable components.

Used software:

  1. Android SDK 22.0.5

The Header and Footer activity layout

We will start by defining an Android activity composed by three components, Header, Footer and Content:

Header, Footer and Content Android activity

<?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:id="@+id/container"
  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="#AFA7EF"
    android:gravity="center">

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="5dp"
      android:text="Header"
      android:textColor="#000000"
      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="#6AED83"
    android:gravity="center">

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

  <!-- Content below header and above footer -->
  <RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_above="@id/footer"
    android:layout_below="@id/header"
    android:gravity="center">

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Content goes here"
      android:textColor="#FFFFFF"
      android:textSize="20sp" />
  </RelativeLayout>

</RelativeLayout>

We have defined a main RelativeLayout that will be the activity container. Then we defined another set of three Relative Layouts that will be the Header, the Footer and the Content containers.

The Header relative layout is defined with ID "header" (id="@+id/header"). We defined the value of attribute layout_alignParentTop to true so it will be aligned to the top of its parent element, ie. the main container.

The Footer relative layout is defined with ID "footer" (id="@+id/footer"). We defined the value of attribute layout_alignParentBottom to true so it will be aligned to the bottom of its parent element, ie. the main container.

The Content container is defined with layout_below="@id/header" and layout_above="@id/footer" so it will be placed below the header component and above the footer component.

Note that we defined the component as the last element in our activity. This is because we have configured the layout_above="@id/footer" attribute so we need to have an already defined component which ID is footer, so our footer must appear first in our activity.

When we launch our activity the following user interface will be generated:

Header and Footer activity layout
Android header and footer layout

Component reuse

Now we will configure the header and footer components as separate layout files so we may define them in a single place and reuse them across multiple activities.

First we externalize the header into header.xml:

header.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/header"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:background="#AFA7EF"
    android:gravity="center">

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

</RelativeLayout>

Now we externalize the footer into footer.xml:

footer.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/footer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="#6AED83"
    android:gravity="center" >

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

</RelativeLayout>

And finally we include both the externalized header and footer into the simplified main activity:

Header, Footer and Content Android activity

<?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:id="@+id/container"
  android:layout_width="match_parent"
  android:layout_height="match_parent" >

  <!-- Header aligned to top -->
  <include layout="@layout/header" />

  <!-- Footer aligned to bottom -->
  <include layout="@layout/footer" />

  <!-- Content below header and above footer -->
  <RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_above="@id/footer"
    android:layout_below="@id/header"
    android:gravity="center">

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Content goes here"
      android:textColor="#FFFFFF"
      android:textSize="20sp" />
  </RelativeLayout>

</RelativeLayout>

The final result will be the same Header and Footer layout but this time we externalized the individual header and footer layout files:

Header and Footer activity layout
Android header and footer layout

Fixed Header and Footer with scrollable content

If you need a layout with a fixed header and footer with scrollable content you may read the following article: Android fixed Header and Footer with scrollable content layout example.

Related Articles

Comments

About the author
Gonçalo Marques is a Software Engineer with 8+ years of experience in software development and architecture design. During this period his main focus was delivering software solutions both in banking and telecommunications area. He created the Bytes Lounge website with one ultimate goal: share his knowledge with the software development community. His main area of expertise is Java and open source.

He is also the author of the WiFi File Browser Android application: