AutocompleteTextView in Android

In this section, you will learn something about the AutoCompleteTextView widget which can be used in Android App Development.

We must But what is the use? we must have noticed Google Search bar providing suggestions as you type in your search query in google website..

Very similar functionality can be implemented in Android apps, with the help of AutoCompleteTextView.
An auto complete TextView can be editable TextView where the user can type in any value and we can even select the input from the list of items suggested and The proposed item from the list will be selected when the user taps on an item. The content of the edit box will be replaced by the chosen suggested item and the Following is an example of AutoCompleteTextView:

The suggestion list can be dismissed anytime by clicking the back key or by tapping anywhere outside the drop down list of items and The suggestion list 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 section, you will create an Android Application where the user will be provided with an EditText view and to choose enter the name of their favourite Restaurant. As the user will type in the name and we will provide the user with suggestions from which the user can select any item so the user will select any name by tapping on the list item, a Toast will be displayed on the app 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">

    <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 app layout, you have one TextView to display the title “Enter any Restaurant name” on screen and Then below it, we have an AutoCompleteTextView which can take restaurant name from the user and will also provide the suggestions, also after that you have one more TextView which will display the selected item from the suggestion list.

As we can see, in the AutoCompleteTextView, you 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, so, this view will require minimum 2 characters to display the list of suggestions to the user.

In the MainActivity.java file, first you will create instances of AutoCompleteTextView and TextView, and Then, you 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 you will implement the AdapterView.OnItemClickListener and set onItemClickListener() on the AutoCompleteTextView to get the user selected item value from the list.

Following is the java code for the above mentioned logic:

MainActivity.java

package com.example.myapplication;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
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 adapter = new ArrayAdapter(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 can provided a layout object as argument android.R.layout.simple_list_item_1, where you have not created any layout XML file, because this refers to a default layout xml provided by Android OS.

we can get the user selected value using the getItemAtPosition() method, and Then, to display selected item on the screen, we will need to use Toast class. So, we will add the value to the TextView using setText() method of our second TextView. You 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.myapplication;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
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 adapter = new ArrayAdapter(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);
   }

}

Learn Android

AutocompleteTextView in Android