MultiAutoCompleteTextView With Example In Android Studio

In Android, MultiAutoCompleteTextView is an editable TextView extends AutoCompleteTextView that can show the complete suggestion for the sub-string of a text allowing user to quickly select instead of typing whole. An AutoCompleteTextView only offers suggestion about the whole sentence and a MultiAutoCompleteTextView offers suggestion for every token in the sentence. We can specify what is the delimiter between tokens.

Important Note: One most important difference between MultiAutoCompleteTextView and AutoCompleteTextView is that AutoCompleteTextView can hold or select only single value at single time but MultiAutoCompleteTextView can hold multiple string words value at single time. These all values are separated by comma(,).

Basic MultiAutoCompleteTextView code in XML:

<MultiAutoCompleteTextView
android:id="@+id/simpleMultiAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="This Is A MultiAutoCompleteTextView" />

Adapter Used To Fill Data In MultiAutoCompleteTextView

To display the array content in a MultiAutoCompleteTextView we need to implement Adapter. In MultiAutoCompleteTextView, since we mainly display text values so we use ArrayAdapter for that. Below is the description of an ArrayAdapter.

ArrayAdapter In Android:

Whenever we have a list of single type of items which is backed by an array, we can use ArrayAdapter. For instance, list of phone contacts, countries or names.

ArrayAdapter code in Android:

ArrayAdapter(Context context, int resource, int textViewResourceId, T[] objects)

In above code snippet we show the implementation of a ArrayAdapter. These 4 parameters are used to show the list of elements in MultiAutoCompleteTextView which are already described in ArrayAdapter tutorial.

Retrieving the Value From MultiAutoCompleteTextView In Java Class:

Below is the example code where we retrieve the value from a MultiAutoCompleteTextView in Java class.

// initiate a MultiAutoCompleteTextView
MultiAutoCompleteTextView simpleMultiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.simpleMultiAutoCompleteTextView);
String MultiAutoCompleteTextViewValue = simpleMultiAutoCompleteTextView.getText().toString(); // retrieve  a value from MultiAutoCompleteTextView

Important Methods Of MultiAutoCompleteTextView:

Let’s we discuss some important methods of MultiAutoCompleteTextView that that may be called in order to manage the MultiAutoCompleteTextView.

1. setTokenizer(MultiAutoCompleteTextView.Tokenizer t):  This method sets the Tokenizer that will be used to determine the relevant range of the text where the user is typing. CommaTokenizer is used to set the tokenozer that distinguish the various substrings by comma.

Below we set the CommaTokenizer for the MultiAutoCompleteTextView

// initiate a MultiAutoCompleteTextView
MultiAutoCompleteTextView simpleMultiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.simpleMultiAutoCompleteTextView);
// set tokenizer that distinguish the various substrings by comma
simpleMultiAutoCompleteTextView.setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer());

2. setThreshold(int threshold): 

This method is used to set threshold value that help us to start the searching from a specific character. In this we set int type value used to specify the threshold . Suppose if set 1 value for threshold then on the time of typing searching is start from first character.

Below we set 2 value for threshold that helps us to start the searching from second character.

// initiate a MultiAutoCompleteTextView
MultiAutoCompleteTextView simpleMultiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.simpleMultiAutoCompleteTextView);
// set threshold value 2 that help us to start the searching from second character
simpleMultiAutoCompleteTextView.setThreshold(2);

Attributes of MultiAutoCompleteTextView:

Now let’s  we discuss some important attributes that help us to configure a MultiAutoCompleteTextView in xml file.

1. id: This attribute is used to uniquely identify a MultiAutoCompleteTextView.

<MultiAutoCompleteTextView
android:id="@+id/simpleMultiAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="This Is A MultiAutoCompleteTextView" /> <!--  id of a MultiAutoCompleteTextView that is used to uniquely identify it -->

2. gravity: This is an optional attribute which is used to control the alignment of the text like left, right, center, top, bottom, center_vertical, center_horizontal etc.

Below we set the right gravity for text of a MultiAutoCompleteTextView .

<MultiAutoCompleteTextView
android:id="@+id/simpleMultiAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:text="AbhiAndroid.Com" /> <!--  right gravity for the displayed text of MultiAutoCompleteTextView -->

3. text: This attribute is used to set the text in a MultiAutoCompleteTextView. We can set the text in xml as well as in the java class.

In the above 2nd example we also used text attribute.

Setting text In MultiAutoCompleteTextView In Java class:

