How to add custom title bar to android application
Return values to Activity from widgets in PopupWindow
April 24, 2012Verify HTTP URL with PHP
November 28, 2012There 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"
5 Comments
This is a very good tutorial.please help me.What are the contents of window_title.xml and form.xml
Rohit,
The first piece of code is saved as window_title.xml. form.xml can contain any thing, it does not concern the functionality. This is you activity layout.
Hope this helps,
Hi I have used this technique. But before running the App I am unable to remove some errors. I have created the style folder in res directory. In which I have created the style file (appTheme). But I am seeing the error on style folder. I have tried clean build that didn’t work.
Here is the screenshot
https://www.dropbox.com/s/8kc91ht2i9dgol5/shot.png
I tried this, but now when I extend my main activity to the CashBookActivity, I get an error message in the main activity’s layout file:
Missing styles. Is the correct theme chosen for this layout?
Use the Theme combo box above the layout to choose a different layout, or fix the theme style references.
Failed to find style ‘textViewStyle’ in current theme
Any idea why…? Otherwise … thanks for the great tutorial! 🙂
You are referencing a style that doesn’t exist:
style="@style/titleBarHeading" ?