Material design Spinner using TextInputLayout.OutlinedBox styling

Question

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

Answer 1

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>

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.

Answer 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

Answer 4

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

Answer 5

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/

Answer 6

Check out

There is No Material Design Spinner for Android