'Material design Spinner using TextInputLayout.OutlinedBox styling

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?

Solution 1:^[1]

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.

Solution 2:^[2]

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>

Solution 3:^[3]

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

Solution 4:^[4]

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/

Solution 5:^[5]

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?

Solution 6:^[6]

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

Solution 7:^[7]

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.

Solution 8:^[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>

Solution 9:^[9]

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

Solution 10:^[10]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ben Kigera
Solution 2	Gabriele Mariotti
Solution 3	Arda
Solution 4	Pablo S. Campos
Solution 5	Paulo CÃ©sar
Solution 6	Arpit Patel
Solution 7	Attique Ur Rehman
Solution 8	MiloÅ¡ ÄŒernilovskÃ½
Solution 9	Mohsents
Solution 10	Ajay Mistry

'Material design Spinner using TextInputLayout.OutlinedBox styling

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]