When building an application, sometimes we need to create a custom window title to suit our needs and make our application differs from others. There are two approaches to create custom window title, first is by creating custom style and apply it as theme in application manifest and the second is by creating a custom xml layout and combined with custom style as in first approach.
Our first example will display a custom window title with a logo image on the left of title bar.
- Create custom layout for window title in “layout” folder.
window_title.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="35dip" android:gravity="center_vertical" android:paddingLeft="5dip" android:background="#323331"> <ImageView android:id="@+id/header" android:src="@drawable/header" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout>
This custom layout will display a header image/logo using ImageView on the left of title bar. The height of the bar is 35dip and has #323331 background color.
- Create custom style in “values” folder.
custom_style.xml
<resources>
<style name="CustomWindowTitleBackground">
<item name="android:background">#323331</item>
</style>
<style name="CustomTheme" parent="android:Theme">
<item name="android:windowTitleSize">35dip</item>
<item name="android:windowTitleBackgroundStyle">@style/CustomWindowTitleBackground</item>
</style>
</resources>
Based on custom window title layout, make adjustment on Android window style parameters: android:windowTitleSize (35dip) and android:windowTitleBackgroundStyle (#323331).
- Apply custom style in manifest file as theme.
AndroidManifest.xml
<application android:icon="@drawable/icon" android:label="@string/app_name" android:theme="@style/CustomTheme">
- Apply custom window title in main activity class
CustomWindowTitle.xml
public class CustomWindowTitle extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
setContentView(R.layout.main);
getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.window_title);
}
}
To apply custom window title, call requestWindowFeature(Window.FEATURE_CUSTOM_TITLE) method before setContentView and set custom layout using getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.window_title) after setContentView method.
- Here is the result
Our first example is pretty easy for a single activity application, but for an application with more the one activty we have to make a slight modification so our custom title can be applied to all activities. This example below consists of two menus (News, Info) which each menu represented by an activity. Each menu activity will display its title and small icon on the right of title bar.
window_title.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="35dip" android:gravity="center_vertical" android:paddingLeft="5dip" android:background="#323331"> <ImageView android:id="@+id/header" android:src="@drawable/header" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="right|center_vertical" android:paddingRight="5dip"> <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="11dip" android:paddingRight="5dip" /> <ImageView android:id="@+id/icon" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout> </LinearLayout>
- Create parent class for window title
CustomWindow.java
public class CustomWindow extends Activity {
protected TextView title;
protected ImageView icon;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
setContentView(R.layout.main);
getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.window_title);
title = (TextView) findViewById(R.id.title);
icon = (ImageView) findViewById(R.id.icon);
}
}
- Extend CustomWindow class on each menu activity
News.java
public class News extends CustomWindow {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.news);
this.title.setText("News");
this.icon.setImageResource(R.drawable.menu_news);
}
}
Info.java
public class Info extends CustomWindow {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.info);
this.title.setText("Info");
this.icon.setImageResource(R.drawable.menu_info);
}
}
- Main activity class
MyApp.java
public class MyApp extends CustomWindow {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Button b1 = (Button) findViewById(R.id.b1);
b1.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent();
intent.setClass(MyApp.this, News.class);
startActivity(intent);
}
});
Button b2 = (Button) findViewById(R.id.b2);
b2.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent();
intent.setClass(MyApp.this, Info.class);
startActivity(intent);
}
});
}
}
- Here is the result
by 
Great tutorial, everyone should consider implementing something of this variety.
Great post – helped me out …
Thanks for the post – helped me out a lot….
Great article, really helped me out. Thanks
Thank you very much. It is helpful.
Thanks a lot!
Very nice.
Can you tell me how to add a listener to the title bar icon (News or Info icon as above)?
Exactly what I wanted! Thank you!
Great article. But can you tell me which Android version it is workable.
Great!
Is it possible for the icons in title bar clickable and start an activity?
Is it possible to suppress the title before the modified one appears?
It will be perfect if these two can be done.
Great tutorial! I found it truely helpful. Keep the good work going!
Just wanted to say thanks, I have looked at a few tutorials on creating custom titles and this is by far the easiest to follow
Awesome post. Very helpful. Worked great, but having trouble getting it to work on Preference screens. Any luck with those?
@inf, if you want the “native” title not to show few seconds at startup, set the text and background transparent:
custom_styles.xml
@android:color/transparent
0sp
@android:color/transparent
48dp
@style/CustomWindowTitleBackground
@style/CustomWindowTitleText
Ouch, looks pretty uggly, but you got the idea.
Change the windowTitleBackgroundStyle to use color “@android:color/transparent”.
Also create a style for the text “android:windowTitleStyle” and set its “android:textColor” to transparent as well.
Yes.. finally i find what i want. thx londatiga.net
Thanks a lot.
Thanks a lot , it is a nice tutorial, it helps me a lot.
Wonderful example…
Thanks…..
Great tutorial, please continue with the great work.
In the latter example, you did setContentView() two times in each activity class. Is it a bad practice?
Thanks for your kindness.
thanks lorenz for such a post..
easy to follow and clearly understandable.
exactly what i need in my android app project
You’re welcome lin
Hmmm, everything seems to work except the bitmap doesn’t appear! I’ve got the correct name, it is a nice png with transparent background, the size is right… Any ideas why it might not appear? Many thanks, Baz.
It is correctly taking the size and background colour settings from custom_style.xml but ignoring everything in window_title.xml… very strange. Any ideas welcomed. Many thanks. Baz.
Hey, thanks for the great work.
I was wondering, your activities are extending the CustomWindows class. I am developing an application that is already extending some classes like ListActivity. what would I do in such a case, because after all I am using a list view
Great work, it really help my app.
Geat tutorial,just what I was looking for
Thank you for the tutorial, it helped me a lot. I have a strange issue although. When i change the background for the linearLayout container there are strange visible margins in left and right side, which overlaps the original title bar. Can you help me with some advice?
For those that with struggle with the same issue I did on the custom title where the default container for the title bar adds padding you really might want to point out that it is possible to remove this padding by adding an additional item to the CustomWindowTitleStyle style with the name “android:padding” set to 0px.
Thanks man..great tutorial…. 🙂 helped a lot….
nice post really very helpfully……
very useful…
thanks
Thanks, it helps me a lot.
Grate tutorial dear
thank you for this help
keep it up.
Your post is very helpful. Thanks 🙂
Mantappp…. Great…
Outstanding! This is exactly what I was looking for.
Thanks for putting it together!
It seems to work fine just setting it in the theme. No need for step 4 on 2.2+ at least.. You can stop at step 3 and get the same results.
Nevermind, it seems you only need that if you want to use a custom layout as well.
very good, but i get a null pointer exception when i try this.title.setText(“whatever”) don’t understand
i got the solution, i just had to to
getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.window_title);
before
title = (TextView) findViewById(R.id.title);
Hi,
Great Tutorial.I had one small question. What precisely is the point of setting up the style in the manifest.xml when It works very well without it.
The class CustomWindow needs to be adjusted to work properly.
public class CustomWindow extends Activity
{
protected TextView title;
protected ImageView icon;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.window_title);
}
@Override
public void setContentView( int layoutResID )
{
super.setContentView( layoutResID );
getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.window_title);
title = (TextView) findViewById(R.id.title);
title.setTextColor( Color.GREEN );
icon = (ImageView) findViewById(R.id.icon);
}
}
Anyone knows if there is a way to avoid the original title bar to show up for few seconds at all ???
im getting the same issue how can we fix it 🙁
thanks.
nice one !
Why do i obtain this error ?
“You cannot combine costum titles with other title features”
Hi, im having a problem, im trying the 1st example but gives me a error about the api, mine api is 10, and it says that shoudl be api 12?
Cant i have custom themes in api 10?
Thanks in advance.
hello thanks for the tut…
y does it change me android text color for whole app??
I can’t do this
Do action button(Settings) also be there if the above code is used?
Where is ¨Think android¨???????????????????????????????
Thanks bro! it help alot in creating my website mobile application.
Thanks buddy.. Its helped..
very nice … thank you..^-^
Hi,
I am getting error –
Error 30 No resource found that matches the given name (at ‘theme’ with value ‘@style/CustomTheme’)