AutoCompleteTextView Tutorial With Example In Android Studio

In Android, AutoCompleteTextView is a view i.e similar to EditText, except that it displays a list of completion suggestions automatically while the user is typing. A list of suggestions is displayed in drop down menu from which user can choose an item which actually replace the content of Editbox with that.

AutoCompleteTextView in Android
It is a subclass of EditText class so we can inherit all the properties of EditText in a AutoCompleteTextView.

AutoCompleteTextView code in XML:

<AutoCompleteTextView
android:id="@+id/simpleAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="This is an AutoCompleteTextView"/>

Using Array Adapter To Display Text Values In AutoCompleteTextView:

To display the Array content in an autocompletetextview we need to implement Adapter. In AutoCompleteTextView we mainly display text values so we use Array Adapter for that.

ArrayAdapter In Android:

ArrayAdapter is used when we need list of single type of items which is backed by an Array. For example, list of phone contacts, countries or names.

ArrayAdapter code:

ArrayAdapter(Context context, int resource, int textViewResourceId, T[] objects)

For more details on ArrayAdapter,parameter used and more details please read ArrayAdapter tutorial.


Retrieving the Value From AutoCompleteTextView In Java Class:

Below code retrieve the value from a AutoCompleteTextView in Java class.

AutoCompleteTextView simpleAutoCompleteTextView = (AutoCompleteTextView) findViewById(R.id.simpleAutoCompleteTextView);

String AutoCompleteTextViewValue = simpleAutoCompleteTextView.getText().toString();

Attributes of AutoCompleteTextView:

Now let’s  we discuss about the attributes that helps us to configure a AutoCompleteTextView in your xml file.

1. id: id is an attribute used to uniquely identify a text AutoCompleteTextView.

<AutoCompleteTextView
android:id="@+id/simpleAutoCompleteTextView"
android:layout_height="wrap_content"
android:layout_width="match_parent"/>

2. text: text attribute is used to set the text in a AutoCompleteTextView. We can set the text in XML as well as in the java class.

Below we set the text “Country” in a AutoCompleteTextView.

<AutoCompleteTextView
    android:id="@+id/simpleAutoCompleteTextView"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Country"/><!--display text "Country"-->

text in AutoCompleteTextView
3. gravity: The gravity attribute is an optional attribute which control the alignment of the text like left, right, center, top, bottom, center_vertical, center_horizontal etc.

Below we set the right gravity for text of a AutoCompleteTextView.

<AutoCompleteTextView
    android:id="@+id/simpleAutoCompleteTextView"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Country"
    android:gravity="right"/><!--right gravity for text-->

gravity in AutoCompleteTextView Android
Setting Text Of AutoCompleteTextView In Java class:

/*Add in Oncreate() funtion after setContentView()*/
AutoCompleteTextView autoCompleteTextView = (AutoCompleteTextView)findViewById(R.id.simpleAutoCompleteTextView);

//display text Country
autoCompleteTextView.setText("Country");

4. hint: hint attribute gives the hint to the user that what should he Enter in this AutoCompleteTextView. Whenever he start to type in AutoCompleteTextView the hint will automatically disappear.

<AutoCompleteTextView
android:id="@+id/simpleAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Enter Your Country Name Here" /><!--display hint-->

hint in AutoCompleteTextView in Android
Setting hint For AutoCompleteTextView In Java class:

/*Add in Oncreate() funtion after setContentView()*/
AutoCompleteTextView autoCompleteTextView = (AutoCompleteTextView)findViewById(R.id.simpleAutoCompleteTextView);

autoCompleteTextView.setHint("Enter Your Name Here");//display hint

5. textColor: This attribute set the color of a text in AutoCompleteTextView. Color value can be in the form of “#argb”, “#rgb”, “#rrggbb”, or “#aarrggbb”.

<AutoCompleteTextView
android:id="@+id/simpleAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Country"
android:textColor="#f00"/><!--red color for text-->

textColor in AutoCompleteTextView Android
Setting TextColor of AutoCompleteView Text In Java class:

/*Add in Oncreate() funtion after setContentView()*/
AutoCompleteTextView simpleAutoCompleteTextView=(AutoCompleteTextView)findViewById(R.id.simpleAutoCompleteTextView);

simpleAutoCompleteTextView.setTextColor(Color.RED);//red color for text

6. textColorHint: This attribute is used to set the color of displayed hint.

<AutoCompleteTextView
android:id="@+id/simpleAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Enter Your Name Here"
android:textColorHint="#0f0"/><!--green color for hint-->

textColorHint in AutoCompleteTextView Android
Setting Color to Hint Of AutoCompleteTextView In Java class:

/*Add in Oncreate() funtion after setContentView()*/
AutoCompleteTextView simpleAutoCompleteTextView=(AutoCompleteTextView)findViewById(R.id.simpleAutoCompleteTextView);

