Android Auto Complete

If you want to get suggestions , when you type in an editable text field , you can do this via AutoCompleteTextView. It provides suggestions automatically when 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.

In order to use AutoCompleteTextView you have to first create an AutoCompletTextView Field in the xml. Its syntax is given below.

<AutoCompleteTextView
      android:id="@+id/autoCompleteTextView1"
      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" >

After that , you have to get a reference of this textview in java. Its syntax is given below.

private AutoCompleteTextView actv;
actv = (AutoCompleteTextView) findViewById(R.id.autoCompleteTextView1); 

The the next thing you need to do is to specify the list of suggestions items to be dispalyed. You can specify the list items as a string array in java or in strings.xml. Its syntax is given below.

   String[] countries = getResources().
   getStringArray(R.array.list_of_countries);
   ArrayAdapter adapter = new ArrayAdapter
   (this,android.R.layout.simple_list_item_1,countries);
   actv.setAdapter(adapter);

The array adapter class is responsible for displaying the data as list in the suggestion box of the text field. The setAdapter method is used to set the adapter of the autoCompleteTextView. Apart from these methods , the other methods of AutoCompelte are listed below.

Sr.No	Method & description
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 anchored to.
4	getListSelection() This method returns the position of the dropdown view selection, if there is one
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.

Example

The below example demonstrates the use of AutoCompleteTextView class. It crates a basic application that allows you to type in and it displays suggestions on your device.

To experiment with this example , you need to run this on an actual device or in an emulator.

Steps	Description
1	You will use Eclipse IDE to create an Android application and name it as AutoComplete under a package com.example.autocomplete. While creating this project, make sure you Target SDK and Compile With at the latest version of Android SDK to use higher levels of APIs.
2	Modify src/MainActivity.java file to add AutoCompleteTextView code
3	Modify layout XML file res/layout/activity_main.xml add any GUI component if required.
4	Modify res/values/string.xml file and add necessary string components.
5	Modify AndroidManifest.xml to add necessary permissions.
6	Run the application and choose a running android device and install the application on it and verify the results.

Here is the content of src/com.example.autocomplete/MainActivity.java

package com.example.autocomplete;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.MultiAutoCompleteTextView;

public class MainActivity extends Activity {

   private AutoCompleteTextView actv;
   private MultiAutoCompleteTextView mactv;

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


   String[] countries = getResources().
   getStringArray(R.array.list_of_countries);
   ArrayAdapter adapter = new ArrayAdapter
   (this,android.R.layout.simple_list_item_1,countries);


   actv = (AutoCompleteTextView) findViewById(R.id.autoCompleteTextView1);
   mactv = (MultiAutoCompleteTextView) findViewById
   (R.id.multiAutoCompleteTextView1);

   actv.setAdapter(adapter);
   mactv.setAdapter(adapter);

   mactv.setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer());


   }

   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
      // Inflate the menu; this adds items to the action bar if it is present.
      getMenuInflater().inflate(R.menu.main, menu);
      return true;
   }

}

Here is the content of 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:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   tools:context=".MainActivity" >

   <AutoCompleteTextView
      android:id="@+id/autoCompleteTextView1"
      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" >

      <requestFocus />
   </AutoCompleteTextView>

   <MultiAutoCompleteTextView
      android:id="@+id/multiAutoCompleteTextView1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignLeft="@+id/autoCompleteTextView1"
      android:layout_centerVertical="true"
      android:ems="10" />

   <TextView
      android:id="@+id/textView1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentLeft="true"
      android:layout_alignParentTop="true"
      android:text="@string/auto_complete"
      android:textAppearance="?android:attr/textAppearanceMedium" />

   <TextView
      android:id="@+id/textView2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_above="@+id/multiAutoCompleteTextView1"
      android:layout_alignParentLeft="true"
      android:layout_marginBottom="19dp"
      android:text="@string/multi_auto_complete"
      android:textAppearance="?android:attr/textAppearanceMedium" />

</RelativeLayout>

Here is the content of Strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

   <string name="app_name">AutoComplete</string>
   <string name="action_settings">Settings</string>
   <string name="hello_world">Hello world!</string>
   <string name="auto_complete">AutoComplete</string>
   <string name="multi_auto_complete">Multi AutoComplete</string>
   <string-array name="list_of_countries">
      <item >USA</item>
      <item >Uk</item>
      <item >Canada</item>
      <item >Australia</item>
      <item >France</item>
      <item >Italy</item>
      <item >China</item>
      <item >Japan</item>
      <item >Spain</item>
      </string-array>

</resources>

Here is the content of AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.autocomplete"
   android:versionCode="1"
   android:versionName="1.0" >

   <uses-sdk
      android:minSdkVersion="8"
      android:targetSdkVersion="17" />

   <application
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
      <activity
         android:name="com.example.autocomplete.MainActivity"
         android:label="@string/app_name" >
         <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
      </activity>
   </application>

</manifest>

Let's try to run your Androidmanager application. I assume you have connected your AVD while doing environment setup. To run the app from Eclipse, open one of your project's activity files and click Run icon from the toolbar. Ecclipse will install this application in your AVD and your AVD will display following screen.

Now just type in the text view to see suggestions of the country. As i just type two two letters which areca, and it shows me suggestion of canada.

The multiAutoCompleteTextView demonstrates suggestions for not only a word but for whole text. As after writing first word , when i start writing the second word , it displays me the suggestions. This can be shown in the picture below.