AppCompat Actionbar styling

Question

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.

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

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.

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

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+?

Answer 1

You have to override the theme of the action bar

Answer 2

To show custom icon & color in AppCompatActivity we can paste this code:

values/styles.xml

<resources>

 <style name="Theme.MyAppTheme" parent="@style/Theme.AppCompat">
    <item name="actionBarStyle">@style/ActionBar.Solid.MyAppTheme</item>
    <item name="icon">@drawable/ic_launcher</item>
</style>

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

values-v14/styles.xml

<resources>

<style name="Theme.MyAppTheme" parent="@style/Theme.AppCompat.Light">
    <item name="android:actionBarStyle">@style/ActionBar.Solid.MyAppTheme</item>
       <item name="icon">@drawable/ic_launcher</item>
</style>

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

You can use your custom background picture as well from @drawable/your_pic.png

To show app icon & Text you also paste this to your activity.

        // set action Bar icon & Text
    ActionBar mActionBar = getSupportActionBar();
    mActionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_TITLE
            | ActionBar.DISPLAY_SHOW_CUSTOM | ActionBar.DISPLAY_SHOW_HOME);

Answer 3

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 :

Answer 4

I use this code:

<resources>

<style name="AppTheme" parent="Theme.AppCompat.Light">
    <item name="actionBarStyle">@style/ActionBarTheme</item>
</style>

<style name="ActionBarTheme" parent="@style/Widget.AppCompat.Light.ActionBar.Solid">
    <item name="background">@color/red_action_bar</item>
</style>

</resources>

I hope this code is of great help.