↓ Skip to main content

Processing AutoCompleteTextView Item Selection

Android
Table of Contents

This article was translated from Japanese by Claude Code.

When incorporating Material Design’s Exposed dropdown menus UI into a personal app, I got a bit stuck implementing the processing for item selection in AutoCompleteTextView, so I’ve documented what I researched.

TL;DR
#

For processing when items are selected by click, use setOnItemClickListener instead of setOnItemSelectedListener

AutoCompleteTextView
#

There’s a View called AutoCompleteTextView. You can use this when you want to create a UI for menu elements that display multiple options.

Menus#

The Material Design Components “Menus” section has details.

According to the material.io site above, there are two types of menus:

  1. Dropdown menus

  2. Exposed dropdown menus

Dropdown menus seem to have various forms, but I understand them as “menus that display only options in a list.”

On the other hand, Exposed dropdown menus, as I understand them, are “menus where the currently selected option is displayed at the top, and a list of options is displayed below it.”

In my personal app, I wanted to display the currently selected element as well, so I decided to create Exposed dropdown menus using AutoCompleteTextView.

Please check the official sites above for details and proper explanations.

Implementation Example
#

material.io also has example code for implementation, so please check that out too. Following the official site, I wrote XML like this in my personal app. By wrapping AutoCompleteTextView in a TextInputLayout with a style applied, you can make it look like an ExposedDropdownMenu.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/dropDownRoot"
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <AutoCompleteTextView
            android:id="@+id/dropDown"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="none"
            tools:ignore="LabelFor" />
    </com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

This is what it looks like:

Processing AutoCompleteTextView Item Selection
#

In my personal app, I set up a listener to save the selection to the database every time an item is selected, a common implementation.

Originally, I called setOnItemSelectedListener to set the listener, but for some reason, when I selected an item, the listener wasn’t firing.

When I searched for the cause, I found something that seemed relevant:

stackoverflow.com

It said I should use setOnItemClickListener instead of setOnItemSelectedListener. Actually, using setOnItemClickListener solved the problem.

Even looking at the AutoCompleteTextView javadoc, it’s not immediately clear which to use, so be careful.

/**
 * <p>Sets the listener that will be notified when the user clicks an item
 * in the drop down list.</p>
 *
 * @param l the item click listener
 */
public void setOnItemClickListener(AdapterView.OnItemClickListener l) {
    mItemClickListener = l;
}
/**
 * <p>Sets the listener that will be notified when the user selects an item
 * in the drop down list.</p>
 *
 * @param l the item selected listener
 */
public void setOnItemSelectedListener(AdapterView.OnItemSelectedListener l) {
    mItemSelectedListener = l;
}

That’s all.

If there’s any incorrect information, please let me know via comments or Twitter 🙏

Reference
#