ActionBar header Tutorial

Nowadays many Android apps use a solid header or actionbar. These headers are not just nice but are often used to expose the brand of the app or provide quick access to common functionalities of the app, hence the name actionbar. Some examples of Android apps applying these headers are Twitter and Instagram. In this tutorial I will show how you can make these “glossy” coloured header bars. The picture below is what we will make in this tutorial. I used as title “Size Matters”, as I am currently working on an app with this as title (more in a future post).

To make a header as in the example you need a header background gradient and a transparent logo. You can download these via the links below.
Download action bar gradient
Download transparent logo

Create in your Eclipse environment a new Android application project and follow the following initial set-up steps.
- Create a drawable folder in your res folder and copy/past the above downloaded header gradient and logo in this drawable folder.
- Create a actionbar.xml in your layout folder. We will use this XML file to define the actionbar.

Make sure your actionbar.xml looks like the XML file below. There is a style reference to ActionBar, for this style element see lower in this post. The actionbar.xml is very simple we make a reference to a style called ActionBar and we set the imageview of our transparent logo. Depending where and how you want to display this logo you can add additional parameter to the ImageView.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/ActionBar" >

   <ImageView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:clickable="false"
        android:paddingLeft="15dip"
        android:scaleType="center"
        android:src="@drawable/actionbartitle" />

    />
 
</LinearLayout>

Now open your values folder and open your styles.xml. We add here the reference to the blue gradient.

<resources>

    <style name="AppTheme" parent="android:Theme.Light" />
    
       <style name="ActionBar">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">45dp</item>
        <item name="android:orientation">horizontal</item>
        <item name="android:background">@drawable/actionbar</item>
    </style>

</resources>

Before you can test drive this, you need a reference from you Main Layout. We refer to our new layout via the “include” XML tag. The main layout should now look like this.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
      <include
        android:id="@+id/include"
        layout="@layout/actionbar" />

</RelativeLayout>

Finally I think it’s more beautiful when we make the standard Android titlebar disappear. Open your Android Manifest and set your application theme to the following:

android:theme="@android:style/Theme.Light.NoTitleBar"

This is all, in case you want for example a quick link to your settings menu, or a refresh button, you define in your actionbar.xml a button with e.g. a custom image. The behavior of this button can of course be defined in your Java classes. Good luck!