//green color for displayed hint
simpleAutoCompleteTextView.setHintTextColor(Color.green(0));

7. textSize: This attribute set the size of text in AutoCompleteTextView. We can set the text size in sp(scale independent pixel) or dp(density pixel).

<AutoCompleteTextView
android:id="@+id/simpleAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Country"
android:textSize="25sp" /><!--set the text size-->

textSize in AutoCompleteTextView Android
Setting Text Size In Java class:

/*Add in Oncreate() funtion after setContentView()*/
AutoCompleteTextView simpleAutoCompleteTextView=(AutoCompleteTextView)findViewById(R.id.simpleAutoCompleteTextView);
//set the text size
simpleAutoCompleteTextView.setTextSize(25);

8. textStyle: textStyle attribute is used to give text style of a AutoCompleteTextView. We can add bold, italic and normal style. If we want to use two or more styles for a AutoCompleteTextView then “|” operator is used for that.

<AutoCompleteTextView
    android:id="@+id/simpleAutoCompleteTextView"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Country"
    android:textSize="25sp"
    android:textStyle="bold|italic"/><!--bold and italic text style-->

textStyle in AutoCompleteTextView Android
9. background and padding: background attribute is used to set the background of a AutoCompleteTextView. We can set a color or a drawable in the background of a AutoCompleteTextView.

padding attribute is used to set the padding from left, right, top or bottom.

Below we set black color as background, white color as displayed hint and set 15dp padding from all the side’s for AutoCompleteTextView.

<AutoCompleteTextView
android:id="@+id/simpleAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#000"
android:hint="Enter Your Name Here"
android:padding="15dp"
android:textColorHint="#fff"
android:textStyle="bold|italic" />

Background and Padding in AutoCompleteTextView Android
Setting Background of AutoCompleteTextView In Java class:

/*Add in Oncreate() funtion after setContentView()*/
AutoCompleteTextView simpleAutoCompleteTextView=(AutoCompleteTextView)findViewById(R.id.simpleAutoCompleteTextView);

simpleAutoCompleteTextView.setBackgroundColor(Color.BLACK);//set black background color

AutoCompleteTextView Example in Android Studio:

In the example of AutoCompleteTextView we display a auto complete text view with suggestion list which include country list. To fill the data in country list we implement an Array Adapter. Below is the final output, download code and step by step tutorial:

Download Code

AutoCompleteTextView Example in Android Studio
Step 1: Create a new project and name it AutoCompleteTextViewExample.

Step 2: Open res -> layout -> activity_mail.xml (or) main.xml and add following code:

In this step we open an xml file and add the code for displaying an auto complete text view by using different attributes as we discussed earlier in this article.

<?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="abhiandroid.com.autocompletetextviewtexting.MainActivity">

    <AutoCompleteTextView
        android:id="@+id/simpleAutoCompleteTextView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#000"
        android:hint="Enter Your Name Here"
        android:padding="15dp"
        android:textColorHint="#fff"
        android:textStyle="bold|italic" />
</RelativeLayout>

Step 3: Open app -> package -> MainActivity.java

In this step we open MainActivity where we add the code to initiate the auto complete text view and then fill the data in the suggestion list by using an Array Adapter.

package example.abhiandriod.autocompletetextviewexample;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;

public class MainActivity extends AppCompatActivity {

    String[] countryNameList = {"India", "China", "Australia", "New Zealand", "England", "Pakistan"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //initiate an auto complete text view
        AutoCompleteTextView simpleAutoCompleteTextView = (AutoCompleteTextView) findViewById(R.id.simpleAutoCompleteTextView);
        ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, countryNameList);

        simpleAutoCompleteTextView.setAdapter(adapter);
        simpleAutoCompleteTextView.setThreshold(1);//start searching from 1 character
        simpleAutoCompleteTextView.setAdapter(adapter);   //set the adapter for displaying country name list
    }

    
}

Output:

Now start the AVD in Emulator and run the App. Type ‘i’ & it will show ‘India’ as suggestion, type ‘A’ & it will show ‘Australia’ as suggestion and so on. This is done using AutoCompleteTextView.

AutoCompleteTextView Example in Android Studio

  • Is this article helps you understand?
  • YES   NO

Leave a Reply

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



Subscribe and get access to the latest android tutorials, freebies, and lots more!

Android Developer Money eBook
One More Step...

Enter your email and I'll send you a FREE copy of Android Dev Dollaring eBook:
Send Me This eBook >>
We hate SPAM and promise to keep your email address safe.

Download Your Free Copy

Download this free eBook and Learn:
1. Different approach developer use to earn through App business
2. Learn how Android Developer can generate passive income
3. Job is not the only option and you can choose freelancing
Send Me This eBook >>
One More Step...

Enter your email and I'll send you a FREE copy of Android Dev Dollaring eBook:
Send Me This eBook >>
We hate SPAM and promise to keep your email address safe.