How to create an Auto Complete textbox in Android

Auto complete is a must have feature in applications that require user to type-in commonly used words or phrases.  As soon as user starts typing in a word or phrase, the application shows a list containing the probable words or phrases that the user wants to type in without the user actually typing it in completely. This feature makes application more user friendly and improves user experience. We will create a textbox widget which supports auto complete feature.

Note: We will be using Android Platform 2.2 for developing our application.

To demonstrate how to create textbox having auto suggestion feature, we will create a basic application with a single textbox and when the user types something inside this textbox, a suggestion list is displayed automatically. Create a new Android project with the following properties –

Project Name – Auto Complete

Name of the Application – Auto Complete

Package name – com.botskool.AutoComplete

Activity Name – AutoComplete

Create a new XML file in res/layout/ and name it as list_item.xml and copy the following code inside it -

<?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="10dp" android:textSize="16sp" android:textColor="#000"> </TextView>

The list_item.xml is used to configure the look of the autocomplete dropdown list which shows suggestions.

Next open the res/values/strings.xml XML file and add the following code to it.

<?xml version="1.0" encoding="utf-8"?> <resources> <string name="tip">Type in a month name below -</string> <string name="app_name">Auto Complete</string> <string-array name="months_array"> <item>January</item> <item>February</item> <item>March</item> <item>April</item> <item>May</item> <item>June</item> <item>July</item> <item>August</item> <item>September</item> <item>October</item> <item>November</item> <item>December</item> </string-array> </resources>

There are two ways to include the suggestions in the application that will be displayed to the user -

• Hard code the string in the application code
• Use a string array resource from an XML file

Instead of hard coding we will adopt the second method as it keeps the design and code part of the application separate. The string array with the name months_array contains the list of all the months and we will use this to display our suggestion list.

Add the following code to res/layout/main.xml XML file -

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/tip" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Month" /> <AutoCompleteTextView android:id="@+id/autocomplete_month" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginLeft="5dp"/> </LinearLayout>

Our application consists of two textviews. The first one displays help text and the second one uses AutoCompleteTextView, an in-built Android class, which provides an editable text view that shows completion suggestions automatically while the user is typing. The list of suggestions is displayed in a drop down menu from which the user can choose an item to replace the content of the edit box with.

Finally add the following code to AutoComplete.java -

package com.botskool.AutoComplete; import android.app.Activity; import android.os.Bundle; import android.widget.ArrayAdapter; import android.widget.AutoCompleteTextView; public class AutoComplete extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); /**Capture the AutoCompleteTextView widget*/ AutoCompleteTextView textView = (AutoCompleteTextView) findViewById(R.id.autocomplete_month); /**Get the list of the months*/ String[] months = getResources().getStringArray(R.array.months_array); /**Create a new ArrayAdapter and bind list_item.xml to each list item*/ ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.list_item, months); /**Associate the adapter with textView*/ textView.setAdapter(adapter); } }

We create a new object of the AutoCompleteTextView class and bind with the layout by using function findViewById(int). Next we store the list of months in a string array named months from strings.xml. Also we create a new ArrayAdapter object and initialize it to bind the list_item.xml layout to each list item in the months string array. Finally, we call setAdapter() to associate the adapter with the AutoCompleteTextView.

Thats it! Now compile and run the Android application. A screenshot is shown below.