How to Create Custom Window Title in Android

http://www.londatiga.net/it/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

   ?

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

   <? 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

   ?

   1 2 3 4 5 6 7 8 9 10

   < 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

   ?

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

   ?

   1 2 3 4 5 6 7 8 9 10 11 12 13

   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, callrequestWindowFeature(Window.FEATURE_CUSTOM_TITLE) method beforesetContentView and set custom layout using getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.window_title)after setContentView method.

5. Here is the result

   

Download full source code

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

   ?

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

   <? 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

   ?

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

   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

   ?

   1 2 3 4 5 6 7 8 9 10 11

   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

   ?

   1 2 3 4 5 6 7 8 9 10 11

   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

   ?

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

   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