How to add Material Design Chips to input field using autocomplete in android?

Question

I am trying to implement Material Design Chips with AutoCompleteTextView in order to add Contact Chips in an input field when the user clicks on an autocomplete suggestion (like Gmail Recipient Chips).

The desired behaviour can be seen on Material Design Website.

I decided to implement Chips alongside AutoCompleteTextView in my project from scratch, without external libraries. However, I didn't find any guide that shows how to do that.

I tried to create a Standalone ChipDrawable and then add it to AutoCompleteTextView as follows:

Layout

<chip
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:chipIcon="@drawable/ic_avatar_circle_24"
    android:text="@string/contact_name"/>

Java code

ChipDrawable chip = ChipDrawable.createFromResource(getContext(), R.xml.standalone_chip);

chip.setBounds(0, 0, chip.getIntrinsicWidth(), chip.getIntrinsicHeight());
DrawableMarginSpan span = new DrawableMarginSpan(chip, 25);

Editable text = editText.getText();
text.setSpan(span, 0, text.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

Unfortunately, it doesn't work as expected. First, I can't add more than on Chip. Furthermore, the Chip has a very strange style (height too big, not centered).

So how can I create Contact Chips like in Gmail or SMS apps with Material Design Input Chips? Perhaps someone knows some guide to implement it?

Thanks in advance, your help will be truly appreciated!

Answer 1

If you are looking for a Recipient Edit box just like Gmail Contact Edit box, here is an implementation video that should help you :

How to implement Chips with AutoCompleteTextView for Android

Assuming you have a contact data class, here is how to do that:

MultiAutoCompleteTextView setup

MultiAutoCompleteTextView contactAutoCompleteTextView = findViewById(R.id.recipient_auto_complete_text_view);
List<Contact> contacts = new ArrayList<Contact>() {{
    add(new Contact("Adam Ford", R.drawable.adam_ford));
    add(new Contact("Adele McCormick", R.drawable.adele_mccormick));
    add(new Contact("Alexandra Hollander", R.drawable.alexandra_hollander));
    add(new Contact("Alice Paul", R.drawable.alice_paul));
    add(new Contact("Arthur Roch", R.drawable.arthur_roch));
}};

contactAutoCompleteTextView.setAdapter(new ContactAdapter(this,
        R.layout.contact_layout, contacts));
contactAutoCompleteTextView.setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer());
// Minimum number of characters the user has to type before the drop-down list is shown
contactAutoCompleteTextView.setThreshold(1);
contactAutoCompleteTextView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
        Contact selectedContact = (Contact) adapterView.getItemAtPosition(i);
        createRecipientChip(selectedContact);
    }
});

Chip resource

<chip style="@style/Widget.MaterialComponents.Chip.Action"/>

Chip creation

private void createRecipientChip(Contact selectedContact) {
    ChipDrawable chip = ChipDrawable.createFromResource(this, R.xml.standalone_chip);
    CenteredImageSpan span = new CenteredImageSpan(chip, 40f, 40f);
    int cursorPosition = contactAutoCompleteTextView.getSelectionStart();
    int spanLength = selectedContact.getName().length() + 2;
    Editable text = contactAutoCompleteTextView.getText();
    chip.setChipIcon(ContextCompat.getDrawable(MainActivity.this,
        selectedContact.getAvatarResource()));
    chip.setText(selectedContact.getName());
    chip.setBounds(0, 0, chip.getIntrinsicWidth(), chip.getIntrinsicHeight());
    text.setSpan(span, cursorPosition - spanLength, cursorPosition, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
}

CenteredImageSpan is a custom ImageSpan that center the drawable vertically. It also allows us to set Chip padding. The full code is provided in the link.

In this example, contacts can be selected from a list of suggestions as you type. Then, a contact Chip is created (with a name and an avatar) to replace the search query. As for multiple contacts handling, you are looking for the MultiAutoCompleteTextView. It is described in the video.

Hope it helps.