How to Create Custom Window Title in Android

Home » Information Technology » Programming » Android » 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.

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

3. Apply custom style in manifest file as theme.

AndroidManifest.xml

<application android:icon="@drawable/icon" android:label="@string/app_name" android:theme="@style/CustomTheme">

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

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

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

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

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

5. Here is the result

Related post:

• How to Setup Android Application Development on Eclipse (45)
• How to Show “What’s New” Dialog in Android App (0)
• How to Import Contacts from Blackberry into Android (0)
• Coding Tips: How to Use Custom Transition Animation in Android (2)
• Coding Tips: How to Use Custom Font in Android (1)