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

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.

Rationale

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 as a starting point – Eraste

Also relevant: #26799101 – Eraste

@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. – Rationale

One other potential option, though this more applies to TextInputLayout than Spinners, worth looking at though: #53199394 – Eraste

I tried, vanilla spinner doesn't have this UI. TextInputLayout is what I'm trying now. – Rationale

Check out this piece of material documentation: material.io/components/menus/android#exposed-dropdown-menus – Decoupage

Answer 1

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/

Hammurabi

The work around to do so makes anyone give up on this. Put an adapter on a TextInputLayout? WTF, Google... – Atrium

@Atrium The adapter is attached to AutoCompleteTextView, not TextInputLayout. – Brause

Currently, you have to use com.google.android.material.textfield.MaterialAutoCompleteTextView instead of com.google.android.material.textview.MaterialAutoCompleteTextView – Bookmaker

can we reduce the outline thickness and change it's color ? – Medicaid

Answer 2

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));
        }

Geometrize

Answer 3

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.

Earthnut

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 – Rationale

Hmm, let me try! – Earthnut

Answer 4

Result:

Fully working code below:

1. 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>

2. Activity/Fragment

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

3. 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>

Barra

Android Studio ERROR for context!! and menu_in_transaction! any suggestion? – Discord

Answer 5

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>

Invulnerable

Answer 6

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>

Playroom

currently don't supporting, thanks for idea. – Vendible

Answer 7

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.

Condensable

Possibble: https://mcmap.net/q/374548/-creating-a-material-spinner-dropdown-in-android-using-mdc – Roark