Android – AppCompat Actionbar styling

actionbarsherlockandroidandroid-actionbarandroid-appcompat

I'm currently trying to use AppCompat instead of ActionbarSherlock. On Android 4+ devices I don't run into any problems, as the normal Actionbar and Holo theme are used.

ICS Actionbar

On lower Android versions however, this weird look happens when using Theme.AppCompat.Light.

Standard AppCompat Actionbar

The Actionbar is white and has a blue line underneath.

I was able to fix that by using the Android Action Bar Style Generator from Android Asset Studio to generate a custom theme with a solid Actionbar instead of the transparent one.

AppCompat with custom drawables from Style Generator

When comparing it to the Actionbar I got when using ActionbarSherlock, it's still kind of ugly though.

ActionbarSherlock

The AppCompat Actionbar has this very sharp, black line between itself and the content of the activity, while the stock Actionbar of ICS or the one of ActionbarSherlock have a softer transition from the Actionbar to the layout.

How can I style the Actionbar to really look like the one on Android 4+?

Best Answer

You have to create your own style with the image you want to put on background. In your style.xml, you should create something similar to this:

values/styles.xml

    <style name="Theme.MyAppTheme" parent="@style/Theme.AppCompat.Light">
        <item name="actionBarStyle">@style/ActionBarTabStyle.MyAppTheme</item>
    </style>

    <style name="ActionBar.Solid.MyAppTheme" parent="@style/Widget.AppCompat.Light.ActionBar.Solid">
        <item name="background">@drawable/your_background_image</item>
    </style>

values-v14/styles.xml

    <style name="Theme.MyAppTheme" parent="@style/Theme.AppCompat.Light">
        <item name="android:actionBarStyle">@style/ActionBarTabStyle.MyAppTheme</item>
    </style>

    <style name="ActionBar.Solid.MyAppTheme" parent="@style/Widget.AppCompat.Light.ActionBar.Solid">
        <item name="android:background">@drawable/your_background_image</item>
    </style>

and you can use this 9-patch image :

9-patch image

Related Topic