Android : Customizing Activity Title Bars

First, how to remove them ? Two easy ways:

requestWindowFeature(Window.FEATURE_NO_TITLE);

We need to do it for each activity or we can edit androidmanifest.xml  :

<application android:icon="@drawable/icon" android:label="My Application" android:theme="@android:style/Theme.NoTitleBar">

No titlebars in the whole application, can also be set in the <activity> to hide specific ones.

Now then,  i like a CUSTOM titlebar!

First create a XML in values,.

values/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="CustomTitleBarTheme" parent="android:Theme">
        <item name="android:windowTitleSize">25dp</item>
        <item name="android:windowTitleBackgroundStyle">@style/titleBarBackgroundStyle</item>
    </style>
    <style name="titleBarBackgroundStyle">
        <item name="android:background">@android:color/transparent</item>
    </style>
</resources>

It's pretty self-explanatory, you can browse the original settings at :

http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/2.1_r2/frameworks/base/core/res/res/values/styles.xml?av=f

and

http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/2.1_r2/frameworks/base/core/res/res/values/themes.xml?av=f

layout/customtitlebar.xml - Layout for our own titlebar!

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout android:id="@+id/myTitleBar"
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_height="fill_parent"
                android:layout_width="fill_parent"
                android:orientation="horizontal"
                android:background="#2183b0"

                >
    <TextView android:id="@+id/title"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:textSize="15sp"
              android:textStyle="bold"
              android:text="Custom Title Bars"
              android:layout_alignParentLeft="true"
              />
    <Button android:id="@+id/titlebarButton"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="Click Me!"
            android:textSize="12sp"
            android:layout_alignParentRight="true"
            android:background="@drawable/gradientshape"

            />
</RelativeLayout>
 

layout/main.xml - Our main view

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/myLayout"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="... Custom titlebars."
    />
    <Button android:id="@+id/mainButton"
            android:layout_height="wrap_content"
            android:layout_width="fill_parent"
            android:text="My Button"/>
</LinearLayout>

drawable/gradientshape.xml - Added a little gradient drawable that i use sometimes.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#2183b0" />
            <stroke
                android:width="1dp"
                android:color="#adc6e8" />
           <corners
                android:radius="4dp" />
            <padding
                android:left="0dp"
                android:top="4dp"
                android:right="4dp"
                android:bottom="0dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#2183b0"
                android:endColor="#7cbfde"
                android:angle="270" 
                android:type="linear"
                />
            <stroke
                android:width="1dp"
                android:color="#2183b0" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="0dp"
                android:top="4dp"
                android:right="0dp"
                android:bottom="4dp" />
        </shape>
    </item>
</selector>

src/MainActivity.java - And the source code...

import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.Button;
import android.widget.LinearLayout;

public class MainActivity extends Activity
{
    private LinearLayout myLayout;
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        // We like a custom titlebar.
        requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
        setContentView(R.layout.main);
        // Lets set the R.layout.customtitlebar to the window.
        getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.customtitlebar);
        // Then like usual, locate the widgets and use 'em!
        Button buttonTitleBar = (Button) findViewById(R.id.titlebarButton);
        myLayout = (LinearLayout) findViewById(R.id.myLayout);
        buttonTitleBar.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Drawable myDrawable = getResources().getDrawable(R.drawable.gradientshape);
                myLayout.setBackgroundDrawable(myDrawable);
            }
        });
    }
}

All good to! Just remember to add the theme to your activity also!

<activity android:name="MainActivity" android:theme="@style/CustomTitleBarTheme"
                  android:label="@string/app_name">

And a screenshot after a click..

Time for some reading, nightie!