Logo Icon Logo
A Crowd-sourced Cookbook on Writing Great Android® Apps
GitHub logo Twitter logo OReilly Book Cover Art

Creating a Custom Title Bar

Author: Shraddha Shravagi -- Published? true -- FormatLanguage: W

Problem:

You cannot have any buttons or any custom text in the standard title bar.

Solution:

Here's how to implement your own TitleBar:

  1. Create an XML file for title bar
  2. Create a class that uses the title bar and implements the button functionality
  3. Change your layout files
  4. Extend your activities from the custom class that you created in step 2

Discussion:

Contents


1. Create an XML file for title bar

Here is an maintitlebar.xml file which has one textview and 3 image buttons. It has orientation = horizontal.

       <RelativeLayout xmlns:android=
          "http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent" android:layout_height="40dp"
	android:orientation="horizontal" android:paddingLeft="5dp"
	>

	<TextView android:id="@+id/title" android:layout_width="wrap_content"
		android:layout_height="wrap_content" 
		android:text="Symphony's GHealth Demo"
		 />
        <View android:id="@+id/View01" android:layout_width="1dp"    
 		android:layout_height="500dip" 
 		android:background="#2B497B"  android:layout_toLeftOf="@+id/facebookBtn">
 	</View>	
  <!-- Facebook button -->
	<ImageView android:src="@drawable/icon_facebook"
		android:layout_toLeftOf="@+id/twitterBtn" android:layout_width="28dp"
		android:layout_height="28dp" android:id="@id/facebookBtn"
		android:clickable="true" />
	<!-- Twitter button -->
	<ImageView android:src="@drawable/icon_twitter"
		android:clickable="true" 
		android:layout_width="28dp" android:layout_height="28dp" android:id="@id/twitterBtn"
		android:layout_marginLeft="3dp" android:layout_marginRight="3dp"
		android:layout_toLeftOf="@+id/linkedinBtn" />
	<!-- Linkedin button -->
	<ImageView android:src="@drawable/icon_linkedin"
		 android:layout_width="28dp"
		android:layout_height="28dp" android:clickable="true"
		android:layout_alignParentRight="true" 
		android:id="@id/linkedinBtn" />
</RelativeLayout>

2. Create a class that uses the title bar and implements the button functionality

Here is the class which is the most important one.

  1. First we will have to request the custom title bar
  2. Set your layout file
  3. Set the title bar
     public class CustomWindow extends Activity {
	protected TextView title;
	protected ImageView icon; 
	protected void onCreate(Bundle savedInstanceState) { 
		super.onCreate(savedInstanceState);       
	//Request for custom title bar
	this.requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);   
        //set to your layout file
		setContentView(R.layout.main);        
        //Set the titlebar layout
		this.getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.maintitlebar);    
	public void facebookBtnClicked(View v)
	{
            //Implement the button click event 
	}
	public void twitterBtnClicked(View v)
	{
           //Implement the button click event 
        }
	public void linkedinBtnClicked(View v)
	{
           //Implement the button click event 
        }
     }

3. Change your layout files

For every layout file where you want to implement the custom title bar use match_parent in layout_height and layout_width, e.g.:

       <LinearLayout android:id="@+id/LinearLayout01"
	android:layout_width="match_parent" android:layout_height="match_parent"
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" android:background="#E5E5E5">

4. Extend your activities from the custom class that you created in step 2

//CustomWindow will take care of loading the title bar
public class Credentials extends CustomWindow 
{
//set the layout file
setContentView(R.layout.login);
}

And here's how your activity should look:

Although there is no obligation to use a separate class for the titlebar implementation but it is good coding practice.

Thus you have your own custom title bar shown in your activity is few easy steps

No records found.