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

Advertisements