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>[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>
0 0 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1 Comment
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Fizal Ali Shaik
Fizal Ali Shaik

can’t we remove the coma( , ) between multi_auto_complete_textview

1
0
Would love your thoughts, please comment.x
()
x