Android AutoCompleteTextView Control

0
262

AutoCompleteTextView control is somewhat similar to the EditText control. The only difference is that an AutoCompleteTextView will display a list of suggestions for the user. These suggestions will appear in the form of a drop-down list whenever the user starts typing. The user then needs to select one of the options from the drop-down list to replace the existing content of the text field.

Also Read: Android EditText Control

Various AutoCompleteTextView Attributes
Here, we have tabulated a list of major attributes of AutoCompleteTextView control. In case, you want to view the complete list of the attributes and the related methods then visit the official Android document. The associated methods of this UI control are used to change the value of any of these attributes at the runtime.

S.No. Attribute Description
1 android:completionHint * This attribute accepts the hints to be displayed in the drop-down list.
2 android:completionHintView * This attribute helps in defining the hint of the view to be displayed on the drop-down menu.
3 android:completionThreshold * This attribute sets a fixed number of the characters for the visibility of the suggestions to be displayed in the drop-down list.
4 android:dropDownWidth * The width of the drop-down list is set according to the value passed.
5 android:dropDownHeight * The height of the drop-down list is set according to the value passed.
6 android:dropDownHorizontalOffset * The value decides the number of pixels by which the drop-down menu should be offset horizontally.
7 android:dropDownVerticalOffset * The value decides the number of pixels by which the drop-down menu should be offset vertically.
8 android:dropDownSelector * The value of this attribute acts as a selector in the drop-down list.
9 android:dropDownAnchor * This attribute accepts the value of the view to anchor it to the drop-down menu.
10 android:popupBackground * This attribute sets a background for the view.

 

Take a look at the following example for the creation of an Android application demonstrating AutoCompleteTextView control. Other than AutoCompleteTextView control, we will also be making use of the Linear layout.

Step 1: The creation of the Android application will take place on the Android Studio IDE. Name this app as GUIDemo3 and place it under the com.example.guidemo3 package. This step has already been explained in the Hello World Example chapter. 

Step 2: Modify the main activity file which is named as MainActivity.java. You can trace the src/com.example.guidemo3/ path to locate this file. In this file, you are required to add a click event. Other than that, this file already contains the fundamental lifecycle callback methods as shown in the below code.

package com.example.guidemo3;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView; 

public class MainActivity extends Activity
{
   AutoCompleteTextView autocomplete;
   String[] arr = { “Paries,France”, “PA,United States”,”Parana,Brazil”,
      “Padua,Italy”, “Pasadena,CA,United States”};   

   @Override
   protected void onCreate(Bundle savedInstanceState)
   {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      autocomplete = (AutoCompleteTextView)             
      findViewById(R.id.autoCompleteTextView1); 
      ArrayAdapter<String> adapter = new ArrayAdapter<String>  
      (this,android.R.layout.select_dialog_item, arr);
      autocomplete.setThreshold(2);
      autocomplete.setAdapter(adapter);
   }
} 

Step 3: Modify the activity_main.xml file. To find this file, you just need to follow the res/layout/ path. In here, you need to add the definitions of the required UI controls. 

<?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”
   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” >   

   <TextView
      android:id=”@+id/textView2″
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content”
      android:layout_alignParentTop=”true”
      android:layout_centerHorizontal=”true”
      android:layout_marginTop=”25dp”
      android:text=”@string/example_autocompletetextview” />      

   <AutoCompleteTextView
      android:id=”@+id/autoCompleteTextView1″
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content”
      android:layout_alignLeft=”@+id/textView2″
      android:layout_below=”@+id/textView2″
      android:layout_marginTop=”54dp”
      android:ems=”10″ />    
</RelativeLayout> 

Step 4: The strings.xml file also need some modifications. In this file, you will be adding the definitions of the required string constants. 

<?xml version=”1.0″ encoding=”utf-8″?>
<resources>
   <string name=”app_name”>GUIDemo3</string>
   <string name=”example_autocompletetextview”>Example showing AutoCompleteTextView<
   /string>
</resources>

Step 5: Let the AndroidManifest.xml remain file as it is.

<?xml version=”1.0″ encoding=”utf-8″?>
<manifest xmlns:android=”http://schemas.android.com/apk/res/android”
   package=”com.example.guidemo3″ >      
   <application
      android:allowBackup=”true”
      android:icon=”@drawable/ic_launcher”
      android:label=”@string/app_name”
      android:theme=”@style/AppTheme” >      

      <activity
         android:name=”com.example.guidemo3.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>

Step 6: Run your newly created GUIDemo3 Android application. For this, you need to have the already created AVD (which is created during the environment setup). Start Android Studio IDE and then open any of the activity files of your project. Go to the toolbar and click on the Run button. The Studio will start installing the application on your AVD. If the setup and the application are in place then the app will run successfully. The final output will then be displayed on the Emulator window.

For example, a user typed ‘pa’ then all the possible entries will be suggested to the user by the help of the AutoCompleteTextView control. You can see this in the below-provided screenshot.