Sunday, December 23, 2012

Android beginner tutorial: Part 29 - AutoCompleteTextView widget

Today we will learn about the usage of AutoCompleteTextView widget.

Surely you've encountered text fields with auto completion. They are typical text input boxes that bring out suggestions when you begin writing a word. There are 2 classes in Android SDK that have auto completion functionality - those are AutoCompleteTextView and MultiAutoCompleteTextView. In this tutorial we will learn about the first one.

The AutoCompleteTextView is an extension of the EditText class. It looks and works like a normal EditText input field, but, if provided with data, it displays suggestions as symbols are written in it.

In this example we are going to use an array of names as the data. Normally, you wouldn't do this in a real life application, but for example purposes it works.

Go to activity_main.xml layout file and add an AutoCompleteTextView object:

<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity" >
    
    <AutoCompleteTextView
        android:id="@+id/autocomplete"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
    
</LinearLayout>

Now go to the MainActivity.java class. First declare an array of names. I used a random name generator found online to generate some generic placeholder names:

final String[] contacts = {"Fernando Reigle","Lorrie Chamberland","Earlene Cully","Lorrie Down",
"Serena Adolph","Sofia Tilford","Tyrone Heiner","Mathew Betterton","Fernando Padula","Hugh Gassaway",
"Jamie Tiffin","Nelson Velazco","Liza Goudy","Christian Donahoo","Ted Baisley","Jessie Holte","Christian Corrao",
"Saundra Swoboda","Margery Canez","Lance Midyett","Jamie Burlew","Allyson Trudel","Tyrone Spofford"};

Then, in the onCreate() function, declare a value called autocomplete, which will refer to the AutoCompleteTextView in the layout. Then use the setAdapter() method of this object to apply a new adapter, which uses the contacts array as data. We're using android.R.layout.simple_dropdown_item_1line as the layout for each item in the dropdown menu of the autocomplete suggestions.

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

AutoCompleteTextView autocomplete = (AutoCompleteTextView)findViewById(R.id.autocomplete);
autocomplete.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_dropdown_item_1line, contacts));
}

Full code:

package com.kircode.codeforfood_test;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;

public class MainActivity extends Activity{

final String[] contacts = {"Fernando Reigle","Lorrie Chamberland","Earlene Cully","Lorrie Down",
"Serena Adolph","Sofia Tilford","Tyrone Heiner","Mathew Betterton","Fernando Padula","Hugh Gassaway",
"Jamie Tiffin","Nelson Velazco","Liza Goudy","Christian Donahoo","Ted Baisley","Jessie Holte","Christian Corrao",
"Saundra Swoboda","Margery Canez","Lance Midyett","Jamie Burlew","Allyson Trudel","Tyrone Spofford"};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

AutoCompleteTextView autocomplete = (AutoCompleteTextView)findViewById(R.id.autocomplete);
autocomplete.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_dropdown_item_1line, contacts));
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}

}

If you test the application now on an emulator or a device, it will look something like this when you start typing:



Thanks for reading!

No comments:

Post a Comment