Learn Android UI

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

DOWNLOAD THIS FREE eBook!

This free eBook will help you master the learning of Android App Development in Android Studio!

6 thoughts on “AutoCompleteTextView Tutorial With Example In Android Studio”

  1. Why have you used this “android.R.layout.simple_list_item_1” in array adapter there is no such file named “simple_list_item_1”.

  2. sir I have a auto complete textview in my project . like your above example whenever i select India , after selecting india there should be open a activity like India which holds the flag of india in a image how can i do this
    thanks in andvance

Leave a Reply to Zakir Hussain Cancel reply

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



Download Free - Master Android App Development Sidebar

DOWNLOAD THIS FREE eBook!

This free eBook will help you master the learning of Android App Development in Android Studio!
close-link

Android Developer Facebook Group Free

Premium Project Source Code:




DOWNLOAD THIS FREE eBook!

This free eBook will help you master the learning of Android App Development in Android Studio!
close-link

DOWNLOAD THIS FREE eBook!

This free eBook will help you master the learning of Android App Development in Android Studio!
close-link

DOWNLOAD THIS FREE eBook!

This free eBook will help you master the learning of Android App Development in Android Studio!
close-link

See How AbhiAndroid Step By Step Video Training Helps You Master Android App Development

Video Training - Unlock step by step video training with new content added regularly. Develop Android Apps.
Android App Source Code - Get amazing Ecommerce, Food Ordering and Ultimate WebView source code with documentation.
GET ACCESS NOW
close-link

With a very poor revenue from selling source code files or using Google AdSense, we need your help to survive this website. Please contribute any amount you can afford
Pay
* Terms & Conditions Apply
close-link