Creating a material spinner dropdown in android using MDC

Question

I was looking into Material design Material.io for material components, everything was well and good, I was trying to use MDC's TextField component to create a material drop down spinner, but I could not seem to find any related documentation, is it possible to create a spinner using MDC? if so, where can I find documentations for it?

is saw a spinner in there catalog for TextField, can I do something like this?:

Answer 1

This is exactly what you need for this

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

first you add the AutocompleteTextView in the Textinputlayout

<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="@string/hint_text">

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

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

Then you can design the menu items like so:

<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"/>

Initialize the adadpter in java like:

String[] COUNTRIES = new String[] {"Item 1", "Item 2", "Item 3", "Item 4"};

ArrayAdapter<String> adapter =
        new ArrayAdapter<>(
            getContext(),
            R.layout.dropdown_menu_popup_item,
            COUNTRIES);

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

You can change the styles to meet various variations like:

Filled style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"

outlined

Apply this style to your TextInputLayout:

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"

Dense Filled

Apply this style to your TextInputLayout:

style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense.ExposedDropdownMenu"

Dense Outlined

Apply this style to your TextInputLayout:

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu"

Answer 2

On the Material Design website its marked as Planned for Android (Material Menus) I also noticed Material Design's Twitter feed it's just been released for Web. So hopefully an actual implementation will be released soon.