Android AutoCompleteTextView Example Tutorial

AutocompleteTextView is an editable text view that shows completion suggestions automatically while the user is typing in android apps. In this tutorial we’ll implement android AutoCompleteTextView in our application using an ArrayAdapter to define the list of suggestions.

Android AutoCompleteTextView Overview

AutoCompleteTextView is a component used to show suggestions while writing in an editable text field. The suggestions list is shown in a drop down menu from which a user can select the desired item. The list of suggestions is obtained from an adapter and it appears only after a number of characters that are specified in the threshold. In order to use an AutoCompleteThreshold field, it needs to be defined in the xml layout as follows:

<AutoCompleteTextView
   android:id="@+id/autoCompleteTextView"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentTop="true"
   android:layout_centerHorizontal="true"
   android:layout_marginTop="65dp"
   android:ems="10" >

Note : android:ems or setEms(x) sets the width of a TextView to fit a text of x ‘M’ number of letters regardless of the actual text extension and text size. Some important methods of Autocomplete list are given below:

1. getAdapter() : This method returns a filterable list adapter used for auto completion
2. getCompletionHint() : This method returns optional hint text displayed at the bottom of the the matching list
3. getDropDownAnchor() : This method returns returns the id for the view that the auto-complete drop down list is attached to
4. getListSelection() : This method returns the position of the dropdown view selection, if there is any
5. isPopupShowing() : This method indicates whether the popup menu is showing
6. setText(CharSequence text, boolean filter) : This method sets text except that it can disable filtering
7. showDropDown() : This method displays the drop down on screen

The setAdapter method is used to set the adapter of the autoCompleteTextView. Let’s jump to the coding part of it.

Android AutoCompleteTextView Project Structure

This project contains a simple TextView and a AutoCompleteTextView in the layout of the MainActivity. The ArrayAdapter contains the following fruits : Apple, Banana, Cherry, Date, Grape, Kiwi, Mango, Pear.

Android AutoCompleteTextView Example Code

The layout of the MainActivity is defined as follows. activity_main.xml

<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="15dp"
        android:text="Name a fruit from (Apple Banana Cherry Date Grape Kiwi Mango Pear)" />

    <AutoCompleteTextView
        android:id="@+id/autoCompleteTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/textView"
        android:layout_marginLeft="36dp"
        android:layout_marginTop="17dp"
        android:ems="10"
        android:text="">

        <requestFocus />
    </AutoCompleteTextView>

</RelativeLayout>

The MainActivity.java is defined below.

package com.journaldev.autocomplete;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;

public class MainActivity extends Activity {
    String[] fruits = {"Apple", "Banana", "Cherry", "Date", "Grape", "Kiwi", "Mango", "Pear"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Creating the instance of ArrayAdapter containing list of fruit names
        ArrayAdapter<String> adapter = new ArrayAdapter<String>
                (this, android.R.layout.select_dialog_item, fruits);
        //Getting the instance of AutoCompleteTextView
        AutoCompleteTextView actv = (AutoCompleteTextView) findViewById(R.id.autoCompleteTextView);
        actv.setThreshold(1);//will start working from first character
        actv.setAdapter(adapter);//setting the adapter data into the AutoCompleteTextView
        actv.setTextColor(Color.RED);

    }
}

In the above code, we’ve stored the list of fruits in an ArrayAdapter with a layout imported from the Android SDK. The text color in the editable TextView is red. A threshold count of 1 depicts that to show the autocomplete drop-down list we need to type in at least one character. Note: Autocomplete list is visible only when the Editable field is focused. Below is our auto complete example application in execution. This brings an end to Android AutoCompleteTextView tutorial. You can download the final Android AutoComplete project from the link given below.

Download Android AutoCompleteTextView Project