1

I have used ActionBarSherlock in my application for providing ActionBars to pre honeycomb devices. I want to use Light.DarkActionBar Theme in, How can I customize following for parts of the ActionBar (see image)

  1. Background color of ActionBar
  2. Background Image for ActionBar tab bar
  3. The bottom line which represents the selected tab
  4. The divider between tabs...

enter image description here

I have tried using following settings, Though I have achieved some success but the result however doesn't look as expected, 

<item name="android:background">@drawable/bg_title_bar</item>
<item name="background">@drawable/bg_title_bar</item>
<item name="actionModeSplitBackground">@drawable/bg_tab_bar</item>
<item name="android:actionModeSplitBackground">@drawable/bg_tab_bar</item>

Which are the other settings that I should use ? Thanks!!

Amit
  • 13,134
  • 17
  • 77
  • 148
  • 2
    I would recommend that you start with [Jeff Gilfelt's Android Action Bar Style Generator](http://jgilfelt.github.com/android-actionbarstylegenerator), using your development machine's Chrome browser. It lets you customize at least the first three items from your list visually, allowing you to download a ZIP file of resources to blend into your project. – CommonsWare Oct 08 '12 at 12:40
  • Thanks... But I am actually asking about the parameters for these changes i.e. android:background for background of title bar.. Design team will give me all such images... If I give them a list of resources required... Where I can get the list of attributes which are used to modify Action Bar's look and feel with a short description of them... – Amit Oct 08 '12 at 12:50
  • 1
    "Where I can get the list of attributes which are used to modify Action Bar's look and feel with a short description of them" -- Vulcan mind meld with an Android engineer (or Jake Wharton). Beyond that, it's all reverse engineering. That is why I suggested you use Jeff's tool, so you can look at how *he* modifies those values, as he did the reverse engineering for you. – CommonsWare Oct 08 '12 at 12:52
  • @CommonsWare I downloaded a sample zip file from the link you gave. unZipped it and inside values/styles_example.xml... I got what i wanted... Thanks please post it as an answer so that I can accept it.. Thanks.. – Amit Oct 08 '12 at 12:56
  • 2
    Actually, I'd recommend that *you* post an answer with what you wound up using in terms of style attributes and the like. Part of the reason I posted this as a comment is that I could lead you in the direction of the answer, but I wasn't really in position to poke through everything to find the exact values you were seeking. You will eventually be able to accept your own answer (I forget how long of a delay there might be on that). – CommonsWare Oct 08 '12 at 13:09

2 Answers2

5

This is how I did it just in case someone has similar requirements in future..

I downloaded a sample zip file from Style Genarator... Unzipping and a close look on the content suggested that I needed following attributes,

  1. for Background color of ActionBar

    <item name="background">@drawable/title_bg</item>
<item name="android:background">@drawable/title_bg</item>

2. for Background Image for ActionBar tab bar

    <item name="backgroundStacked">@drawable/tab_bg</item>
    <item name="android:backgroundStacked">@drawable/tab_bg</item>

3. for The bottom line which represents the selected tab

               i. I created a style as follows
                    <style name="ActionBar.TabStyle" parent="@style/Widget.Sherlock.Light.ActionBar.TabView">
                    <item name="background">@drawable/ab_tab_indicator</item>
                    <item name="android:background">@drawable/ab_tab_indicator</item>
                </style>
               ii. I used that style in the theme as follows
                 <item name="actionBarTabStyle">@style/ActionBar.TabStyle</item>
                 <item name="android:actionBarTabStyle">@style/ActionBar.TabStyle</item>

4 for The divider between tabs...

in theme I added two lines..

  <item name="actionBarTabBarStyle">@style/My.ActionBar.TabBar</item>
  <item name="android:actionBarTabBarStyle">@style/My.ActionBar.TabBar</item>

than 

<style name="My.ActionBar.TabBar" parent="@android:style/Widget.Holo.ActionBar.TabBar">
    <item name="divider">@drawable/tab_divider</item>
    <item name="android:showDividers">middle</item>
    <item name="android:divider">@drawable/tab_divider</item>
    <item name="android:dividerHeight">24dp</item>
    <item name="android:dividerPadding">8dp</item>
    <!-- <item name="android:background">@drawable/tab_unselected</item> -->
</style>
Amit
  • 13,134
  • 17
  • 77
  • 148
1

Here is a link! use this style generator, customize as you need. Download the file, copy past all the drawables to respective directories, copy style.xml under values directory.. and use the give theme name as your theme either in manifest of respective activity..

Hope this works for you

user98239820
  • 1,411
  • 2
  • 16
  • 30