• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • About
  • Projects
    • GStaticMap WP Plugin
  • Contact
  • Privacy Policy

Lorenz Blog

All About Web & Mobile Application Development

  • Featured Articles
  • Gadgets
    • Android
    • Blackberry
  • Programming
    • Android
    • PHP
    • Java Script
    • MySQL
    • Postgresql
    • Flex
    • Web
  • Software
    • Mac OS
    • Windows
    • Linux
  • Web
You are Here » Home >> Information Technology >> Programming >> Android >> How to Create Custom Window Title in Android

How to Create Custom Window Title in Android

July 30, 2010 by Lorensius Londa 66 Comments

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

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

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

Download full source code
Facebooktwitterredditpinterestlinkedinmailby feather

Related posts:

  1. Android Tips: How to Place Image or Logo at The Center of Actionbar
  2. Android Coding Tips: How to Create Options Menu on Child Activity inside an ActivityGroup
  3. Coding Tips: How to Use Custom Font in Android
  4. Coding Tips: How to Use Custom Transition Animation in Android

Filed Under: Android, Information Technology, Programming Tagged With: Android, android programming, custom window, custom window title, window title

About Lorensius Londa

Passionate web and mobile application developer. Co-founder of TRUSTUDIO, loves programming, Android, aviation, travelling, photography, coffee and gym mania.

Reader Interactions

