Android Multi AutoComplete TextView Example

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

1. Example Overview.

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

Now 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.

./
├── app
│   ├── build.gradle
│   ├── proguard-rules.pro
│   └── src
│       ├── main
│       │   ├── AndroidManifest.xml
│       │   ├── java
│       │   │   └── com
│       │   │       └── dev2qa
│       │   │           └── example
│       │   │               ├── MultiAutoCompleteTextViewActivity.java
│       │   ├── res
│       │   │   ├── layout
│       │   │   │   ├── activity_multi_auto_complete_text_view.xml
│       │   │   ├── values
│       │   │   │   ├── 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.
hint: This attribute’s value is the default text displayed in the input text box, it will be deleted when the user inputs the first character.

gravity: This attribute’s value decides how the user input text aligns 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 MultiAutoCompleteTextView‘s setTokenizer() method to set text separator, otherwise the control does 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

colors.xml

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

5. strings.xml

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

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>