MultiAutoCompleteTextView simpleMultiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.simpleMultiAutoCompleteTextView);
simpleMultiAutoCompleteTextView.setText("AbhiAndroid"); // set text in a MultiAutoCompleteTextView

4. hint: This attribute is used to set the hint that what should you enter in this MultiAutoCompleteTextView. Whenever user start to type in MultiAutoCompleteTextView the hint will automatically disappear.

Below we set the hint of a MultiAutoCompleteTextView .

<MultiAutoCompleteTextView
android:id="@+id/simpleMultiAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Enter Your Text Here" /><!-- set hint in MultiAutoCompleteTextView -->

Setting hint in MultiAutoCompleteTextView In Java class:

MultiAutoCompleteTextView simpleMultiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.simpleMultiAutoCompleteTextView);
simpleMultiAutoCompleteTextView.setHint("Enter Your Text Here"); // set hint in a MultiAutoCompleteTextView

5. textColor: This attribute is used to set the text color of a MultiAutoCompleteTextView. Color value is in the form of “#argb”, “#rgb”, “#rrggbb”, or “#aarrggbb”.

Below we set the red color for the displayed text of a MultiAutoCompleteTextView.

<MultiAutoCompleteTextView
android:id="@+id/simpleMultiAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="AbhiAndroid.Com"
android:textColor="#f00"/>
<!-- red color for the displayed text of a MultiAutoCompleteTextView -->

Setting textColor In MultiAutoCompleteTextView In Java class:

MultiAutoCompleteTextView simpleMultiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.simpleMultiAutoCompleteTextView);
simpleMultiAutoCompleteTextView.setTextColor(Color.RED); // red color for the displayed text of a MultiAutoCompleteTextView

6. textColorHint: This attribute is used to set the color for displayed hint text.

Below we set the blue color for displayed hint of a MultiAutoCompleteTextView.

<MultiAutoCompleteTextView
android:id="@+id/simpleMultiAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Enter Your Text Here"
android:textColorHint="#00f"/>
<!-- blue color for displayed hint text of a MultiAutoCompleteTextView -->

Setting textColorHint In MultiAutoCompleteTextView In Java class:

MultiAutoCompleteTextView simpleMultiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.simpleMultiAutoCompleteTextView);
simpleMultiAutoCompleteTextView.setHintTextColor(Color.BLUE); // blue color for the displayed hint text of a MultiAutoCompleteTextView

7. textSize: This attribute is used to set the size of text of a MultiAutoCompleteTextView. We can set the text size in sp(scale independent pixel) or dp(density pixel).

Below we set the 25sp size for the text of a MultiAutoCompleteTextView.

<MultiAutoCompleteTextView
android:id="@+id/simpleMultiAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="AbhiAndroid.Com"
android:textColor="#f00"
android:textSize="25sp"/><!-- 25 sp text size of a  MultiAutoCompleteTextView -->

Setting textSize In MultiAutoCompleteTextView  In Java class:

MultiAutoCompleteTextView simpleMultiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.simpleMultiAutoCompleteTextView);
simpleMultiAutoCompleteTextView.setTextSize(25); // 25 sp text size of a MultiAutoCompleteTextView

8. textStyle: This attribute is used to set the text style of a MultiAutoCompleteTextView. The possible text styles are bold, italic and normal. If we need to use two or more styles for a MultiAutoCompleteTextView then “|” operator is used for that.

Below we set the bold style for the displayed text of a MultiAutoCompleteTextView.

<MultiAutoCompleteTextView
android:id="@+id/simpleMultiAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="AbhiAndroid.Com"
android:textColor="#f00"
android:textSize="25sp"
android:textStyle="bold"/><!-- bold style for the displayed text of a MultiAutoCompleteTextView -->

9. background: This attribute is used to set the background of a MultiAutoCompleteTextView. We can set color or drawable(image or custom drawable xml) in the background of a MultiAutoCompleteTextView.

Below we set the green color for the background and red color for the displayed text of a MultiAutoCompleteTextView.

<MultiAutoCompleteTextView
android:id="@+id/simpleMultiAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="AbhiAndroid.Com"
android:textColor="#f00"
android:textSize="25sp"
android:textStyle="bold"
android:background="#0f0"/><!-- green background color of a MultiAutoCompleteTextView -->

Setting Background In MultiAutoCompleteTextView In Java class:

