How to style android spinner boxes?

Question

Apologies if this has already been answered, but I've been looking through answers/trying things for a couple of hours and I can't find anything.

I find the android spinner boxes too big:

For my taste, there is far too much grey space around the '80' and the '90' above. I'd like to make them less high and less wide.

However, I don't just want to set a pixel height/width, because of the lack of assurance that they'll look right on all devices.

They are set to wrap_content now. Is there any way to get it to wrap the content, but more tightly? There seems to be a fair amount of padding in there...

Many thanks!

EDIT: I've made a little progress, I've figured out how to attach a style to a view, so now I am trying:

 <Spinner
    style="@style/spinner_style"
    etc

and

<style name="spinner_style">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:paddingLeft">0dp</item>
    <item name="android:paddingRight">0dp</item>
    <item name="android:paddingTop">0dp</item>
    <item name="android:paddingBottom">0dp</item>
    <item name="android:layout_marginLeft">0dp</item>
    <item name="android:layout_marginRight">0dp</item>
    <item name="android:layout_marginTop">0dp</item>
    <item name="android:layout_marginBottom">0dp</item>
</style>

However, this seems to have hardly any effect:

vs

before. How can I get the boxes really close to the text?

EDIT: Bit more progress. This image seems to be the entire grey box plus drop down:

android:background="@android:drawable/btn_dropdown"

If I can find some way to make that smaller? Again, I have the challenge that I want it to wrap the text properly, so that I can be sure it will display well on all devices.

EDIT: I think I'm going to use my own layout for the spinner, but in a way that wraps the text reliably - probably using a linear layout and setting the background color on that. I'll post back when I have the full code.

score 1 · Answer 1 · answered Nov 16 '20 at 18:53

As you didn't share the a bit of your spinner, I will suggest some options that may help you:

if you are using android.R.layout.simple_spinner_dropdown_item as your spinner item layout (when it's closed)

ArrayAdapter<Integer> adapter = new ArrayAdapter<>(this, 
                                   android.R.layout.simple_spinner_dropdown_item, myList);

Then change it to android.R.layout.simple_spinner_item, the later one has little padding than the first.

If that still adds some padding, you can add android:theme="@android:style/Theme.Holo.Light.NoActionBar" attribute to your spinner xml, although this will change the spinner arrow

Another option is to create a custom spinner item, similarly replace the system layout with your item when creating the adapter.

here's the item layout (just a new a layout with a TextView with wrap_content width/height)

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

</TextView>

thank you. All the other citations suggested adding a custom handler and custom layout, when all we needed was the layout intended for narrow spinners! — Phlip, Feb 17 '22 at 23:51

score 0 · Answer 2 · answered Nov 16 '20 at 19:47

OK this is what I have arrived at and it gives me this effect:

compared to what I get with the default Spinner which is:

I much prefer my version, but of course these things are subjective.

What I've done is to set my own layout and textview within the adapter (seems you can set both), so that my adapter-setting code looks like this:

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
        R.layout.my_spinner_layout, R.id.dropdowntext, list);
adapter.setDropDownViewResource(R.layout.my_spinner_dropdown_layout);
spinner.setAdapter(adapter);

I was also obliged to create my own custom layout for the dropdown - R.layout.my_spinner_dropdown_layout above - because the spinner reuses the textview used for the unopened box when it draws the dropdown list, so the same textview needs to be available in both layouts.

I created two new xml layout files called my_spinner_layout.xml and my_spinner_dropdown_layout.xml

They look like this respectively:

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/linearLayoutDisplayName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:background="#DDDDDD"
        android:gravity="center"
        android:orientation="horizontal">

        <TextView xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/dropdowntext"
            style="@style/spinner_style"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:singleLine="true" />

        <ImageView
            android:id="@+id/dropdownicon"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_alignParentTop="true"
            android:contentDescription="TODO"
            android:src="@drawable/dropdown" />

    </LinearLayout>

and

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/dropdowntext"
    style="@style/spinner_style"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:singleLine="true" />

Basically, I have replaced the default, which is TextView and a huge grey background image including a dropdown arrow, with a horizontal linear layout containing a TextView and a dropdown IMAGE, with a grey background.

Now the grey wraps to the content very nicely (I've added padding of 5dp).

Hope this helps someone, or if there's something wrong with it, perhaps someone will correct me.

Fire Gamer · Answer 3 · 2020-11-16T18:50:56.870

-1

I have really worked hard to find you the best solution for your problem but it seems to be no way to do so. The only way is to create a custom spinner as described in https://stackoverflow.com/a/37859442/11896005

Also, sorry if I was annoying just wanted to help you!

edited Nov 16 '20 at 18:50

answered Nov 16 '20 at 18:28

Fire Gamer

36
6

1

All very interesting, but not what I asked. How do I reduce the padding around the text in the box? Thanks. – Bruce Nov 16 '20 at 18:32
1

@Bruce Oh, sorry didn't read the question well. Gimme a sec I'll edit my answer – Fire Gamer Nov 16 '20 at 18:35
1

You seem to just be copying and pasting from answers that are vaguely related to my question. This is not helping me or you. Please stop. – Bruce Nov 16 '20 at 18:40
1

@Bruce Aight give me a sec to recheck your question and I will repost my answer in my own style! – Fire Gamer Nov 16 '20 at 18:41
@Bruce Also I am just trying to help, sorry if I cause any trouble – Fire Gamer Nov 16 '20 at 18:42

How to style android spinner boxes?

3 Answers3