Material design Spinner using TextInputLayout.OutlinedBox styling

Question

I am currently using Material Design TextInputLayout OutlinedBox as shown below:

        <android.support.design.widget.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/myEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Title"
                android:inputType="text"/>

        </android.support.design.widget.TextInputLayout>

I am trying to add a dropdown box Spinner under my TextInputEditText, and would like to keep the same styling: OutlinedBox.

I see that dropdowns seem to be supported in Material Design, Material Design Text Fields. As shown on here for the Area:

I am currently using a Spinner to generate the Dropdown.

        <Spinner
            style="@style/Widget.AppCompat.Spinner.DropDown"
            android:id="@+id/option"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:dropDownWidth="match_parent" />

It doesn't seem possible to add a dropdown following the OutlinedBox design. Is there a library out there that would allow me to make this happen, or is there a better way to implement this within Material Design?

Did you find answer to this question? I'm facing the same issue. As mentioned here: https://stackoverflow.com/questions/54004976/in-android-how-to-create-an-outlined-dropdown-menu-spinner-as-specified-by-th — mumayank, Jan 02 '19 at 11:14
Has anyone (google) provided this view yet? Awesome for them to show it in the design docs, yet completely leave an implementation out of the sdk. — lostintranslation, Apr 19 '19 at 15:26

score 36 · Answer 1 · answered Apr 19 '20 at 15:57

I am assuming you want to have an Exposed drop-down menu inside the TextInputLayout I had the same problem, what you can do is use AutoCompleteTextView inside your TextInputLayout as in the following in the XML. here's an example of how I approached the issue.

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:paddingRight="30dp"
            android:paddingEnd="30dp"
            tools:ignore="RtlSymmetry"
            android:layout_margin="5dp">

            <ImageView
                android:layout_width="30dp"
                android:layout_margin="10dp"
                android:layout_height="match_parent"
                app:srcCompat="@drawable/ic_location_city_black_24dp"
                android:layout_gravity="center"
                />




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

            style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Type"
            android:orientation="horizontal"
            >



            <AutoCompleteTextView
                android:id="@+id/filled_exposed_dropdown"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="none"/>

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


        </LinearLayout>

    </LinearLayout>

You will also need an item layout resource to populate the dropdown popup. The example below provides a layout that follows the Material Design guidelines.

res/layout/dropdown_menu_popup_item.xml

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:ellipsize="end"
    android:maxLines="1"
    android:textAppearance="?attr/textAppearanceSubtitle1"/>

In your class add the following code depending on what you want.

String[] type = new String[] {"Bed-sitter", "Single", "1- Bedroom", "2- Bedroom","3- Bedroom"};

        ArrayAdapter<String> adapter =
                new ArrayAdapter<>(
                        this,
                        R.layout.dropdown_menu_popup_item,
                        type);

        AutoCompleteTextView editTextFilledExposedDropdown =
                findViewById(R.id.filled_exposed_dropdown);
        editTextFilledExposedDropdown.setAdapter(adapter);

incase this doesn't help kindly check Exposed Dropdown Menus in material design page. [https://material.io/develop/android/components/menu/][1]

This is my first answer on stack overflow I hope it helps.

If you're using Kotlin and VIEW binding, when trying to set your adapter you might get a "Val cannot be reassigned". You'll need to use **as** like this: ` (binding?.editTextFilledExposedDropdown as? AutoCompleteTextView)?.setAdapter(adapter) ` — jj., Jul 19 '21 at 21:34

score 19 · Answer 2 · answered Sep 11 '19 at 07:45

19

Just use the TextInputLayout included in the Material Components Library with the style Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu.

Something like:

  <com.google.android.material.textfield.TextInputLayout
      style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
      android:hint="Hint text"
      ...>

    <AutoCompleteTextView
        android:id="@+id/outlined_exposed_dropdown_editable"
        .../>
  </com.google.android.material.textfield.TextInputLayout>

answered Sep 11 '19 at 07:45

Gabriele Mariotti

320,139
94
887
841

6

Thank for your response it seems to be good but now how can we (with this solution) display the dropdown menu and manage selection of item etc. ? – SebastienRieu Dec 12 '19 at 10:09
Actually, it exists starting `"com.google.android.material:material:1.1.0"` – Akbolat SSS Apr 10 '20 at 12:09
@AkbolatSSS Yes, 1.1.0 is currently the latest stable version. – Gabriele Mariotti Apr 10 '20 at 12:18
This works very well but, I have a problem that after selecting an option, the dropdown doesn't show all the options again, only the one selected. Would there be a way to prevent this and show all the options again? – Arthur Bertemes Mar 18 '22 at 13:18

score 10 · Accepted Answer · edited Jun 20 '20 at 09:12

10

I believe that this document isn't showing a Spinner at all. I think it's showing a TextInputLayout with a dropdown icon.

In the Anatomy section, at the Icons subsection, it says