Comments

  1. NetApex says

    August 12, 2010 at 9:54 pm

    Great tutorial, everyone should consider implementing something of this variety.

    Reply
  2. robm says

    August 31, 2010 at 7:10 am

    Great post – helped me out …

    Reply
  3. robm says

    August 31, 2010 at 7:11 am

    Thanks for the post – helped me out a lot….

    Reply
  4. Jakub Marciniak says

    October 13, 2010 at 3:06 am

    Great article, really helped me out. Thanks

    Reply
  5. androidstep says

    November 2, 2010 at 3:48 pm

    Thank you very much. It is helpful.

    Reply
  6. iamkey says

    November 16, 2010 at 4:02 pm

    Thanks a lot!

    Reply
  7. anticafe says

    December 26, 2010 at 1:38 pm

    Very nice.
    Can you tell me how to add a listener to the title bar icon (News or Info icon as above)?

    Reply
  8. Kyle says

    January 2, 2011 at 2:52 am

    Exactly what I wanted! Thank you!

    Reply
  9. Nomus says

    January 7, 2011 at 1:10 pm

    Great article. But can you tell me which Android version it is workable.

    Reply
  10. inf says

    January 11, 2011 at 2:42 am

    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.

    Reply
  11. jacob says

    January 19, 2011 at 7:26 am

    Great tutorial! I found it truely helpful. Keep the good work going!

    Reply
  12. Paul says

    January 20, 2011 at 11:12 am

    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

    Reply
  13. Scott Daniel says

    February 23, 2011 at 4:58 am

    Awesome post. Very helpful. Worked great, but having trouble getting it to work on Preference screens. Any luck with those?

    Reply
  14. Thomas Devaux says

    February 27, 2011 at 4:09 am

    @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

    Reply
    • Thomas Devaux says

      February 27, 2011 at 4:11 am

      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.

      Reply
  15. Bagus Prasojo says

    March 4, 2011 at 9:36 am

    Yes.. finally i find what i want. thx londatiga.net

    Reply
  16. ccsss says

    May 18, 2011 at 11:21 am

    Thanks a lot.

    Reply
  17. Tiru says

    May 26, 2011 at 11:44 am

    Thanks a lot , it is a nice tutorial, it helps me a lot.

    Reply
  18. Kadam Chokshi says

    May 31, 2011 at 4:25 pm

    Wonderful example…
    Thanks…..

    Reply
  19. Fabio Cunha says

    July 3, 2011 at 9:51 pm

    Great tutorial, please continue with the great work.

    Reply
  20. Emerald214 says

    July 6, 2011 at 10:42 pm

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

    Reply
  21. jink2005 says

    July 22, 2011 at 9:08 am

    Thanks for your kindness.

    Reply
  22. richard lin says

    August 15, 2011 at 11:39 am

    thanks lorenz for such a post..
    easy to follow and clearly understandable.

    exactly what i need in my android app project

    Reply
    • lorenz says

      August 15, 2011 at 1:43 pm

      You’re welcome lin

      Reply
  23. Baz says

    August 24, 2011 at 5:03 pm

    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.

    Reply
  24. Baz says

    August 24, 2011 at 5:22 pm

    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.

    Reply
  25. Dave says

    August 27, 2011 at 12:17 pm

    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

    Reply
  26. Kino says

    September 9, 2011 at 5:03 pm

    Great work, it really help my app.

    Reply
  27. SomApp says

    September 13, 2011 at 11:48 pm

    Geat tutorial,just what I was looking for

    Reply
  28. Euvid says

    September 30, 2011 at 2:24 pm

    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?

    Reply
  29. Dale King says

    October 20, 2011 at 1:24 pm

    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.

    Reply
  30. Saranya.P.U says

    November 24, 2011 at 5:17 pm

    Thanks man..great tutorial…. 🙂 helped a lot….

    Reply
  31. Himanshu says

    December 22, 2011 at 12:14 pm

    nice post really very helpfully……

    Reply
  32. MrP says

    December 27, 2011 at 6:27 am

    very useful…
    thanks

    Reply
  33. Lucian Neghina says

    January 25, 2012 at 4:37 pm

    Thanks, it helps me a lot.

    Reply
  34. Paresh Vasoya says

    February 4, 2012 at 5:39 am

    Grate tutorial dear
    thank you for this help
    keep it up.

    Reply
  35. ThanksGiver says

    March 8, 2012 at 3:09 pm

    Your post is very helpful. Thanks 🙂

    Reply
  36. Safrizal says

    March 12, 2012 at 4:15 pm

    Mantappp…. Great…

    Reply
  37. Matt says

    March 13, 2012 at 1:57 am

    Outstanding! This is exactly what I was looking for.

    Thanks for putting it together!

    Reply
  38. Tom Dignan says

    May 18, 2012 at 5:20 am

    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.

    Reply
    • Tom Dignan says

      May 18, 2012 at 5:41 am

      Nevermind, it seems you only need that if you want to use a custom layout as well.

      Reply
  39. gilles Madi says

    May 24, 2012 at 2:37 pm

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

    Reply
  40. gilles Madi says

    May 24, 2012 at 2:51 pm

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

    Reply
  41. Sab says

    July 27, 2012 at 12:18 pm

    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.

    Reply
  42. Alex says

    August 7, 2012 at 5:03 am

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

    Reply
  43. kike says

    October 4, 2012 at 4:21 am

    Anyone knows if there is a way to avoid the original title bar to show up for few seconds at all ???

    Reply
    • alexistkd says

      October 8, 2012 at 9:57 am

      im getting the same issue how can we fix it 🙁
      thanks.

      Reply
  44. anish says

    October 21, 2012 at 1:38 am

    nice one !

    Reply
  45. kinghomer says

    October 30, 2012 at 5:49 pm

    Why do i obtain this error ?

    “You cannot combine costum titles with other title features”

    Reply
  46. Hugo Silva says

    November 7, 2012 at 9:54 pm

    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.

    Reply
  47. Abhay says

    May 7, 2013 at 9:19 pm

    hello thanks for the tut…
    y does it change me android text color for whole app??

    Reply
  48. Bars says

    July 12, 2013 at 6:29 pm

    I can’t do this

    Reply
  49. Suma says

    August 30, 2013 at 11:43 am

    Do action button(Settings) also be there if the above code is used?

    Reply
  50. fer says

    September 12, 2013 at 2:10 am

    Where is ¨Think android¨???????????????????????????????

    Reply
  51. FanPhobia says

    October 8, 2013 at 6:06 am

    Thanks bro! it help alot in creating my website mobile application.

    Reply
  52. vikas says

    June 30, 2014 at 3:16 pm

    Thanks buddy.. Its helped..

    Reply
  53. bengi says

    August 11, 2014 at 2:30 am

    very nice … thank you..^-^

    Reply
  54. Ashish Kumar says

    November 21, 2014 at 12:25 pm

    Hi,
    I am getting error –
    Error 30 No resource found that matches the given name (at ‘theme’ with value ‘@style/CustomTheme’)

    Reply

Leave a Reply Cancel reply

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

Primary Sidebar

About Me

A husband, father of two, passionate software developer, diy lover and home baker who loves to learn new things. Read More…

  • Facebook
  • GitHub
  • Google+
  • Instagram
  • Twitter
  • YouTube

Featured Articles

How to Setup MQTT Server Using Mosquitto and Libwebsocket on Freebsd

Blue Bamboo P25 Printer Android Demo Application With Source Code

Simple JSON RPC Client for Android

How to Send Message to Google Cloud Messaging (GCM) Server Using JSON and PHP

Footer

Recent Comments

  • Aditya Dabas on About
  • Ayten Göksenin Barutçu on How to Make Android Map Scrollable Inside a ScrollView Layout
  • mang jojot on About
  • Hussain on How to Programmatically Scan or Discover Android Bluetooth Devices

Recent Posts

  • How to Fix Blank Screen on WordPress Add/Edit Post Page
  • How to Programmatically Restart the ESP32 Board
  • How to Get Hardware Info of ESP32
  • How to Setup MQTT Server Using Mosquitto and Libwebsocket on Freebsd

Latest Tweets

To protect our users from spam and other malicious activity, this account is temporarily locked. Please log in to https://twitter.com to unlock your account.

Copyright © 2023 · Magazine Pro on Genesis Framework · WordPress · Log in