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:

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