Day 8: AutoComplete Text View in Android

Introduction

You have often encountered auto-complete text boxes in mobile applications and websites. Usually, they are made to show suggestions for what we actually want to write. In this context, you can say Visual Studio's Intellisense is feasible to auto-compelete you syntax before you do.

Whenever you search for someone in Facebook, it shows you suggestions.

And Google Search itself is a great example of an auto-complete search box.

 

This article shows how to create a demo-app for an auto-complete text view.

Procedure

• Step 1

Create a successful Android project and add an Auto Complete Text View from the Palette's Text Field.

<code>

<AutoCompleteTextView
        android:id="@+id/autoCompleteTextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:ems="10"
        android:text="" >

</code>

And, it will look like something as in the following:

Here, I have added an extra TextView (“Suggest Your Mobile OS”).

• Step 2

 We will now code the Java part. Here, we will import the desired packages.

<code> 

import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;

</code>

• Step 3

Now, we need a string array to populate the AutoComplete Text View. Fot this, we have used a string array that consits of the various platform names.

<code>

String[] mobileOs={"Android", "Windows Phone", "Apple iOS", "Blackberry", "JOLLA", "Firefox OS", "Symbian", "Manroid", "Ubuntu OS"};

</code>

• Step 4

After doing all this, we will create an ArrayAdapter instance and then bind this with an AutoComplete TextView instance.

So, let's do it.

<code>

// Create Instance of ArrayAdapter and bind it with mobilOS array.
ArrayAdapter<String> adapter =new ArrayAdapter<String>(MainActivity.this, android.R.layout.select_dialog_item, mobileOs);

// Link the Auto Complete Text View
AutoCompleteTextView autoText =(AutoCompleteTextView) findViewById(R.id.autoCompleteTextView1);
autoText.setThreshold(1); // Start From 1st Character
autoText.setAdapter(adapter);

</code>

Explanation

In the ArrayAdapter's instance we are binding with a mobile OS string array and then we linked that array adapter to an auto complete text box.
After Rendering, it will look like,

Conclusion

If you experience any kind of problem or red line issue then always go for the Quick Fix (Ctrl+1) since it will definitely help you.

If however it doesn't work then go for the solution file that I have attached.