In Android, how to create an outlined dropdown menu (spinner) as specified by the material design documentation?

Question

Material design documentation mentions about outlined dropdown menu, which looks like this:

How to create this in my Android app? In other words, I want to create a spinner with outline and hint on top.

Sorry, I originally misunderstood the question. If you're inheriting from a Material theme then your spinner should automatically be correct. If you're looking at customising it to look exactly like the above, then I'd recommend using [this question](https://stackoverflow.com/questions/17231683/how-to-create-custom-spinner-like-border-around-the-spinner-with-down-triangle-o) as a starting point — Michael Dodd, Jan 02 '19 at 10:56
Also relevant: https://stackoverflow.com/questions/26798601/correct-usage-of-a-spinner-following-material-design-guidelines — Michael Dodd, Jan 02 '19 at 10:57
@MichaelDodd Thanks. Yes, this could be my last resort. But, if this design is promoted by Google, my hunch is it should be easily available for use. Let me try using the default spinner with AppCompat. I will update you. — mumayank, Jan 02 '19 at 10:59
One other potential option, though this more applies to `TextInputLayout` than Spinners, worth looking at though: https://stackoverflow.com/questions/53198894/material-design-spinner-using-textinputlayout-outlinedbox-styling — Michael Dodd, Jan 02 '19 at 11:08
I tried, vanilla spinner doesn't have this UI. `TextInputLayout` is what I'm trying now. — mumayank, Jan 02 '19 at 11:13
Check out this piece of material documentation: https://material.io/components/menus/android#exposed-dropdown-menus — Manbir Judge, Dec 23 '21 at 07:53

score 35 · Answer 1 · edited Oct 26 '22 at 20:30

35

They've updated material design library:

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/hint_text">

  <com.google.android.material.textview.MaterialAutoCompleteTextView
      android:id="@+id/filled_exposed_dropdown"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"/>

</com.google.android.material.textfield.TextInputLayout>

This is the link: https://m2.material.io/develop/android/components/menu/

edited Oct 26 '22 at 20:30

htafoya

18,261
11
80
104

answered May 15 '19 at 14:44

Jimmy Alvarez

587
1
5
13

8

The work around to do so makes anyone give up on this. Put an adapter on a `TextInputLayout`? WTF, Google... – Giovanne Apr 05 '20 at 16:43
@Giovanne The adapter is attached to AutoCompleteTextView, not TextInputLayout. – Mohammed Junaid May 26 '20 at 12:26
2

Currently, you have to use `com.google.android.material.textfield.MaterialAutoCompleteTextView` instead of `com.google.android.material.textview.MaterialAutoCompleteTextView` – Johana Lopez 1327 Apr 01 '21 at 09:10
can we reduce the outline thickness and change it's color ? – K Pradeep Kumar Reddy Jun 30 '22 at 16:32

score 9 · Answer 2 · answered Mar 03 '19 at 04:31

Well,there is no official libraries released till now. So, You have to custom create it. Mine seems like this attached image. I have done some simple steps.

Step 1 : Add one shape_

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@android:color/transparent"/>
<stroke android:width="1dip" android:color="#424242" />
<corners android:radius="3dip"/>
<padding android:left="0dip" 
android:top="0dip" 
android:right="0dip" 
android:bottom="0dip" />

you can easily change your stroke color from here .

step 2 : Design the spinner _

<RelativeLayout
                android:id="@+id/lyGiftList"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/lyPhysicianList"
                android:layout_marginLeft="@dimen/_5sdp"
                android:layout_marginTop="@dimen/_5sdp"
                android:layout_marginRight="@dimen/_5sdp">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_margin="@dimen/_3sdp"
                        android:layout_weight="8"
                        android:orientation="horizontal"
                        android:background="@drawable/border"
                        tools:ignore="UselessParent">

                        <Spinner
                            android:id="@+id/spnGift"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:overlapAnchor="false"
                            android:spinnerMode="dropdown" />

                </LinearLayout>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/_9sdp"
                    android:layout_marginTop="-5dp"
                    android:background="@color/colorLightGrey"
                    android:paddingLeft="@dimen/_3sdp"
                    android:paddingRight="@dimen/_3sdp"
                    android:text="@string/gift"
                    android:textColor="@color/colorDarkGrey" />
            </RelativeLayout>

And if you want to make your spinner selected text color something else you can do that from code .

 @Override
        public void onItemSelected(AdapterView<?> parent, View view, int position, long id) { 
            ((TextView) view).setTextColor(ContextCompat.getColor(MainActivity.this, R.color.colorAccent));
        }

