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:

About these ads

About M Moniruzzaman
A passionate software engineer, have been developing applications on various platforms such as Android, iPhone, .Net (C#) technologies and web based ASP.NET, PHP, JavaScript, jQuery technologies for more than 7 years. Especially I have expertise on developing applications for Android and iPhone, as well as service oriented, client-server based applications where clients will be reside on Android/iPhone that communicate with WCF(.NET) service hosted on server. I have completed certification in Microsoft Certified Professional Developer (MCPD) on .Net 4 . I have completed my graduation in -- B.Sc in Computer Science and Engineering, ShahJalal University of Science and Technology, Bangladesh. Thanks, M. Moniruzzaman (Zaman)

4 Responses to Android: how to add custom title bar

  1. Aidan Follestad says:

    This was very helpful!

  2. Ed Hepler says:

    Thanks… Was able to get my custom title bar to work, but the overall appearance/theme changes with the code line in section 2:

    If I change the parent to “android.Theme.Holo” (to get the original theme back) I get an error at run-time error:

    “You cannot combine custom titles with other title features”

    Does the “Holo” theme have different items that must be modified?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: