Flip arrow on android spinner in toolbar

Question

I have a spinner in a toolbar at the bottom of the screen, but the arrow next to the spinner points down, which is counterintuitive. Is there any quick way to flip the arrow to point upwards instead?

If it helps, the spinner is defined as follows:

<Spinner
    android:id="@+id/spinner_floors"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

And the row layout is just android.R.layout.simple_spinner_dropdown_item.

On another note, is there any way to change the font color to white without affecting the font color when the spinner is expanded?

Update

I managed to switch the color of the text using this answer. I also switched the background for this image so that now the code is

<Spinner android:id="@+id/spinner_floors"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/ic_arrow_drop_up_white_24dp" />

Now it looks like this:

How do I move the button to the right?

Note: I'm using Android Marshmallow, API level 23

Woodhead

Answer 1

The default background of a spinner is a 9-patch drawable, so it can scale accordingly. If you want to invert the arrow you have to copy the drawable and invert it manually.

Here I took the background of the spinner found on Lollipop¹ and flipped it vertically:

You can copy that and save it into the drawable-xxxhdpi folder as a 9-patch, i.e. with the extension .9.png (not just .png).

¹ [android-sdk]/platforms/android-22/data/res/drawable-xxxhdpi/spinner_mtrl_am_alpha.9.png

---

Since Marshmallow, the default background is an XML drawable (selector and vector drawable). If you only want to support Android 6.0 and newer you can copy that from the Ansroid SDK and modify it such that it is vertically flipped.

You can find the drawable in the [android-sdk]/platforms/android-23/data/res/drawable/ directory. It's named spinner_background_material.xml and depends on control_background_40dp_material.xml and ic_spinner_caret.xml.

Dyslogia

Answer 2

Try this

<Spinner
    android:id="@+id/spinner_floors"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:background="@android:drawable/btn_dropdown" <!-- You can use your own drawable -->
     />

Halloween

I switched out the background for this image but the arrow isn't in the right place, it looks like this – Woodhead

Answer 3

Use this with your own icon for example: https://design.google.com/icons/#ic_arrow_drop_up

toolbar_spinner.xml:

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

    <Spinner
        android:id="@+id/toolbar_spinner"
        style="@style/Widget.MyApp.HeaderBar.Spinner"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"/>

</LinearLayout>

toolbar_spinner_item_actionbar.xml:

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

    <TextView
        android:id="@android:id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableEnd="@drawable/ic_arrow_drop_up_black_24dp"
        android:drawablePadding="8dp"
        android:fontFamily="sans-serif"
        android:paddingEnd="4dp"
        android:paddingStart="16dp"
        android:textColor="#ffffffff"
        android:textSize="18sp"
        android:textStyle="bold" />

</LinearLayout>

toolbar_spinner_item_dropdown.xml:

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

    <TextView
        android:id="@android:id/text1"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:drawablePadding="8dp"
        android:gravity="center_vertical|start"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:textColor="#ff333333"
        android:textSize="16sp"/>

</LinearLayout>

And add this to your Styles:

<style name="Widget.MyApp.HeaderBar.Spinner" parent="Widget.AppCompat.Light.Spinner.DropDown.ActionBar">
        <item name="android:background">?android:selectableItemBackground</item>
        <item name="android:dropDownSelector">?android:selectableItemBackground</item>
        <item name="android:divider">@null</item>
        <item name="android:overlapAnchor">true</item>
</style>

Then add it in the OnCreate:

Toolbar toolbar = getActionBarToolbar();

View spinnerContainer = LayoutInflater.from(this).inflate(R.layout.toolbar_spinner,
        toolbar, false);
ActionBar.LayoutParams lp = new ActionBar.LayoutParams(
        ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
toolbar.addView(spinnerContainer, lp);

YourObjectSpinnerAdapter spinnerAdapter = new YourObjectSpinnerAdapter();
spinnerAdapter.addItems(getMyObjectSpinnerData());

Spinner spinner = (Spinner) spinnerContainer.findViewById(R.id.toolbar_spinner);
spinner.setAdapter(spinnerAdapter);

Taken from: https://dabx.io/2015/01/02/material-design-spinner-toolbar-style-fix/

With some changes and updating.

---

And here is the another method with changing the icon, thanks to Floern for suggest:

You have to create two drawable file named:

1.control_background_40dp_material.xml

2.spinner_background_material.xml

And, the first one content:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@android:color/darker_gray"
    android:radius="20dp" />

Second one:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:paddingEnd="24dp"
    android:paddingLeft="0dp"
    android:paddingMode="stack"
    android:paddingRight="0dp"
    android:paddingStart="0dp">
    <item
        android:width="24dp"
        android:height="24dp"
        android:drawable="@drawable/control_background_40dp_material"
        android:gravity="end|center_vertical" />

    <item
        android:width="24dp"
        android:height="24dp"
        android:drawable="@drawable/ic_arrow_drop_up_black_24dp"
        android:gravity="end|center_vertical" />
</layer-list>

That's it, just use that Spinner like this:

<Spinner
        android:id="@+id/spinner_floors"
        android:background="@drawable/spinner_background_material"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

There you go, have fun.

Perpetual