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?:

Fere

try applying this theme to your spinner style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox" – Boomerang

yeah tried that, does not seem to work, even wraped it with the material layout. – Fere

Okay then another approach would be like patch but will work, use TextInputLayout with above style, and inside of it's EditText take right drawable as drop-down icon, make everything editable false and open popup menu on click of it. It'll function exactly like what you wanted – Boomerang

hacky, but workable. ill use that for now, thanks. – Fere

Sure, will dig deeper and find something, let know if there's something. Also let me know if stuck at anything. – Boomerang

Check out answer from @petyr, it's working solution from Google's material design page. – Boomerang

Answer 1

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.

Epithalamium

Answer 2

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"

Jobe

Can you mention the dependency for Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu – Beatrisbeatrisa

add this to your gradle implementation "com.google.android.material:material:1.1.0-alpha09" – Jobe

How can I avoid the keyboard input to this EditText ? – Chemoreceptor

How to set one item in the list to be selected by default and still show the entire list items? I tried setting an item in the list but while selecting the drop-down it's only showing that selected item. – Mycenae

@KavinRajuS how did you set the item to be the selected item – Jobe

@Jobe In Kotlin: binding.dropdownMenu.apply { this.setText(LIST_COUNTRIES.get(0), false) this.setAdapter(adapter) } So it's basically by calling the setText("Default Value", false) function. – Mycenae

@ViniciusAlmada can you find a solution for blocking input? – Shipshape

how to retrive the selected value from AutoCompleteTextView – Sectional

@Akashkumar You can use various different methods, you can use databinding and bind the text to a variable, or use an onItemSelectedListener – Jobe

@Jobe setOnItemClickListener(object : AdapterView.OnItemClickListener { override fun onItemClick(p0: AdapterView<*>?, p1: View?, position: Int, p3: Long) {} } – Sectional

use setOnItemSelectedListener not onItemClicked @Akashkumar – Jobe

IMHO the suggested way of implementing a Spinner in MDC is horrible. The exposed dropdown menu approach just seems to be an EditText that has an autocomplete functionality, coupled with a predefined list of choices for the autocomplete. My Spinner implementation shows both text and a graphical symbol (using a custom Adapter)... both in the dropdown and as the selected choice. This doesn't seem possible with MDC because the underlying UI element is just an EditText (i.e. purely text based). – Pulver

@Jobe it actually depends. If the AutoCompleteTextView is not editable, setOnItemSelectedListener won't work at all. In that situation you have to use setOnItemClickListener. – Suberin

Thank you @Xam, I didn't know that. I will check that out and maybe update the answer. – Jobe

@ViniciusAlmada try disabling autoCompleteTextView it work for me (android:cursorVisible="false" android:focusable="false" android:focusableInTouchMode="false" android:inputType="none") – Juliettajuliette

Answer 3

Use this if you want the layout work like spinner (not an editText)
Layout xml:

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.google.android.material.textfield.MaterialAutoCompleteTextView
        android:id="@+id/dropdown_gender"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/gender" />

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

Extension Code:

fun <T> MaterialAutoCompleteTextView.applyDropdown(
    items: List<Pair<String, T>>,
    onSelect: (item: Pair<String, T>) -> Unit = {},
) {
    setSimpleItems(items.map { it.first }.toTypedArray())
    threshold = items.map { it.first }.maxOf { it.length }.plus(1)
    isCursorVisible = false
    isFocusable = false
    isFocusableInTouchMode = false
    inputType = InputType.TYPE_NULL
    onItemClickListener = AdapterView.OnItemClickListener { _, _, position, _ ->
        items.getOrNull(position)?.let { onSelect(it) }
    }
}

val items = listOf(Pair("Male", "male"), Pair("Female", "female"))
binding.dropdownGender.applyDropdown(items) {
    //do something with it.second --> (male, female)
}

Juliettajuliette