AutoCompleteTextView in Android

In this tutorial, we will learn about AutoCompleteTextView widget that can be used in Android Application Development.

But what is it's use? You must have noticed Google Search bar providing suggestions as you type in your search query.

Similar functionality can be implemented in Android apps, with the help of AutoCompleteTextView.

An auto complete TextView is an editable TextView where in user can type in any value, or can even select the input from the list of items suggested. The suggested item from the list will be selected when the user taps on an item. Also, the content of the edit box will be replaced by the chosen suggested item. Following is an example of AutoCompleteTextView:

The list of suggestions can be dismissed anytime by clicking the back key or by tapping anywhere outside the drop down list of items. The list of suggestions is generated using an ArrayAdapter which holds the data set of items which appear in a dropdown as the user types in characters and it appears only after a given number of characters defined by the threshold have been typed in.

AutoCompleteTextView Example

In this tutorial, we will create an Android Application where the user will be provided with an EditText view, to choose enter the name of their favourite Restaurant. As the user will type in the name, we will provide the user with suggestions from which the user can select any item. As the user will select any name by tapping on the list item, a Toast will be displayed on the screen with the Restaurant's name and the name will also be added to a TextView.

Following is the XML code for the project:

<?xml version="1.0" encoding="utf-8"?>
    
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.android.studytonightandroid.MainActivity">

    <TextView
        android:id="@+id/tvRestaurant"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="Enter Your Country Below"
        android:textAppearance="?android:attr/textAppearanceMedium"/>

    <AutoCompleteTextView
        android:id="@+id/actv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvRestaurant"
        android:layout_marginTop="10dp"
        android:completionThreshold="1"/>

    <TextView
        android:id="@+id/tvDisplay"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/actv"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:text="selected country will appear here"
        android:textSize="20sp"/>

</RelativeLayout>

In this layout, we have one TextView to display the title "Enter any Restaurant name" on screen. Then below it, we have an AutoCompleteTextView which will take restaurant name from the user and will also provide the suggestions. And after that we have one more TextView which will display the selected item from the suggestion list.

As you can see, in the AutoCompleteTextView, we have set a property with name android:completionThreshold. This property indicates the number of characters to be input, after which, the list of suggestion will be displayed to the user. It means that if you assign a value equal to 2 to it, then, this view will require minimum 2 characters to display the list of suggestions to the user.

In the MainActivity.java file, first we will create instances of AutoCompleteTextView and TextView. Then, we will use an ArrayAdapter to display the suggestion items in the AutoCompleteTextView. For that, we first need to create an array named restaurants and add the names of various restaurants to show them as suggestions.

Then we will implement the AdapterView.OnItemClickListener and set onItemClickListener() on the AutoCompleteTextView to get the user selected item value from the list.

Following is the code for the above mentioned logic:

MainActivity.java

package com.example.android.studytonight;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements AdapterView.OnItemClickListener {
    // get instances of AutoCompleteTextView and TextView
    AutoCompleteTextView autoCompleteTextView;
    TextView tvDisplay;

    String restaurants[] = {
                                "KFC",
                                "Dominos",
                                "Pizza Hut",
                                "Burger King",
                                "Subway",
                                "Dunkin' Donuts",
                                "Starbucks",
                                "Cafe Coffee Day"
                            };

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

        autoCompleteTextView = (AutoCompleteTextView) findViewById(R.id.actv);
        tvDisplay = (TextView) findViewById(R.id.tvDisplay);

        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1, restaurants);
        
        autoCompleteTextView.setAdapter(adapter);
        autoCompleteTextView.setOnItemClickListener(this);
    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) 
    {
        // we will show a Toast with selected value
    }
}

Notice that while using the ArrayAdapter, we have provided a layout object as argument android.R.layout.simple_list_item_1, while we have not created any layout XML file, because this refers to a default layout xml provided by Android OS.

You can get the user selected value using the getItemAtPosition() method. Then, to display selected item on the screen, you will need to use Toast class. Finally, we will add the value to the TextView using setText() method of our second TextView. We need to place all this code inside onItemClick() method as follows:

@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) 
{
    // fetch the user selected value
    String item = parent.getItemAtPosition(position).toString();
    
    // create Toast with user selected value
    Toast.makeText(MainActivity.this, "Selected Item is: \t" + item, Toast.LENGTH_LONG).show();

    // set user selected value to the TextView
    tvDisplay.setText(item);

}

Complete Code of MainActivity.java

Here is the whole MainActivity.java file code:

package com.example.android.studytonight;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements AdapterView.OnItemClickListener 
{
    // get instances of AutoCompleteTextView and TextView
    AutoCompleteTextView autoCompleteTextView;
    TextView tvDisplay;

    String restaurants[] = {
                                "KFC",
                                "Dominos",
                                "Pizza Hut",
                                "Burger King",
                                "Subway",
                                "Dunkin' Donuts",
                                "Starbucks",
                                "Cafe Coffee Day"
                            };

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

        autoCompleteTextView = (AutoCompleteTextView) findViewById(R.id.actv);
        tvDisplay = (TextView) findViewById(R.id.tvDisplay);
        
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,restaurants);

        autoCompleteTextView.setAdapter(adapter);
        autoCompleteTextView.setOnItemClickListener(this);
    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) 
    {
        // fetch the user selected value
        String item = parent.getItemAtPosition(position).toString();
        
        // create Toast with user selected value
        Toast.makeText(MainActivity.this, "Selected Item is: \t" + item, Toast.LENGTH_LONG).show();
    
        // set user selected value to the TextView
        tvDisplay.setText(item);
    
    }
}

Output Screens: