Monday, December 24, 2012

Android beginner tutorial: Part 30 - MultiAutoCompleteTextView widget

In this part we'll learn about the MultiAutoCompleteTextView widget.

The MultiAutoCompleteTextView class is an extension of AutoCompleteTextView, which was covered in the previous tutorial. The main difference is that with MultiAutoCompleteTextView, you are able to make the suggestions be searched in more than one substrings in a single item.

For example, it is possible to make it so the text that is typed by the user is compared to both first and last names of each contact in the contacts array, instead of just comparing the whole string.

The layout doesn't change much. You only need to change the AutoCompleteTextView widget to MultiAutoCompleteTextView:

<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" >
    
    <MultiAutoCompleteTextView
        android:id="@+id/autocomplete"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
    
</LinearLayout>

To split an item into multiple substrings, we are going to use a comma. This is done by a tokenizer class. There's a pre-built class for splitting the items by commas called MultiAutoCompleteTextView.CommaTokenizer.

Firstly, go to the MainActivity.java class file and edit the contacts array so that each first name is separated from the last name using a comma:

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, we declare our MultiAutoCompleteTextView object and set an adapter. Then use the setTokenizer() function to apply a new anonymous CommaTokenizer to the widget:

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

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

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.MultiAutoCompleteTextView;

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);

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

@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;
}

}

It works like this:



Thanks for reading!

No comments:

Post a Comment