How To Create A Material Style Action Bar On KitKat And Older Android Versions

NOTE

This method of achieving a material style action bar was found before Google released the latest support libraries. At the moment, it’s a lot wiser to make use of the support libraries. This method was nothing more than a hack to begin with. For info on how to use the AppCompat library, you can check out this blog post on the android developers blog.

 

When I saw Material Design in the Google I/O keynote, I was very excited. At first, I thought I’d wait for some solid material/reference before trying things. However, after some point I couldn’t resist the urge and started redesigning my app following the new design guidelines. Of course, the first thing to come my way was supporting older Android versions. I thought for some time and figured that I’d be able to have a nice material-like action bar using a custom view in my action bar. I did that and I had a pretty good looking result. One thing that caused me pain was that I had to have around 10 lines of code in each and every Activity in my app. While working on a new app today, I realized that I could achieve the same effect (or an even better one) using much simpler tricks.

Action Bar Height

First up, we have to increase the height. To do this we will add the following line to our app’s theme. Where @dimen/action_bar_height is 56dp.
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarSize">@dimen/action_bar_height</item>
</style>


Action Bar Icon

Secondly, we have to hide the app icon. To do this we will create a custom action bar style and hide the icon there.
<style name="AppTheme_ActionBar" parent="android:Widget.Holo.ActionBar.Solid">
<item name="android:icon">@drawable/actionbar_icon_placeholder_compat</item>
</style>

@drawable/actionbar_icon_placeholder_compat is just a transparent 12dp wide xml drawable.
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<size android:width="12dp" />
<solid android:color="@android:color/transparent" />
</shape>


Action Bar Title

We then have to increase the size of the action bar title. In order to do this, we create a custom action bar title style
<style name="AppTheme_ActionBar_Title" parent="android:TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">@android:color/white</item>
<item name="android:textSize">20sp</item>
</style>


and add it to our action bar style
<style name="AppTheme_ActionBar" parent="android:Widget.Holo.ActionBar.Solid">
<item name="android:icon">@drawable/actionbar_icon_placeholder_compat</item>
<item name="android:titleTextStyle">@style/AppTheme_ActionBar_Title</item>
</style>

Overflow Icon

Another thing we have to do is creating a custom style for our overflow button.
<style name="AppTheme_ActionBar_Overflow" parent="android:Widget.ActionButton.Overflow">
<item name="android:src">@drawable/ic_ab_overflow_compat</item>
</style>


we then add this style to our app’s theme:
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarSize">@dimen/action_bar_height</item>
<item name="android:actionOverflowButtonStyle">@style/AppTheme_ActionBar_Overflow</item>
</style>


Action Bar Background

Setting the action bar background is pretty straightforward. We just have to add the following line to our action bar style:
<style name="AppTheme_ActionBar" parent="android:Widget.Holo.ActionBar.Solid">
<item name="android:icon">@drawable/actionbar_icon_placeholder_compat</item>
<item name="android:titleTextStyle">@style/AppTheme_ActionBar_Title</item>
<item name="android:background">@color/apptheme_primary</item>
</style>

Action Bar Shadow

For the action bar shadow we add the following line to our app’s theme:
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarSize">@dimen/action_bar_height</item>
<item name="android:actionOverflowButtonStyle">@style/AppTheme_ActionBar_Overflow</item>
<item name="android:windowContentOverlay">@drawable/actionbar_shadow</item>
</style>


@drawable/actionbar_shadow is an xml drawable (gradient) with a height of 4dp
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<size android:height="4dp" />
<gradient
android:angle="270"
android:endColor="@android:color/transparent"
android:startColor="@color/gradient_start" />
</shape>


Home As Up Icon (Indicator)

And finally, the home as up indicator (or the back button). This is where things go a little tricky. Well, I guess, still not so tricky. Basically, here we have to have a slightly “different” icon style. They won’t be squares but rectangles. The reason for this is that we need some kind of space on the left side of the button and we insert that empty space inside the png drawable. I hope the following image can get the point across.

One more thing I had to do here was to scale down the arrow a little bit. I think it fits better a little bit smaller. In any case, I’ve added mdpi, hdpi, xhdpi and xxhdpi versions of these icons to the zip package available at the bottom of the page, so you don’t have to worry about these. Just copy them in your project and you should be good to go!

Other than the drawables, we have to add the following line to our app’s theme:
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarSize">@dimen/action_bar_height</item>
<item name="android:actionOverflowButtonStyle">@style/AppTheme_ActionBar_Overflow</item>
<item name="android:windowContentOverlay">@drawable/actionbar_shadow</item>
<item name="android:homeAsUpIndicator">@drawable/ic_ab_up_compat</item>
</style>


Navigation Drawer Icon

The navigation drawer icon works the same way the home as up icon does. Again, you can find the drawables in the package provided below.

Navigation Drawer Shadow

I feel that the shadow which comes with a new app doesn’t really fit the material style in overall. I’m using the following xml drawable (gradient) as my navigation drawer shadow.
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<size android:width="16dp" />
<gradient
android:endColor="@android:color/transparent"
android:startColor="@color/gradient_light_start" />
</shape>

Result:

Download Resources

I’ve put all the styles and drawables into this zip file. You can just download it and copy its contents to your project directory accordingly!
Google Drive

Sample Application

You can find my sample application and its source code on Github.