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

try applying this theme to your spinner `style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"` — Jeel Vankhede, Oct 27 '18 at 12:45
yeah tried that, does not seem to work, even wraped it with the material layout. — user3414321, Oct 27 '18 at 15:45
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 — Jeel Vankhede, Oct 27 '18 at 15:49
Sure, will dig deeper and find something, let know if there's something. Also let me know if stuck at anything. — Jeel Vankhede, Oct 27 '18 at 16:01
Check out answer from @petyr, it's working solution from Google's material design page. — Jeel Vankhede, May 24 '19 at 07:42

score 20 · Answer 1 · edited Dec 04 '19 at 13:19

20

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"

edited Dec 04 '19 at 13:19

madlymad

6,367
6
37
68

answered May 21 '19 at 13:09

petyr

415
7
15

1

Can you mention the dependency for `Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu` – Hussain Aug 29 '19 at 15:53
1

add this to your gradle implementation "com.google.android.material:material:1.1.0-alpha09" – petyr Aug 29 '19 at 16:11
2

How can I avoid the keyboard input to this EditText ? – Vinicius Almada Apr 15 '20 at 01:40
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. – Kavin Raju S Aug 03 '20 at 11:57
@KavinRajuS how did you set the item to be the selected item – petyr Aug 04 '20 at 11:34
1

@petyr 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. – Kavin Raju S Aug 04 '20 at 11:53
@ViniciusAlmada can you find a solution for blocking input? – ysfcyln Sep 17 '20 at 13:42
how to retrive the selected value from AutoCompleteTextView – Akash kumar Sep 24 '20 at 11:31
1

@Akashkumar You can use various different methods, you can use databinding and bind the text to a variable, or use an onItemSelectedListener – petyr Sep 24 '20 at 15:12
@petyr setOnItemClickListener(object : AdapterView.OnItemClickListener { override fun onItemClick(p0: AdapterView<*>?, p1: View?, position: Int, p3: Long) {} } – Akash kumar Sep 24 '20 at 17:34
use setOnItemSelectedListener not onItemClicked @Akashkumar – petyr Sep 24 '20 at 17:49
1

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). – drmrbrewer Sep 10 '21 at 08:55
@petyr it actually depends. If the `AutoCompleteTextView` is not editable, `setOnItemSelectedListener` won't work at all. In that situation you have to use `setOnItemClickListener`. – Xam Aug 18 '22 at 21:25
1

Thank you @Xam, I didn't know that. I will check that out and maybe update the answer. – petyr Aug 22 '22 at 13:25

score 7 · Accepted Answer · answered Dec 18 '18 at 07:39

7

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.

answered Dec 18 '18 at 07:39

Chris

86
1
4

Creating a material spinner dropdown in android using MDC

2 Answers2