MultiAutoCompleteTextView simpleMultiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.simpleMultiAutoCompleteTextView);
simpleMultiAutoCompleteTextView.setBackgroundColor(Color.GREEN); // green color for the background of a MultiAutoCompleteTextView

10. padding: This attribute is used to set the padding from left, right, top or bottom side of a MultiAutoCompleteTextView.

• paddingRight: set the padding from the right side of a MultiAutoCompleteTextView.
• paddingLeft: set the padding from the left side of a MultiAutoCompleteTextView.
• paddingTop: set the padding from the top side of a MultiAutoCompleteTextView.
• paddingBottom: set the padding from the bottom side of a MultiAutoCompleteTextView.
• Padding: set the padding from the all side’s of a MultiAutoCompleteTextView.

Below we set the 40dp padding from left side of a MultiAutoCompleteTextView.

<MultiAutoCompleteTextView
android:id="@+id/simpleMultiAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="AbhiAndroid.Com"
android:textColor="#f00"
android:textSize="25sp"
android:textStyle="bold"
android:background="#0f0"
android:paddingLeft="40dp"/>
<!-- 40dp padding from left side of a MultiAutoCompleteTextView -->

11. drawableBottom, drawableTop, drawableRight And drawableLeft: These attribute draw the drawable below, top, right and left of the text of MultiAutoCompleteTextView.

Below we set the icon to the Top of the text of a MultiAutoCompleteTextView using drawableTop. In the similar way you can try for other three attribute yourself.

First save image of ic_launcher name in drawable folder if it is not present and use the below code.

<MultiAutoCompleteTextView
android:id="@+id/simpleMultiAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#0f0"
android:drawableTop="@drawable/ic_launcher"
android:text="AbhiAndroid.Com"
android:gravity="center"
android:textColor="#f00"
android:textSize="25sp"
android:textStyle="bold" />
<!-- drawableTop of a MultiAutoCompleteTextView -->

MultiAutoCompleteTextView Example In Android Studio

Below is the example of MultiAutoCompleteTextView in which we display a MultiAutoCompleteTextView with suggestion list of android version names. To fill the data in this list we implement an array adapter. We set threshold value 1 that helps us to start the searching from first character.

Below you can download complete project code, final output and step by step explanation of the example:

Download Code ?

Step 1: Create a new project and name it MultiAutoCompleteTextView

Step 2: Open res -> layout ->activity_main.xml (or) main.xml and add following code :

In this step we open an xml file and add the code for displaying a MultiAutoCompleteTextView by using its different attributes.

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">


<!--  MultiAutoCompleteTextView In Android -->
<MultiAutoCompleteTextView
android:id="@+id/simpleMultiAutoCompleteTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#0f0"
android:gravity="center"
android:hint="Enter Your Text Here"
android:padding="10dp"
android:textColor="#f00"
android:textSize="20sp"
android:textStyle="bold" />

</RelativeLayout>

Step 3: Open   src -> package -> MainActivity.java

In this step we open MainActivity and add the code to initiate the MultiAutoCompleteTextView and then add the data to suggestion list using an ArrayAdapter. In this we also set threshold value 1 that helps us to start the searching from first character.

package example.abhiandroid.multiautocompletetextviewexample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ArrayAdapter;
import android.widget.MultiAutoCompleteTextView;

public class MainActivity extends AppCompatActivity {

String[] androidVersionNames = {"Aestro", "Blender", "CupCake", "Donut", "Eclair", "Froyo", "Gingerbread", "HoneyComb", "IceCream Sandwich", "Jellibean", "Kitkat", "Lollipop", "MarshMallow"};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// initiate a MultiAutoCompleteTextView
MultiAutoCompleteTextView simpleMultiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.simpleMultiAutoCompleteTextView);
// set adapter to fill the data in suggestion list
ArrayAdapter<String> versionNames = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, androidVersionNames);
simpleMultiAutoCompleteTextView.setAdapter(versionNames);

// set threshold value 1 that help us to start the searching from first character
simpleMultiAutoCompleteTextView.setThreshold(1);
// set tokenizer that distinguish the various substrings by comma
simpleMultiAutoCompleteTextView.setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer());
}
}

Output:

Now run the App and you will see MultiAutoCompleteTextView. Here enter any character and corresponding Android version to that character will appear. Select it and do the same with other Android version. You can see it can hold more than one value which was not possible with AutoCompleteTextView.

DOWNLOAD THIS FREE eBook!

This free eBook will help you master the learning of Android App Development in Android Studio!

Name

Email

Subscribe & Download eBook Now >>