How to Use MaterialAutoCompleteTextView with Completion Threshold

I’d like to start using material components in my Android app, and I am having a bit of trouble with the MaterialAutoCompleteTextView. I want it to behave like a standard AutoCompleteTextView, and I prefer the OutlinedBox style. Furthermore, it should observe the completionThreshold property, expanding the dropdown only after three matching characters are entered.

There are four styles available for this component that are creating an outlined box: Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense Widget.MaterialComponents.TextInputLayout.OutlinedBox

However, the first two styles do not observe the completionThreshold and expand the dropdown immediately when they are in focus. The remaining ones seem broken and are probably not meant to be used with this component.

One option obviously is to use one of the latter styles and modify it. But this could end up a bit messy for this relatively complex component, and it seems a rather hacky way to make use of a built-in behavior.

What would be the right approach?

enter image description here

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:layout_margin="10dp">

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:hint="Option 1"
        app:helperText="OutlinedBox.Dense.ExposedDropdownMenu"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu">

        <com.google.android.material.textfield.MaterialAutoCompleteTextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:completionThreshold="3"
            />

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

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:hint="Option 2"
        app:helperText="OutlinedBox.ExposedDropdownMenu"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu">

        <com.google.android.material.textfield.MaterialAutoCompleteTextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:completionThreshold="3"
            />

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

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:hint="Option 3"
        app:helperText="OutlinedBox.Dense"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">

        <com.google.android.material.textfield.MaterialAutoCompleteTextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:completionThreshold="3"
            />

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

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:hint="Option 4"
        app:helperText="OutlinedBox"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">

        <AutoCompleteTextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:completionThreshold="3"
            />

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

</LinearLayout>

Answer

Please try using setThreshold(3) on your AutoCompleteTextView in your java code, and also set app:endIconMode="none" in your xml, in the TextInputLayout that contains the AutoCompleteTextView.

Leave a Reply

Your email address will not be published. Required fields are marked *