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 Sherlock actionbar – Change actionbar color

Just few step to change the style of Sherlock actionbar. Here it goes like this

1)make your application theme something like shown below

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

    <style name="MyCustomTheme" parent="Theme.Sherlock">
     <-- This one is for below android 3.x device-->
     <item name="actionBarStyle">@style/ActionBar</item>
     <-- This one is for android 3.x or greater device-->
     <item name="android:actionBarStyle">@style/ActionBar</item>
     <style>

</resources>

2) Define style for action bar

 <!-- style for actionbar(Equivalent to titlebar) -->
    <style name="ActionBar" parent="Widget.Sherlock.ActionBar">
        <item name="background">@drawable/actionbar_bg_top</item> -----------(1)
        <item name="android:background">@drawable/actionbar_bg_top</item>
       
        <item name="android:titleTextStyle">@style/customTextAppearance.Sherlock.Widget.ActionBar.Title</item> ----(2)
        <item name="titleTextStyle">@style/customTextAppearance.Sherlock.Widget.ActionBar.Title</item>
    </style>
<!-- define text style of Action bar Title -->
 <style name="customTextAppearance.Sherlock.Widget.ActionBar.Title" parent="TextAppearance.Sherlock.Widget.ActionBar.Title">
        <item name="android:textSize">14dp</item>
        <item name="android:textColor">#083647</item>
        <item name="android:shadowColor">#4ccfff</item>
        <item name="android:shadowDy">3</item>
    </style>

equation 1–> define the background color of action bar. @drawable/actionbar_bg_top may be in the form of nine patch image or color
equation 2 –>define the style of Text that appear as title in Sherlock actionbar

3)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 color of actionbar in Sherlock action bar
here is the affect
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 🙂