Android AutoCompleteTextView Example Tutorial

Filed Under: Android

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

android AutoCompleteTextView example 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="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://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.

Android AutoCompleteTextView Example App

This brings an end to Android AutoCompleteTextView tutorial. You can download the final Android AutoComplete project from the link given below.

Comments

  1. Dell says:

    R.layout.select_dialog_item

    where is this file ??

    1. Nate Albertson says:

      This is a android specific layout reference which is why it has the android.R.layout you would need to dig through the sdk to find it.

      Navigate to your Android sdk directory then it should be under /Android/sdk/platforms/android-28*/data/res/layout/select_dialog_item

      * use your targeted platform since that will likely be the resource that is utilized for the dialog item.

  2. HITESH says:

    how to add image in the last element / object.
    take an example we have 5 array data , I want to add a image on 6 th elemenet / object.

    How we can do that?

    1. Anupam says:

      Create a separate layout file for the sixth one with the ImageView. In the adapter, while inflating the layout, check the position and set the layout accordingly.

  3. Ranjit Shete says:

    add two autocompleteview and search data

  4. Anup Das says:

    Thanks, Anupam, it helped me a lot in learning auto complete TextView.

    Btw can you tell me how to implement very large amount of data in auto complete TextView.

    1. Anupam says:

      Just add more elements in the string array.

  5. syed souban says:

    From where did you get R.layout.select_dialog_item?

    1. Anupam says:

      it’s android.R.layout.select_dialog_item.
      It’s present in the android SDK.

Leave a Reply

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

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages