Android Spinner - How to position dropdown arrow as close to text as possible when options have different length?

Question

The options in my spinner has different length and currently the dropdown arrow is positioned far to the right based on the longest option, as shown in the screenshot below.

Is it possible to move the dropdown arrow so that it is dynamically positioned based on currently selected option?

Especially when the first option is just 'All', it looks weird when the dropdown arrow is so far away to the right.

Referring to Google Translate App where dropdown arrow is always positioned next to its text:

Hinge

it seems there text is right aligned always – Gebhart

Good catch, but seems like it is center aligned instead of right aligned, and the arrow indeed moved – Hinge

Answer 1

You cannot control the position of the original dropdown icon, the only way is to disable the default icon and add your own one into the dropdown.

First, disable the default dropdown icon by setting the background of the Spinner to @null:

<Spinner
     android:id="@+id/spinner_main"
     android:spinnerMode="dropdown"
     android:background="@null"
     android:layout_width="wrap_content"
     android:layout_height="match_parent"/>

Then create a layout resource spinner_item_main.xml with only one TextView which we can set a drawable on its right side (you can download the arrow picture from here):

<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="20sp"
    android:textStyle="bold"
    android:gravity="left"
    android:textColor="@color/colorWhite"
    android:drawableRight="@drawable/ic_arrow_drop_down_white_24dp"
    />

Finally Set this layout resource when you initialize the Spinner, You can also provide a resource as the dropdown view (as what I have done):

(I use kotlin)

spinner_main.adapter = ArrayAdapter<String>(this,
            R.layout.spinner_item_main, objects).apply {
        setDropDownViewResource(R.layout.spinner_dropdown_view_main)
    }

Make it! View this in My APP

Bonanza

There's lots of icons so to help find it, the arrow is under the Navigation section and called arrow_drop_down. Hope that saves you a few seconds :) – Ledeen

For some reason, the text on the TextView has very small width and it doesn't show all of the letters. I used your code as it is. Any ideas what is wrong? – Dollarfish

Answer 2

Translating @尹小雨 answer to java

    ArrayAdapter adapter = new ArrayAdapter<Category>(this,R.layout.spinner_item_main,objects); // creates new ArrayAdapter with custom textviews for all elements including the first one (which is what we want)
    adapter.setDropDownViewResource(R.layout.spinner_dropdown_view_main); // Modifies all the elements when you click on the dropdown
    spinner.setAdapter(adapter); // sets the adapter to the spinner

Rebeckarebeka