Android Custom Title Bar (IOS style)

Because the Android default title bar doesn’t look too great, I thought to make a tutorial with a custom title bar that looks like the one from IOS. I do not recommend to use the design from IOS, but maybe someday you will need to make a title bar which looks like the IOS one :). So, let’s start!

1. Create a new project and name your main activity “MyActivity”
2. Go to res – drawable and create a new xml file and call it “custom_title_background” and put the following code:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient android:angle="270" android:endcolor="#9eacbf" android:startcolor="#bec7d5">
        </gradient></shape>
    </item>
 
    <item android:top="20dp">
        <shape android:shape="rectangle">
            <gradient android:angle="90" android:endcolor="#9eacbf" android:startcolor="#8296af">
        </gradient></shape>
    </item>
</layer-list>

This drawable will be used to set the background from custom_title_bar (from step 3) and to set the windowTitleBackgroundStyle from custom_title_style (from step 4)

3. Go to res-layout and create a new xml and name it “custom_title_bar”. Here you will create a layout with a text view like in the following code:

<?xml version="1.0" encoding="utf-8"?>
 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:background="@drawable/custom_title_background">
 
    <TextView android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:textSize="16sp"
              android:textColor="@android:color/white"
              android:textStyle="bold"
              android:id="@+id/custom_title_text"
              android:layout_centerInParent="true"
              android:shadowColor="@android:color/black"
              android:shadowRadius="3"/>
</RelativeLayout>

4. Go to res – values and create a new xml file and call it custom_title_style. Here you will create a new theme by overriding the existing one. The name of the style “custom_title_theme” from below will be used into the manifest file to “activate” the new theme.

<resources>
    <style name="custom_title_theme" parent="android:Theme">
        <item name="android:windowTitleSize">40dp</item>
        <item name="android:windowTitleBackgroundStyle">@drawable/custom_title_background</item>
    </style>    
 
</resources>

5. Now go to the AndroidManifest.xml file and put the new theme in the application tag.

<application android:label="@string/app_name" android:theme="@style/custom_title_theme">

6. And at this last step, you have to go to the MyActivity class and put the following code:

import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
import android.widget.TextView;

public class MyActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        //this must be called BEFORE setContentView
        requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);

        setContentView(R.layout.main);

        //this must bew called AFTER setContentView
        getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.custom_title_bar);

        //set the title
        TextView textView = (TextView)findViewById(R.id.custom_title_text);
        textView.setText("Custom Title");
    }
}

NOTE: requestWindowFeature(Window.FEATURE_CUSTOM_TITLE); must be put BEFORE the setContentView() and getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.custom_title_bar); must be put AFTER the setContentView().