Is it possible to implement Exposed Dropdown Menus using an spinner

Question

Material design has an Exposed Dropdown Menu implemented with a AutoCompleteTextView like this:

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

But I need to have the same look an feel but with the spinner behavior (Without autocomplete, just display popup and select an item).

I disabled editing on AutoCompleteTextView to avoid to use the auto complete, but after selecting one of the item then the autocomplete just list the items that matches the item text selected given a filter that is used in this view. This is the code:

    <AutoCompleteTextView
            android:id="@+id/filled_exposed_dropdown"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="16dp"
            **android:editable="false"**/>

Also I put a listener to open items list when click on it

val editTextFilledExposedDropdown = findViewById<AutoCompleteTextView>(R.id.filled_exposed_dropdown)
    editTextFilledExposedDropdown.setAdapter(adapter)
    editTextFilledExposedDropdown.setOnClickListener {
        (it as AutoCompleteTextView).showDropDown()
}

So, I would want to know if it is possible to implement this but with a spinner

This was my attempt using a spinner, but it not display the style correctly OutlinedBox.Dense.ExposedDropdownMenu and also display two arrow bottom icon, I think one for the style and another for the spinner.

this was the code with the spinner:

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

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


<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/layout_id"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Currency">
    <androidx.appcompat.widget.AppCompatSpinner
            android:id="@+id/my_spinner"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

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

score 2 · Answer 1 · answered Jun 17 '19 at 16:42

2

This is what i was looking for, just disable autocomplete functionality of AutoCompleteTextView by overriding getFilter method. the answer is posted here (AutoCompleteTextView - disable filtering)

answered Jun 17 '19 at 16:42

Jimmy Alvarez

587
1
5
13

score 2 · Answer 2 · answered Dec 23 '19 at 10:19

2

Update:

Can be achieved with 1 line of code:

android:editable="false"

On the AutoCompleteTextView

From the material.io docs:

Note: In order to have a non editable variation of the menu, you should disable user input in the AutoCompleteTextView. That can be achieved by setting android:editable="false" on the AutoCompleteTextView.

No idea why Google chose to use a deprecated attribute for this though...

tools:ignore="Deprecated" can be used though to remove the warning

answered Dec 23 '19 at 10:19

Edward van Raak

4,841
3
24
38

This doesn't give proper behavior. The author mentioned this: "I disabled editing on AutoCompleteTextView to avoid to use the auto complete, but after selecting one of the item then the autocomplete just list the items that matches the item text selected given a filter that is used in this view." – QuarK Jan 31 '20 at 10:23
4

inputMode="none" should be used instead of editable="false" – philips77 May 29 '20 at 14:33
`inputMode="none"` is not even a real thing!? `android:inputType="none"` is but its still allowing user to edit the `AutoCompleteTextView ` – Learn2Code Jun 26 '21 at 01:23
@philips77 `inputMode="none"` doesn't prevent the soft keyboard from popping when the user taps on the `AutoCompleteTextView`, whereas, `editable="false"` does. – Xam Aug 19 '22 at 16:48

score 2 · Answer 3 · answered Sep 10 '20 at 14:08

2

You can use android:inputType="none" on the AutoCompleteTextView.

answered Sep 10 '20 at 14:08

Emilio Hoffmann

274
2
11

score 0 · Answer 4 · answered Jun 17 '19 at 15:07

How about creating PopupMenu instead of AutoCompleteTextView Here is an example of how creating menu in android :

    Context wrapper = new ContextThemeWrapper(getContext(), R.style.popupMenuStyle);
//yourView is the view that you want to display the menu above it.
                PopupMenu popupMenu = new PopupMenu(wrapper, yourView);
                popupMenu.getMenuInflater().inflate(R.menu.menu, popupMenu.getMenu());
                popupMenu.setOnMenuItemClickListener(item -> {
                    switch (item.getItemId()) {
                        case R.id.delete:
                            //delete
                            break;
                        case R.id.edit:
                            //edit
                            break;
                    }
                    popupMenu.dismiss();
                    return true;
                });
                popupMenu.show();

menu.xml file inside menu folder:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/edit"
        android:title="@string/edit">

    </item>
    <item
        android:id="@+id/delete"
        android:title="@string/delete">
    </item>
</menu>

It is a good idea but not what i'm looking for, the items that I want to display will be loaded dynamically, those depends on another user inputs. — Jimmy Alvarez, Jun 17 '19 at 15:16
ok you did not mention this in your question but you can do this ... see this answer https://stackoverflow.com/a/17312050/8660721 — Mohammad Sommakia, Jun 17 '19 at 15:18

Is it possible to implement Exposed Dropdown Menus using an spinner

4 Answers4