Android Styling Sherlock actionbar – Change style of Spinner

Here i am going to share small android stuff about styling Spinner in Sherlock ActionBar. Here it goes like this.

1) The following style define the spinner looks not style of drop down. It only style the spinner (what you see spinner)

 <!-- spinner background -->
    <style name="customSpinerStyle" 
        parent="@style/Widget.Sherlock.Spinner.DropDown.ActionBar">
        <item name="android:background">
           @drawable/abs_holo_light_selector</item>
        <item name="android:popupBackground">
           @color/pop_bg</item>
    </style>

where “abs_holo_light_selector” is selector should be place in drawable folder. The selector look like this



<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/spinner_disabled" 
        android:state_enabled="false"/>
    <item android:drawable="@drawable/spinner_pressed" 
        android:state_pressed="true"/>
    <item android:drawable="@drawable/spinner_focused"
         android:state_focused="true"                  
         android:state_pressed="false"/>
    <item android:drawable="@drawable/spinner_default"/>

</selector>


where spinner_disabled,spinner_pressed,spinner_focused and spinner_default are nine-patch image something like shown below and you can make your own so here i am attaching only one nine-patch image spinner_pressed.9

and where @color/pop_bg is color of background of popup(dropdown background)

2)The following style the dropdown item

 <!-- dropdown selector and divider(spinner+popmenu) -->
        <item name="dropDownListViewStyle">
         @style/Custom.Widget.Sherlock.Light.ListView.DropDown</item>
        <item name="android:dropDownListViewStyle">
          @style/Custom.Widget.Sherlock.Light.ListView.DropDown</item>

where style Custom.Widget.Sherlock.Light.ListView.DropDown(style list divider of spinner item and selector of list) is define as

 <style name="Custom.Widget.Sherlock.Light.ListView.DropDown" 
        parent="Sherlock.__Widget.Holo.ListView">
        <item name="android:divider">
            @drawable/abs__list_divider_holo_dark</item>
        <item name="android:listSelector">
           @drawable/abs__list_selector_holo_light</item>
    </style>

3) The following style is used for changing text style of spinner

 <item name="spinnerItemStyle">
          @style/Custom.Widget.Sherlock.TextView.SpinnerItem</item>
 <item name="android:spinnerItemStyle">
          @style/Custom.Widget.Sherlock.TextView.SpinnerItem</item>

where style Custom.Widget.Sherlock.TextView.SpinnerItem is defined as

 <style name="Custom.Widget.Sherlock.TextView.SpinnerItem" parent="Widget.Sherlock.TextView.SpinnerItem">
        <item name="android:textAppearance">
            @style/Custom.TextAppearance.Sherlock.Widget.TextView.SpinnerItem</item>
        <item name="android:paddingLeft">8dp</item>
        <item name="android:paddingRight">8dp</item>
    </style>

    <style name="Custom.TextAppearance.Sherlock.Widget.TextView.SpinnerItem"  parent="TextAppearance.Sherlock.Widget.TextView.SpinnerItem">
        <item name="android:textSize">14dp</item>
        <item name="android:textColor">#FFFFFF</item>
        <item name="android:shadowColor">#4ccfff</item>
        <item name="android:shadowDy">3</item>
        <item name="android:textStyle">normal</item>
    </style> 
       

finally put all these style together in your application theme something like this and use it as application theme

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="customSpinerStyle" 
        parent="@style/Widget.Sherlock.Spinner.DropDown.ActionBar">
        <item name="android:background">
           @drawable/abs_holo_light_selector</item>
        <item name="android:popupBackground">
           @color/pop_bg</item>
    </style>

 <!-- dropdown selector and divider(spinner+popmenu) -->
        <item name="dropDownListViewStyle">
         @style/Custom.Widget.Sherlock.Light.ListView.DropDown</item>
        <item name="android:dropDownListViewStyle">
          @style/Custom.Widget.Sherlock.Light.ListView.DropDown</item>
<item name="spinnerItemStyle">
          @style/Custom.Widget.Sherlock.TextView.SpinnerItem</item>
 <item name="android:spinnerItemStyle">
          @style/Custom.Widget.Sherlock.TextView.SpinnerItem</item>

</resources>

Thats it,How i style Sherlock actionbar spinner item. (some image file are missing above assuming that you can take it own 🙂 )
here The above style affect on highlighted area shown in image below.device-2013-02-15-143813

Styling ActionBarSherlock – change icon of overflow menu button

I Needed to change the overflow menu button according to my application theme. so I spent few hours on how to style these things in Sherlock action bar.
So I am sharing my knowledge as it might be useful to someone in somewhere.

Just few steps

1)make your application theme something like shown below

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="MyCustomTheme" parent="Theme.Sherlock">
    <item name="actionOverflowButtonStyle">@style/customOverflowButtonStyle</item>
        <item name="android:actionOverflowButtonStyle">@style/customOverflowButtonStyle</item>
    </style>
 <!-- overflow button style -->
 <style name="customOverflowButtonStyle" parent="Widget.Sherlock.ActionButton.Overflow">
 <item name="android:src">@drawable/ic_your_menu_moreoverflow_with</item>
    </style>
</resources>

2)Use the theme on application in android manifest file


<application
       
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/MyCustomTheme" >
        <activity
            android:name=".YourMainActivtiy"
           
            android:configChanges="orientation"
            android:label="app" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
</application

That’s all for changing overflow menu icon in Sherlock action bar
Changes looks like
device-2013-02-15-143813
Enjoy android styling 🙂

Styling ActionBarSherlock – change icon of homeupIndicator

Changing home up indicator in action bar Sherlock is very easy. just few lines of code
Here is the step

1)make your application theme something like shown below

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="MyCustomTheme" parent="Theme.Sherlock">
    <item name="homeAsUpIndicator">@drawable/ic_your_new_home_up_indicator</item>
    <item name="android:homeAsUpIndicator">@drawable/ic_your_new_home_up_indicator</item>
    </style>
</resources>

2)Use the theme on application in android manifest file


<application
       
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/MyCustomTheme" >
        <activity
            android:name=".YourMainActivtiy"
           
            android:configChanges="orientation"
            android:label="app" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
</application

That’s all for changing home up icon in Sherlock action bar

hope, Someone will find my post helpful 🙂