ActionBarSherlock - actionbar custom background with divider

Question

I'm implementing ActionBarsherlock and I want to change the actionbar background.

I override the properties but the blue divider dissapear. How can I use custom background with the blue divider?

<style name="Theme.MyTheme" parent="Theme.Sherlock.ForceOverflow">
    <item name="actionBarStyle">@style/Widget.MyTheme.ActionBar</item>
    <item name="android:actionBarStyle">@style/Widget.MyTheme.ActionBar</item>
</style>

<style name="Widget.MyTheme.ActionBar" parent="Widget.Sherlock.ActionBar">
    <item name="android:background">#ff3e3f3d</item>
    <item name="background">#ff3e3f3d</item>
</style>

Antifebrile

Answer 1

For anyone who (like me) doesn't enjoy playing around with 9-patch images, you can get the divider at the bottom of the action bar using an xml drawable:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Bottom Line -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/action_bar_line_color" />
        </shape>
    </item>

    <!-- Color of your action bar -->
    <item android:bottom="2dip">
        <shape android:shape="rectangle">
            <solid android:color="@color/action_bar_color" />
        </shape>
    </item>
</layer-list>

Save this as drawable/action_bar_background.xml, Then apply it in your theme:

<style name="Widget.MyTheme.ActionBar" parent="Widget.Sherlock.ActionBar">
    <item name="android:background">@drawable/action_bar_background</item>
    <item name="background">@drawable/action_bar_background</item>
</style>

Virgate

Been searching a week for something like this, this is really good! – Retrorocket

How to apply this to Theme.Sherlock.Light? – Lemon

how about the menuItem's divider? – Shutin

I am doing something similar HERE !!! #19624305 – Stealer

You my friend, are awesome. – Brother

Also using layer-list's, this blog shows how an even more extravagant ActionBar tutorial: krishnalalstha.wordpress.com/2013/09/24/… – Antilogism

Answer 2

http://jgilfelt.github.io/android-actionbarstylegenerator/

This project can be used to generate ActionBar style you need.

Ideation

Thanks so much for this it's is EXACTLY what I've been looking for, makes theming a hell of a lot easier! – Jermayne

Is there any tutorial of how to use?? I have no idea where to copy these images and set them. – Scream

Answer 3

The blue divider is the background by default. It's a 9-patch drawable which will ensure the line always appears at the bottom of the action bar regardless of its height.

For your situation I would copy the default background .pngs from Android and then modify them so that the expandable section of the 9-patch is your target background color. This will fill the action bar with your desired color while maintaining the blue border at the bottom.

Newlin

Thanks, I'm going to copy the default background and modify them. – Antifebrile

Answer 4

Just an update on the answer provided by DanielGrech. It's also possible to use your own custom graphic at the bottom of the actionbar. Like this:

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Bottom Line with custom graphic instead of a solid color-->
    <item android:drawable="@drawable/bar">
          <shape android:shape="rectangle"/>
    </item>

    <!-- Color of your action bar -->
    <item android:bottom="2dip">
        <shape android:shape="rectangle">
            <solid android:color="@color/action_bar_color" />
        </shape>
    </item>
</layer-list>

Darksome