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

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

1. This layout XML file configured a lot of android.widget.MultiAutoCompleteTextView attributes, below two should be noticed.
2. 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.
3. 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

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

1. colors.xml

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

5. strings.xml

1. 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>rain[email protected]</item>
           <item>[email protected]</item>
       </string-array>
   </resources>

6. AndroidManifest.xml

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