Android Header and Footer layout example
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:
- 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:
<?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:
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:
<?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:
<?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:
<?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:
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.