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>

score 76 · Answer 1 · answered Jun 13 '12 at 01:04

76

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>

answered Jun 13 '12 at 01:04

DanielGrech

1,377
11
16

This was exactly that I was looking for! – Karen Aug 03 '12 at 18:47
Been searching a week for something like this, this is really good! – Johan S Jan 10 '13 at 11:53
How to apply this to Theme.Sherlock.Light? – tobias Apr 02 '13 at 09:25
how about the menuItem's divider? – Roy Lee Jun 24 '13 at 07:20
I am doing something similar HERE !!! http://stackoverflow.com/questions/19623805/actionbarsherlock-stacked-action-bar-styling-issue – toobsco42 Oct 27 '13 at 21:35
You my friend, are awesome. – Sheharyar Nov 12 '13 at 22:13
Also using layer-list's, this blog shows how an even more extravagant ActionBar tutorial: http://krishnalalstha.wordpress.com/2013/09/24/make-your-action-bar-beautiful/ – Someone Somewhere Apr 17 '14 at 20:36

score 17 · Answer 2 · edited May 15 '13 at 18:53

17

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

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

edited May 15 '13 at 18:53

Bart Kiers

153,868
34
276
272

answered Jun 20 '12 at 12:43

kzotin

5,225
3
27
35

1

Thanks so much for this it's is EXACTLY what I've been looking for, makes theming a hell of a lot easier! – AndroidNoob Jun 27 '12 at 16:14
Thanks alot for sharing. This is exactly what i needed! – Vivendi Aug 06 '12 at 09:38
Is there any tutorial of how to use?? I have no idea where to copy these images and set them. – Archie.bpgc Nov 07 '12 at 13:46

score 7 · Answer 3 · answered Apr 28 '12 at 17:31

7

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.

answered Apr 28 '12 at 17:31

Jake Wharton

72,540
21
218
227

Thanks, I'm going to copy the default background and modify them. – ikarius Apr 29 '12 at 14:37

score 3 · Answer 4 · answered Nov 29 '13 at 13:47

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>

ActionBarSherlock - actionbar custom background with divider

4 Answers4

Linked