Is it possible to implement Exposed Dropdown Menus using an spinner

user_8534933 0
Viewed 13449

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

enter image description here

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>
material-design android-view autocompletetextview android
4 Answers
user_85349330

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

user_20958550

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

user_65333010

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