Android Material Design component: Chip - Part 1: Creating chips layout

Chip is a Material Design component which presented by Google developers. It represents complex entities in small blocks, such as a contact. From guideline on Google design, a chip may:

contain entities such as a photo, text, rules, an icon, or a contact.
represent contact information in a compact way.

For a popular example, we can see this component on Google Play:

In Android SDK and Design Support library, there is no official widget to make a chip layout, so we must custom it ourselves. Moreover, there are tons of third-party libraries can help us to deal with this problem.
Now, in this post, I will present a solution to make some chip styles by custom in xml files. For making a Chip EditText, please read Part 2.

Declaring some dimension resources

Just take a glance at specs entry of the chip guideline, you will noticed some required dimensions when making a chip layout. So, before starting, I provide some dimension resources first:

dimens.xml

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="chip_padding">12dp</dimen>
    <dimen name="icon_height">36dp</dimen>
    <dimen name="remove_icon_dimen">24dp</dimen>
    <dimen name="remove_icon_margin">4dp</dimen>
    <dimen name="deletable_chip_padding">12dp</dimen>
    <dimen name="contact_chip_left_padding">8dp</dimen>
    <dimen name="contact_chip_right_padding">12dp</dimen>

    <dimen name="padding_top">8dp</dimen>
</resources>

Creating a simple chip layout (only text label)

There are nothing unfamiliar here at all, we just only make a background with round corner for TextView to make a chip. Firstly, defining a new drawable resource file with shape as the root attribute:

res\drawable\shape_chip_simple_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="@color/colorAccent" />

    <padding
        android:bottom="@dimen/chip_padding"
        android:left="@dimen/chip_padding"
        android:right="@dimen/chip_padding"
        android:top="@dimen/chip_padding" />

    <corners android:radius="30dp" />
</shape>

In your activity layout file, just define this drawable resource file as the TextView background like this:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="info.devexchanges.chiplayout.SimpleChipActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/shape_chip_simple_drawable"
        android:text="Hello, I'm a simple Chip!"
        android:textColor="@android:color/white"
        android:textStyle="bold" />
</RelativeLayout>

Running this activity, we'll have this simple chip layout:

Creating a deletable chip

A deleteable chip contains a delete icon on the right side. When click at this icon, the chip will be deleted. In order to design this layout, wrapping a TextView and an ImageView in a RelativeLayout like this:

activity_cross_chips.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/chip_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/shape_chip_drawable"
        android:paddingBottom="@dimen/padding_top"
        android:paddingTop="@dimen/padding_top">

        <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:paddingLeft="@dimen/chip_padding"
            android:text="Example chip"
            android:textStyle="bold" />

        <ImageView
            android:id="@+id/delete"
            android:layout_width="@dimen/remove_icon_dimen"
            android:layout_height="@dimen/remove_icon_dimen"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@id/text"
            android:contentDescription="@null"
            android:padding="@dimen/remove_icon_margin"
            android:layout_marginRight="@dimen/remove_icon_margin"
            android:src="@drawable/delete" />
    </RelativeLayout>

</RelativeLayout>

And this is drawable resource file to set as TextView background:

shape_chip_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="@color/gray_light" />

    <corners android:radius="30dp" />
</shape>

NOTE: You should use this design instead of defining a TextView with a drawableRight because you must handle delete icon click event in programmatically code:

DeleteChipActivity.java

package info.devexchanges.chiplayout;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

public class DeleteChipActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_cross_chip);

        View deleteIcon = findViewById(R.id.delete);
        final View chipLayout = findViewById(R.id.chip_layout);
        deleteIcon.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //gone chip layout
                //if it a list or an adapter, please remove it!
                chipLayout.setVisibility(View.GONE);
            }
        });
    }
}

Running this activity, we'll have this output:

When click the delete icon:

Chip with text and icon (image)

It may be called contact chip, which have an icon on the left side of label. Moreover, it may have a remove icon on the right. The icon is always a round ImageView, wrapping them in a RelativeLayout like this:

activity_icon_chip.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/activity_icon_chip"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="info.devexchanges.chiplayout.IconChipActivity">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/shape_chip_icon_drawable">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/icon"
            android:layout_width="@dimen/icon_height"
            android:layout_height="@dimen/icon_height"
            android:src="@drawable/midu"
            app:civ_border_color="#FF000000" />

        <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@id/icon"
            android:paddingTop="@dimen/padding_top"
            android:paddingLeft="@dimen/padding_top"
            android:paddingBottom="@dimen/padding_top"
            android:text="Đặng Thị Mỹ Dung"
            android:textStyle="bold" />

        <ImageView
            android:id="@+id/delete"
            android:layout_width="@dimen/remove_icon_dimen"
            android:layout_height="@dimen/remove_icon_dimen"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@id/text"
            android:padding="@dimen/remove_icon_margin"
            android:layout_marginLeft="@dimen/remove_icon_margin"
            android:layout_marginRight="@dimen/remove_icon_margin"
            android:contentDescription="@null"
            android:src="@drawable/delete" />
    </RelativeLayout>

</RelativeLayout>

The round ImageView can be created by a third-party library. In this example, I use CircleImageView, so please add this dependency to dependencies scope in your application level build.gradle:

compile 'de.hdodenhof:circleimageview:2.1.0'

The hardest work is fixing sizes for each widget, I use dimension resources like noted above. Running this activity, we'll have this output:

Conclusions

Chip component can be created easily with some configuration in the resources and layout files. From now, you can use HorizontalScrollView to display a row of chips (like GooglePlay application) or use StaggeredGridLayoutManager to build a staggered grid of chips layout (named tag layout),...
Up to Part 2, I will talk about putting chip into EditText (AutoCompleteTextView with chips inside) like Gmail app does, this is popular design that you can see on many applications (coming soon!).
References:

Chip component guideline on Google Design
Round ImageView library page on Github
Read more: my post about using RecyclerView with StaggeredGridLayoutManager to build a staggered grid layout.

DOWNLOAD CODE

Learn Programming Together