Search code examples
androidxmlandroid-layoutheaderfooter

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


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

  • 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);
            }
    }