..
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.
Wow..grate solution, lot of problems sorted out. Thanks!
ReplyDelete