Android Multi AutoComplete TextView Example

android.widget.MultiAutoCompleteTextView class is used to implement multiple auto complete input text control in android application. It behaves similar to android.widget.AutoCompleteTextView, the difference is that it can let you input text with auto complete function multiple times. Each text in the input text box is separated by a specified token string.

1. Example Overview.

First let us look at the example screen effect.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/WVoMC_LspCc

Second let us look at the project file structure. The core files are activity_multi_auto_complete_text_view.xml, MultiAutoCompleteTextViewActivity.java, colors.xml, strings.xml

2. activity_multi_auto_complete_text_view.xml

This layout xml file configured a lot of android.widget.MultiAutoCompleteTextView attributes, below two should be noticed.

1. hint : This attribute’s value is the default text displayed in the input text box, it will be deleted when user input the first character.
2. gravity : This attribute’s value decide how the user input text align in the input text box. It’s value can be top, bottom, left, right, center or their combination (top|left) etc.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.dev2qa.example.MultiAutoCompleteTextViewActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        tools:layout_editor_absoluteY="8dp"
        tools:layout_editor_absoluteX="8dp">

        <MultiAutoCompleteTextView
            android:id="@+id/multiAutoCompleteTextViewEmail"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:completionThreshold="1"
            android:hint="@string/multi_auto_complete_text_view_email"
            android:gravity="center"
            android:textColorHint="@color/colorYellow"
            android:textSize="20dp"
            android:textStyle="bold"/>

        <Button
            android:id="@+id/buttonShowInputEmail"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/multi_auto_complete_text_view_show_input_email" />
    </LinearLayout>
</android.support.constraint.ConstraintLayout>

3. MultiAutoCompleteTextViewActivity.java

Please Note: You must invoke set MultiAutoCompleteTextView’s setTokenizer() method to set text separator, otherwise the control dose not take effect. 

package com.dev2qa.example;

import android.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.MultiAutoCompleteTextView;
import android.widget.MultiAutoCompleteTextView.CommaTokenizer;
import android.widget.Toast;

public class MultiAutoCompleteTextViewActivity extends AppCompatActivity {

    MultiAutoCompleteTextView multiAutoCompleteTextView;

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

        // Find the MultiAutoCompleteTextView object.
        multiAutoCompleteTextView = (MultiAutoCompleteTextView)findViewById(R.id.multiAutoCompleteTextViewEmail);

        // Set multiAutoCompleteTextView related attribute value in java code.
        multiAutoCompleteTextView.setPadding(15,15,15,15);
        multiAutoCompleteTextView.setBackgroundColor(getResources().getColor(R.color.colorBlue));
        multiAutoCompleteTextView.setTextColor(getResources().getColor(R.color.colorGreen));

        // Get the string array from strings.xml file.
        String emailArr[] = getResources().getStringArray(R.array.email_array);

        // Create a new data adapter object.
        ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_dropdown_item_1line, emailArr);

        // Connect the data source with AutoCompleteTextView through adapter.
        multiAutoCompleteTextView.setAdapter(arrayAdapter);

        // Must set tokenizer for MultiAutoCompleteTextView object, otherwise it will not take effect.
        multiAutoCompleteTextView.setTokenizer(new CommaTokenizer());

        Button showEmailBtn = (Button)findViewById(R.id.buttonShowInputEmail);
        showEmailBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String userInputEmail = multiAutoCompleteTextView.getText().toString();

                // Create an AlertDialog object.
                AlertDialog alertDialog = new AlertDialog.Builder(MultiAutoCompleteTextViewActivity.this).create();

                // Set prompt message.
                alertDialog.setMessage(getResources().getString(R.string.show_input_dialog_label) + " " + userInputEmail);

                // Show the alert dialog.
                alertDialog.show();
            }
        });
    }
}

4. colors.xml

<resources>
    <color name="colorYellow">#fff200</color>
    <color name="colorGreen">#00dd12</color>
    <color name="colorBlue">#000bdd</color>
</resources>

5. strings.xml

<resources>
    <string name="multi_auto_complete_text_view_email">Input multiple email address you want to contact.</string>
    <string name="multi_auto_complete_text_view_show_input_email">Show Input Email.</string>
    <string name="show_input_dialog_label">Your Input is :</string>

    <string-array name="email_array">
        <item>[email protected]</item>
        <item>[email protected]</item>
        <item>[email protected]</item>
        <item>[email protected]</item>
        <item>[email protected]</item>
        <item>[email protected]</item>
        <item>[email protected]</item>
        <item>[email protected]</item>
    </string-array>
</resources>

6. AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.dev2qa.example">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity android:name=".MultiAutoCompleteTextViewActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>