AutoCompleteTextView Tutorial

WHAT IS AUTOCOMPLETETEXTVIEW

An editable text view that shows completion suggestions automatically while 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.

The drop down can be dismissed at any time by pressing the back key or, if no item is selected in the drop down, by pressing the enter/dpad center key.

The list of suggestions is obtained from a data adapter and appears only after a given number of characters defined by the threshold.

AUTOCOMPLETETEXTVIEW WITH ARRAYADAPTER

public class CountriesActivity extends Activity {
protected void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.countries);

ArrayAdapter adapter = new ArrayAdapter(this,
android.R.layout.simple_dropdown_item_1line, COUNTRIES);
AutoCompleteTextView textView = (AutoCompleteTextView)
findViewById(R.id.countries_list);
textView.setAdapter(adapter);
}

private static final String[] COUNTRIES = new String[] {
“Belgium”, “France”, “Italy”, “Germany”, “Spain”
};
}

AUTOCOMPLETETEXTVIEW WITH CUSTOM ADAPTER

We are going to develop a autocompletetextview which shows suggestions from a webservice using a custom adapter. Let’s take a real life example of a mutual funds website. This website gives you the net asset value(NAV) of various mutual fund houses. We’are going to develop the first field out of the three i.e select mutual fund houses.

STEP-1

Suppose the webservice sends the response in the following way. Here, data is a JSONArray consisting of many JSONObjects which contains the id of the fund house and the name of the fund house. We need to create a custom class which contains these two values. For that, create a new Class and name it MutualFund_CustomClass.

{
“status”: “ok”,
“message”: “success”,
“data”: [
{
“fundid”: “1”,
“fundname”: “Axis Mutual Fund”
},
{
“fundid”: “2”,
“fundname”: “Baroda Pioneer Mutual Fund”
},
{
“fundid”: “3”,
“fundname”: “Birla Sun Life Mutual Fund”
},
{
“fundid”: “24”,
“fundname”: “BNP Paribas Mutual Fund”
},
{
“fundid”: “4”,
“fundname”: “BOI AXA Mutual Fund”
},
{
“fundid”: “5”,
“fundname”: “Canara Robeco Mutual Fund”
},
{
“fundid”: “25”,
“fundname”: “DHFL Pramerica Mutual Fund”
},
{
“fundid”: “6”,
“fundname”: “DSP BlackRock Mutual Fund”
},
{
“fundid”: “7”,
“fundname”: “Edelweiss Mutual Fund”
},
{
“fundid”: “8”,
“fundname”: “Escorts Mutual Fund”
},
{
“fundid”: “9”,
“fundname”: “Franklin Templeton Mutual Fund”
},
{
“fundid”: “10”,
“fundname”: “HDFC Mutual Fund”
},
{
“fundid”: “26”,
“fundname”: “HSBC Mutual Fund”
},
{
“fundid”: “11”,
“fundname”: “ICICI Prudential Mutual Fund”
},
{
“fundid”: “12”,
“fundname”: “IDBI Mutual Fund”
},
{
“fundid”: “13”,
“fundname”: “IDFC Mutual Fund”
},
{
“fundid”: “40”,
“fundname”: “IIFCL Mutual Fund (IDF)”
},
{
“fundid”: “37”,
“fundname”: “IIFL Mutual Fund”
},
{
“fundid”: “41”,
“fundname”: “IL&FS Mutual Fund (IDF)”
},
{
“fundid”: “36”,
“fundname”: “Indiabulls Mutual Fund”
},
{
“fundid”: “27”,
“fundname”: “Invesco Mutual Fund”
},
{
“fundid”: “14”,
“fundname”: “JM Financial Mutual Fund”
},
{
“fundid”: “15”,
“fundname”: “Kotak Mahindra Mutual Fund”
},
{
“fundid”: “28”,
“fundname”: “L&T Mutual Fund”
},
{
“fundid”: “16”,
“fundname”: “LIC Mutual Fund”
},
]
}

Put the following code for your MutualFund_CustomClass.

STEP-2

Put the following code inside the MainAcitivity Class. Inside onCreate(), we have instantiated a Arraylist variable “mSuggestionArrayList” which holds the MutualFund_CustomClass objects. After that, we are calling a webservice loadSuggestions(mSuggestionArrayList) which loads the data from the webservice into mSuggestionArrayList. For network transactions, we have used my custom VolleyClass and VolleyResponseListener. Please read my blog which explains about VolleyClass. Don’t forget to replace the webservice URL and jsonObject in the loadSuggestions(mSuggestionArrayList) method.

Here’s the layout of MainActivity. Name it activity_main.xml

STEP-3

Now, we are going to create MutualFund_CustomAdapter Class which extends BaseAdapter and implements Filterable. Here’s is the code.

LAYOUT OF ADAPTER CLASS

mutual_fund_list_row.xml

In the above code, MutualFund_CustomAdapter class has one constructor MutualFund_CustomAdapter(Context context, List originalList). So, when we instantiate this class by calling new MutualFund_CustomAdapter(Context context, List originalList), our Activity becomes the context and the mSuggestionArrayList which contains mutual fund data from webservice becomes the original list.

Inside getView() method, we have inflated the layout which we want to use for showing the suggestions.

For showing suggestions, we need to create a CustomFilter class which extends Filter Class and override the following methods:

(i) performFiltering(CharSequence constraint): This method gets called when user starts typing on AutoCompleteTextView. As the user types, the character sequence is noted and passed to this method. Inside this method, we check if the original list contains the letters typed by the user. If yes, we add that name to the suggestions list, create a new FilterResults instance and pass the list to publishResults(CharSequence constraint, FilterResults results) method. For example, if a user types letter “i” on the AutoCompleteTextView, all the fund names which contains “i” would be added to the suggestions list and returned to publishResults(CharSequence constraint, FilterResults results) method.

(ii) publishResults(CharSequence constraint, FilterResults results): This method is used for publishing the results on the suggestion drop-down.

That’s it. Run your app and see its working.

Issues? Please comment below. Thank you 🙂

DOWNLOAD FULL SOURCE CODE

admin Author

Leave a Reply

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