How do I create a header or footer button bar for my Android application

Question

Many popular apps like Google Maps, Facebook, Foursquare, etc. have header and/or footer bars on most of their activities. These headers often include very useful buttons, and I would like to create one for my app. Does anyone know how they are done? I haven't been able to find anything so far.

Here are some pictures of what I mean: http://www.flickr.com/photos/calebgomer/6262815430 http://www.flickr.com/photos/calebgomer/6262815458

Solution 1

Using this way you can make your header-footer xml and use it to any of your activity also you just need to write code for the controls in header-footer once in HeaderFooter.java and can access it your project.

Build your HederFooter.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent" android:weightSum="10"
    android:id="@+id/commonlayout" android:background="#FFFFFF">
    <LinearLayout android:id="@+id/llheader"
        android:layout_width="fill_parent" android:layout_height="0dp"
        android:background="@drawable/bar" android:layout_weight="1">



        <RelativeLayout android:id="@+id/relativeLayout1"
            android:layout_width="fill_parent" android:layout_height="fill_parent"
            android:layout_gravity="center">
            <Button
                android:id="@+id/Button_HeaderFooterSubscribe"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginRight="2dp"
                android:layout_centerVertical="true"
                android:background="@drawable/subscribe"
                />
                <Button
                android:id="@+id/Button_logout"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginRight="2dp"
                android:layout_centerVertical="true"
                android:background="@drawable/logout"
                />
                <Button
                android:id="@+id/Button_playlist"
                android:layout_marginLeft="2dp"
                android:layout_width="wrap_content"
                android:layout_centerVertical="true"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:background="@drawable/tempadd"
                />



</RelativeLayout>

    </LinearLayout>
    <LinearLayout android:id="@+id/lldata"
        android:layout_weight="8" android:layout_width="fill_parent"
        android:layout_height="0dp" android:background="#FFFFFF">


    </LinearLayout>

    <LinearLayout android:id="@+id/llfooter"
        android:layout_weight="1" android:layout_width="fill_parent"
        android:orientation="horizontal" android:layout_height="0dp"
        android:visibility="visible" android:background="@drawable/fbg"
        android:weightSum="5.0" android:gravity="center"
        android:layout_margin="0dp">

        <Button android:id="@+id/home" android:layout_height="wrap_content"
            android:layout_width="wrap_content" android:layout_weight="1"
            android:background="@drawable/home" android:textColor="#FFFFFF"
            android:padding="10px"></Button>

        <Button android:id="@+id/issue" android:layout_height="wrap_content"
            android:layout_width="wrap_content" android:layout_weight="1"
            android:background="@drawable/issue" android:textColor="#FFFFFF"
            android:padding="10px"></Button>

        <Button android:id="@+id/browse" android:layout_height="wrap_content"
            android:layout_width="wrap_content" android:layout_weight="1"
            android:background="@drawable/browse" android:textColor="#FFFFFF"
            android:padding="10px"></Button>

        <Button android:id="@+id/search" android:layout_height="wrap_content"
            android:layout_width="wrap_content" android:layout_weight="1"
            android:background="@drawable/search" android:textColor="#FFFFFF"
            android:padding="10px"></Button>

        <Button android:layout_height="wrap_content" android:id="@+id/favorite"
            android:background="@drawable/favorite" android:layout_width="wrap_content"
            android:layout_weight="1"
            android:textColor="#FFFFFF" android:padding="10px"></Button>
    </LinearLayout>

</LinearLayout>

Then Create One HeaderFooter.java Activity

public class HeaderFooter extends Activity {
        public void onCreate(Bundle savedInstanceState) {
             super.onCreate(savedInstanceState);
             setContentView(R.layout.headerfooter);
        }
 }

Now Extend above activity to your all other activities and inflate your particular view in the middle layout of the headerfooter.xml

public class Home extends HeaderFooter 
{
        @Override
        public void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            ViewGroup vg = (ViewGroup) findViewById(R.id.lldata);
            ViewGroup.inflate(Home.this, R.layout.home, vg);
        }
}

Solution 2

Just create a xml as you need.

Add these XML to your other screens using tag in your other Screen XMLs.

Sample is here.

You can handle the button click as you need in each activity.

Hope this helps.