Home > android, ui > Compact spinner widgets

Compact spinner widgets

My application uses a couple of spinner widgets. With limited screen space, they just seemed too large. I tried various ways to make them smaller, like setting padding and layout margins to small values, including zero, but that didn’t help. The empty space around the spinner stayed there no matter what, I was just unable to make it go away.

Then I had the idea to try and change the background. This turned out to be what was needed – it’s the background that defines a spinner’s size, and what looked like margins was just empty pixels in the background image.

So here are my background .png files:

Use them like this:

  • Create an xml file describing normal and pressed states for the background
  • <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
         <item android:state_pressed="true"
               android:drawable="@drawable/slim_spinner_pressed" />
         <item android:drawable="@drawable/slim_spinner_normal" />
     </selector>
    
  • Use the created background descriptor when declaring spinner in your layout
  • <Spinner ..... android:background="@drawable/selector_slim_spinner" ..... />
    

    This is a screenshot showing my “slim” spinners side-by-side with the regular ones (HTC Hero):

    My slim spinners vs. stock ones

    BTW: Digging through Android 1.5 sources, I found a .9.png file that is apparently the stock spinner background. It seems even larger than those shown above. So apparently, HTC had the same idea when tweaking Android for the Hero… they just didn’t go as far.

    Advertisements
    Categories: android, ui
    1. January 17, 2014 at 10:51 pm

      What are the little black lines around the edges and are those necessary for Android to recognize that they are 9 patch images?

      • January 18, 2014 at 12:10 am

        Yes, nine patches. The post should be considered outdated though — Holo themed spinners are much more compact, and even for 2.*, not sure if messing with the device’s theming is a good idea…

        • January 18, 2014 at 12:15 am

          Cool man, thanks for the info and the post! I found this while digging around and it seems pretty awesome for anyone who is interested in Holo theming: http://android-holo-colors.com/

    2. Jatin
      July 26, 2011 at 3:09 am

      Worked for me too. Thanks, dont understand why Android had such bad image for spinner.

    3. Praveen
      March 17, 2011 at 6:49 pm

      Hi thanks for your information… i tried for same thing to reduce height but failed. after so much search i find your link. thanks again for the images for spinner given

      • March 17, 2011 at 10:24 pm

        Ok, wellcome.

        Except now I think it was complete garbage – some phones have differently looking UI widgets, and losing consistency to save a few pixels just isn’t worth it.

        But if it’s working for you – well, good!

    1. No trackbacks yet.

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s