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?

Transcendentalism

Did you find answer to this question? I'm facing the same issue. As mentioned here: #54005476 – Lamond

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. – Fiberboard

Answer 1

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

Chitter

Answer 2

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.

Guienne

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) ` – Florist

Answer 3

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>

Revet

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. ? – Dentoid

Actually, it exists starting "com.google.android.material:material:1.1.0" – Sesquicarbonate

@AkbolatSSS Yes, 1.1.0 is currently the latest stable version. – Revet

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? – Masked

Answer 4

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

Riel

Answer 5

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

Lyonnesse

Answer 6

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/

Wakeen

Answer 7

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?

Octavus

Answer 8

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>

Kwa

app:endIconMode="dropdown_menu" for those who dont use data binding – Maus

Answer 9

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.

Amieva

Answer 10

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

Grundy

Answer 11

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>

Telex