score 8 · Answer 3 · edited Sep 23 '19 at 09:19

I tried making it with border like below.

Set spinner in activity

<LinearLayout
        android:layout_centerInParent="true"
        android:background="@drawable/border"
        android:layout_width="wrap_content" android:layout_height="wrap_content" tools:ignore="UselessParent">

    <Spinner
            android:id="@+id/spinner1"
            android:layout_width="wrap_content"
            android:backgroundTint="#ff0000"
            android:overlapAnchor="false"
            android:layout_height="wrap_content"
            android:spinnerMode="dropdown"/>

</LinearLayout>

Create border.xml in drawable

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#80ffffff"/>
<stroke android:width="1dip" android:color="#ff0000" />
<corners android:radius="3dip"/>
<padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />

And populate it in any way you want.

val items = arrayOf("NM", "NY", "NC", "ND")
    val adapter = ArrayAdapter(this, android.R.layout.simple_spinner_dropdown_item, items)
    spinner1.adapter = adapter

I don't know how to put title to the spinner though.

Result seems like this.

Little adjustments and I think you can create what you are looking for.

Thank you for the answer. This is a good second solution. But, I'm looking for a more direct way to do this. I would like to depend on Android's official support design libraries. If you could help me with that, that would be awesome — mumayank, Jan 02 '19 at 11:24

mac229 · Answer 4 · 2019-10-22T10:06:49.030

Result:

Fully working code below:

Layout

<com.google.android.material.textfield.TextInputLayout          
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Hello"
    >

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:cursorVisible="false"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:importantForAutofill="no"
        />

</com.google.android.material.textfield.TextInputLayout>

Activity/Fragment

editText.setOnClickListener {
    PopupMenu(context!!, editText).apply {
        menuInflater.inflate(R.menu.menu_in_transaction, menu)
        setOnMenuItemClickListener { item ->
            editText.setText(item.title)
            true
        }
        show()
    }
}

Menu

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

    <item
        android:id="@+id/type1"
        android:title="Type 1"
        />

    <item
        android:id="@+id/type2"
        android:title="Type 2"
        />

</menu>

Android Studio ERROR for `context!!` and `menu_in_transaction`! any suggestion? — C.F.G, Dec 26 '22 at 16:50

score 5 · Answer 5 · answered Sep 12 '19 at 23:29

Add this if not work <androidx.appcompat.widget.AppCompatAutoCompleteTextView

<com.google.android.material.textfield.TextInputLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu">

   <androidx.appcompat.widget.AppCompatAutoCompleteTextView
      android:id="@+id/gender"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:hint="Gender"/>
</com.google.android.material.textfield.TextInputLayout>

score 3 · Answer 6 · answered May 22 '19 at 07:10

To create an outlined box menu spinner the steps you need to follow are:

1.Create a drawable file inside a drawable folder named drawable_spinner_border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#ffffff"/>
    <corners android:radius="5dp"/>
    <stroke android:width="1dp"
            android:color="#797979"/>
</shape>

2.Create layout_custom_spinner.xml under Layout folder you can change the text and id as per your requirement.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/fragment_qc_flSelectWorkDone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <FrameLayout
            android:layout_marginTop="6dp"
            android:background="@drawable/drawable_spinner_border"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

        <Spinner
                android:layout_marginTop="5dp"
                android:id="@+id/fragment_qc_spSelectWorkDone"
                android:layout_width="match_parent"
                android:textSize="12sp"
                android:spinnerMode="dropdown"
                android:layout_height="30dp"/>
    </FrameLayout>

    <TextView
            android:paddingStart="2dp"
            android:paddingEnd="2dp"
            android:layout_marginStart="10dp"
            android:layout_marginBottom="15dp"
            android:textSize="9sp"
            android:text="Select Work Done"
            android:background="#FFFFFF"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
</FrameLayout>

currently don't supporting, thanks for idea. – ATES Jun 19 '20 at 14:28 — ATES, Jun 19 '20 at 14:28

score 0 · Answer 7 · answered Jan 12 '19 at 00:11

0

According to the android's material design github repository, it's planned (which means that they still will start working on it) You can't find a direct way to implement this.

answered Jan 12 '19 at 00:11

Muhammed Sabry

1
2

In Android, how to create an outlined dropdown menu (spinner) as specified by the material design documentation?

7 Answers7

Linked