CODEWITHSUNDEEP
androidxmlandroid-layoutheaderfooter
Caleb Gomer
Caleb Gomer

Reputation: 121

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

Upvotes: 12

Views: 18135

Answers (4)

MKJParekh
MKJParekh

Reputation: 34301

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

Upvotes: 15

Kurtis Nusbaum
Kurtis Nusbaum

Reputation: 30845

I think the element that you're liking in those layouts is the fact that they're using a FrameLayout for the lower part of the display.

They're probably doing something like this:

<LinearLayout android:orientation="vertical
  .../>
 <head layout element>
 <FrameLayout element>
 <footer layout element>
</LinearLayout>

Upvotes: 0

Vinay
Vinay

Reputation: 2415

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.

Upvotes: 2

Ramesh Akula
Ramesh Akula

Reputation: 5750

Design Xml layout with header,footer and body.you have to extend the main activity every time,you have to change body by inflating desired layout.

Upvotes: 0

Related Questions