How to add custom title bar to android application

Article from : http://help.discretelogix.com/android/how-to-add-custom-title-bar-to-android-application.htm

There are multiple ways to customize title bar in android application. Today, I am going to show a way in which we’ll completely change the looks of title bar and add extra views to it.

 

Step 1: Create layout file

First of all create an xml file for your title bar layout. 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"    
    android:layout_height="44dp"    
   	android:orientation="horizontal"    
    android:gravity="center_vertical"
    android:background="#FFFFFF"    
    >
   	<ImageView
		android:id="@+id/dxLogo"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_gravity="left"		        
		android:src="@drawable/dx_icon"
		android:layout_marginRight="10dip"
		 />
   	    	    
  	    <TextView	           
		android:id="@+id/titleHeading"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/app_name"
		style="@style/titleBarHeading"
		 />	

</LinearLayout>

In this layout, I have included an image that is used to display a logo and then a text view to display activity heading.

 

Step 2: Create application theme file

In order to set a custom title bar properly, you have to create a new theme for your application.  If you don’t specify padding and background color, your custom title bar won’t fill screen width.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="appTheme" parent="@android:style/Theme.Black">
        <item name="android:textColor">#444444</item>        
        <item name="android:windowTitleBackgroundStyle">@style/titleBarBackground</item>
        <item name="android:windowTitleSize">44dip</item>            
    </style>
    
    <style name="titleBarHeading" parent="@android:style/TextAppearance">
        <item name="android:textSize">17sp</item>    
        <item name="android:textStyle">bold</item>  
        <item name="android:textColor">#444444</item>    
    </style>
    
    <style name="titleBarBackground">
        <item name="android:background">@android:color/transparent</item>
        <item name="android:padding">0px</item>
    </style>
    
</resources>

 In this theme file, I have defined styles for title bar itself as well as the text view that we defined in title bar layout file. Adding style to change padding of title bar is necessary otherwise s small border will be visible.

After that, change you manifest file to specify application theme.

 

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

 

Step 3: Create a custom activity class

Create a custom activity class which will act as parent to all your activities. OnCreate of your parent activity, set the layout of title bar to the one you have just created.

public class CashBookActivity extends Activity {
	
  	@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);	       
	}
}

The code above assume that the XML file containing your title layout is window_title.xml. Now extend all your activities from this parent class.

public class FormActivity extends CashBookActivity 
{
	@Override
	public void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState); 
		setContentView(R.layout.form);
		TextView tvHeading = (TextView) findViewById(R.id.titleHeading);
		tvHeading.setText("Add New Transaction");
	}
}

Save and run your application, you should see your custom title bar.

 

Note: Do not extend your application’s custom theme from the default android themes having "NoTitleBar"