What's brewing in the mobile world?

Easily Create a Default, Custom Styled Spinner [Android]

Create a completely custom Android Spinner (dropdown menu) in three steps…

Step 1: 9-Patch Drawables

Create three visual states (four, if you’d like to include “disabled”) for your Spinner: normal, pressed, and selected; here’s an example:

For more information on creating 9-patch drawables, including how to access the API’s 9-patch tool, check out the official Android docs.

Step 2: XML Drawable

After you’ve created your 9-patch drawables, create an XML drawable to handle the visual states (normal, selected, pressed, disabled) of your spinner. This drawable will reference your 9-patch images already inside your drawable folder:

/res/drawable/btn_dropdown.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_window_focused="false" android:state_enabled="true"
        android:drawable="@drawable/btn_dropdown_normal" />
    <item
        android:state_window_focused="false" android:state_enabled="false"
        android:drawable="@drawable/btn_dropdown_normal" />
    <item
        android:state_pressed="true"
        android:drawable="@drawable/btn_dropdown_pressed" />
    <item
        android:state_focused="true" android:state_enabled="true"
        android:drawable="@drawable/btn_dropdown_selected" />
    <item
        android:state_enabled="true"
        android:drawable="@drawable/btn_dropdown_normal" />
    <item
        android:state_focused="true"
        android:drawable="@drawable/btn_dropdown_selected" />
    <item
        android:drawable="@drawable/btn_dropdown_normal" />
</selector>

Step 3: Custom Theme

Next, create a theme (or edit the one you’re already using) and add the item android:spinnerStyle; this’ll reference another theme, which will define the custom visual states as mentioned in the XML Drawable step. Sounds confusing, but check out how it’s done below:

/res/values/themes.xml

<style name="Your_Theme_Name" parent="@android:Theme.Light">
      ...
      <item name="android:spinnerStyle">@style/Widget.Spinner</item>
      ...
</style>
<style name="Widget.Spinner" parent="android:Widget">
     <item name="android:background">@drawable/btn_dropdown</item>
     <item name="android:clickable">true</item>
</style>

Once you’ve created the themes, make sure you reference them from your applications manifest file.

Reference Your Spinner

All you have to do now is call your Spinner as you normally would somewhere inside a layout XML file:

/res/layout/dropdown_example.xml

...
<Spinner
	android:id="@+id/spinner_id"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:prompt="@string/spinner_prompt"
	android:entries="@array/spinner_entries"
	android:layout_weight="1"
/>
...

Customizing most of Android’s default visual elements is done the same way as above; for Buttons, Seekbars, etc, the steps are generally the same: create 9-patch images, create a custom XML drawable to handle the visual states, create a theme (and edit the master theme), and then call the item as normal.

Hopefully this’ll get you started on fully customizing your Android apps!

2 Comments

Have something to say? Feel free, we want to hear from you! Leave a Comment

  1. power tan says:

    very good. 相当好。

  2. cohoman says:

    Excellent tutorial. Thanks for taking the time to help your fellow Android developers!

Comments are now closed for this article.