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”
