Spinner down arrow stretching?

.. Styling the inner and outer views of a Spinner individually.


I was working with a Spinner with a lot of rows fetched from a database, and wanted to put a bit of padding around each item to make it easier for the user to select them.

So I went into my res\layout\spinner_view_row.xml (which controls how the Spinner rows display) and added this:

android:padding="5dip"

Then, when I went and re-ran my app, what used to look like this:

.. now looks like this:



.. Ooops. 


Looks like a condom doesn't it. Not what I was trying to achieve, really. If I made the padding large enough, it will also look like that before I've even selected anything.

Not what I wanted at all.

But I do want that padding around each item in my Spinner, otherwise my users will have too much trouble choosing items from my latest super-dooper, take-the-world-by-storm, #1 in the world market app, and it might not stay #1 for long at all.

Luckily, the answer is really, really simple.

You might recogise the below as the piece of code that binds a cursor from the database (containing all the items we want to display), to the xml view spinner_view_row, located at  res\layout\spinner_view_row.xml (this is the xml file in which we put the extra padding, above).

  final SimpleCursorAdapter ingredientAdapter =
  new SimpleCursorAdapter(this, android.R.layout.simple_spinner_item, ingredientsCursor, from, to); 
  ingredientAdapter.setDropDownViewResource(R.layout.spinner_view_row);

  spnIngredients.setAdapter(ingredientAdapter);

All we need to do to avoid the stretchy condom spinner arrow is to define another xml view in res\layout\ and call it something like spinner_view_closed, then paste into it the same code that you have in spinner_view_row.
Simply then customise this xml to have less padding, or a smaller text size for instance, then replace the reference to

simple_spinner_item

with a reference to this new xml file, like this:

  final SimpleCursorAdapter ingredientAdapter =
  new SimpleCursorAdapter(this, R.layout.spinner_view_row_closed, ingredientsCursor, from, to); 
  ingredientAdapter.setDropDownViewResource(R.layout.spinner_view_row);

  spnIngredients.setAdapter(ingredientAdapter);

.. and your new Spinner will look like this when open:

.. and this when closed.

Easy eh?
.. Told you so.