5. Dropdown icon

A dropdown arrow indicates that a text field has a nested selection component.

Now, how you provide the "nested selection component" I'm not sure...

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 07 '18 at 23:12

Ben P.

52,661
6
95
123

score 9 · Answer 4 · answered Jan 26 '21 at 13:22

From the other answers, "AutoCompleteTextView" is the answer but it does not do the same as a spinner does.

Here is my solution. Just put normal edittext inside TextInputLayout and make this editText disabled for inputs. And put a 0dp,0dp spinner for normal spinner working.

Don't make spinner visibility=gone, because if it's gone, spinner listener does not work

layout.xml

  <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/textInputLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/_10dp"
        android:theme="@style/ThemeOverlay.App.TextInputLayout">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableEnd="@drawable/arrow_down_pacific_blue"
            android:focusable="false"
            android:hint="şehir"
            android:inputType="none" />

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

    <Spinner
        android:id="@+id/spinner"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="10dp"
        android:background="@android:color/transparent"
        android:spinnerMode="dialog"
        tools:listitem="@layout/general_spinner_item" />

java code

set click listener to edittext for trigger spinner click

findViewById(R.id.editText).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
    
                    spinner.performClick();
                }
            });

in spinner listener, set edittext text from selected item,

  spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {

            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {

                selectedCity= (City) parent.getAdapter().getItem(position);

                editText.setText(selectedCity.getScreenText());

                RDALogger.debug("selectedObject " + selectedCity);
            }

            @Override
            public void onNothingSelected(AdapterView<?> parent) {

            }
        });

and the result view

score 6 · Answer 5 · answered Dec 07 '20 at 21:10

I am using the below material libs to get spinner

implementation 'androidx.appcompat:appcompat:1.2.0'
implementation 'com.google.android.material:material:1.2.1'

Here is my layout look like

 <com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
            android:layout_width="500dp"
            android:layout_height="wrap_content"
            android:hint="@string/select_wifi"
            app:hintTextAppearance="@style/hintStyle"
            app:startIconDrawable="@drawable/wifi">

            <com.google.android.material.textfield.MaterialAutoCompleteTextView
                style="@style/textInputEdittext"
                android:inputType="none" />

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

Check out this image for the spinner

score 4 · Answer 6 · answered Jun 06 '19 at 18:46

It seems like they actually use a TextInputLayout wrapping up an AutoCompleteTextView. Note that they are already the material Components theme [https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md].

See: https://material.io/design/components/menus.html#exposed-dropdown-menu https://material.io/develop/android/components/menu/

score 4 · Answer 7 · answered May 25 '20 at 19:23

I solved my problem using this: in XML:

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/layout"
        style="@style/AppTheme.ExposedDropdownMenu"                        
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <AutoCompleteTextView
            android:id="@+id/my_spinner_dropdown"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </com.google.android.material.textfield.TextInputLayout>

in code:

        layout.keyListener=null
        ArrayAdapter(it, android.R.layout.simple_list_item_1, list).also { 
         adapter ->
            layout.setAdapter(adapter)
        }

Credits:How to make EditText not editable through XML in Android?

score 3 · Answer 8 · answered Apr 21 '21 at 15:25

You can check my Medium article where I introduce a custom MaterialSpinner which supports two-way data binding and selection tracking. The resulting layout can look as simple as this:

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/input_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="@string/selection_hint"
    app:startIconDrawable="@drawable/selection_icon"
    app:boxBackgroundMode="outline"
    app:endIconMode="@{viewModel.items == null || viewModel.items.size() != 0 ? TextInputLayout.END_ICON_DROPDOWN_MENU : TextInputLayout.END_ICON_NONE}">

    <com.example.MaterialSpinner
        android:id="@+id/items"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:items="@{viewModel.items}"
        app:selectedPosition="@={viewModel.selectedItemPosition}"
        app:emptyText="@string/selection_no_item_text" />

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

app:endIconMode="dropdown_menu" for those who dont use data binding — Reejesh PK, May 11 '21 at 05:24

score 3 · Answer 9 · answered Jun 01 '21 at 11:32

I know its too late to answer this question, but somebody like me stuck in issue like this or similar may find this very useful. Visit this repo its perfect solution as requested. This library support all material TextInputLayout styles. Thanks to "Mamoon Al-hawamdeh" for this amazing library.

score 0 · Answer 10 · answered Jul 14 '21 at 10:51

0

All this answers are helpful but the one important note that is if you set app:endIconMode attribute, your Drop down menu not work.

answered Jul 14 '21 at 10:51

Mohsents

691
11
9

score -1 · Answer 11 · answered Nov 18 '21 at 05:27

Just change inputType from "text" to "none"

<android.support.design.widget.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/myEditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Title"
            android:inputType="none"/>

    </android.support.design.widget.TextInputLayout>

Material design Spinner using TextInputLayout.OutlinedBox styling

11 Answers11

Linked