Android: how to add custom title bar

If you want to create your own custom title bar, you should do change default themes and styles for title bar. So you need to go through following steps, details are below of these section:

1. define custom/your style derived from window title style, and that is referenced in theme
2. derive default theme and override attributes for window title bar
3. define custom title layout that will be shown in title bar
4. set custom theme attribute in activity declaration that will use this custom title bar  in AndroidManifest.xml
5. in derived activity class, for example LoginActivity extends Activity, your first code is to request Custom title feature in onCreate()
6. load content view and main layout
7. after that set custom title bar view/layout
8. that’s all

Details of these aforementioned steps are:

1. define – styles.xml (in folder yourproject/res/values/styles.xml)

<?xml version=”1.0″ encoding=”UTF-8″?>
<resources>
<style name=”WindowTitleBackground1″ parent=”android:WindowTitleBackground”>
@drawable/title_background
<!– <item name=”android:background”>@android:color/transparent</item> –>
</style>
</resources>

2. define – themes. xml (in folder yourproject/res/values/themes.xml)

<?xml version=”1.0″ encoding=”utf-8″?>
<resources>
<style name=”customTheme” parent=”android:Theme”>
<item name=”android:windowTitleSize”>25dip</item>
<item name=”android:windowTitleBackgroundStyle”>@style/WindowTitleBackground1</item>
</style>
</resources>

3. custom title bar layout (in folder res/layout/custom_titlebar.xml)

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout
xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:fitsSystemWindows=”true”
>
<ImageView
android:id=”@+id/headerSmallLogoImgVw”
android:layout_width=”40dip”
android:layout_height=”20dip”
android:scaleType=”fitCenter”
android:src=”@drawable/logo40″
android:layout_alignParentTop=”true”
android:layout_marginLeft=”10dip”
android:layout_marginTop=”3dip”
android:layout_marginBottom=”3dip”
></ImageView>
<TextView
android:id=”@+id/headerTitleTxtVw”
android:text=”Title”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignTop=”@+id/headerSmallLogoImgVw”
android:layout_centerInParent=”true”
></TextView>
</RelativeLayout>

4. set activity’s theme attribute in AndroidManifest.xml

<activity android:name=”.LoginActivity” android:theme=”@style/customTheme”></activity>

[5, 6, 7]. in Activity class

@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
//request custom title bar
requestCustomTitle();

//…. load content view and other stuff

//set custom title
setCustomTitle(“All Incidents”);

}

//request to set for custom title bar
protected void requestCustomTitle()
{
requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
}
//set custom title bar
protected void setCustomTitle(String msg)
{
//set custom title bar
getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.custom_titlebar);

TextView tv = (TextView) getWindow().findViewById(R.id.headerTitleTxtVw);
tv.setText(msg);
}

References:

• http://developer.android.com/guide/topics/ui/themes.html
• http://stackoverflow.com/questions/820398/android-change-custom-title-view-at-run-time
• http://www.anddev.org/my_own_titlebar_backbutton_like_on_the_iphone-t4591.html
• http://stackoverflow.com/questions/2251714/set-title-background-color
• http://stackoverflow.com/questions/2065430/fixed-android-detecting-focus-pressed-color