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
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);
}
}
Just create a xml as you need.
Add these XML to your other screens using tag in your other Screen XMLs.
You can handle the button click as you need in each activity.
Hope this helps.
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.
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>
