How to Create Custom Window Title in Android

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.

    1. 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.

    1. 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).

    1. Apply custom style in manifest file as theme.

AndroidManifest.xml

<application android:icon="@drawable/icon" android:label="@string/app_name" android:theme="@style/CustomTheme">
    1. 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.

    1. 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.

    1. Modify previous custom layout to add TextView for menu title and ImageView for menu icon.

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>
    1. 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);
	}
}
    1. 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);
	}
}
    1. 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);
    		}
    	});
    }
}
    1. Here is the result

facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Comments

  1. inf says

    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.

  2. Paul says

    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

  3. Thomas Devaux says

    @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

    • Thomas Devaux says

      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.

  4. Emerald214 says

    In the latter example, you did setContentView() two times in each activity class. Is it a bad practice?

  5. Baz says

    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.

  6. Baz says

    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.

  7. Dave says

    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

  8. Euvid says

    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?

  9. Dale King says

    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.

  10. gilles Madi says

    very good, but i get a null pointer exception when i try this.title.setText(“whatever”) don’t understand

  11. gilles Madi says

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

  12. Sab says

    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.

  13. Alex says

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

  14. Hugo Silva says

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *