Material Design Component – Chips

Rishabh Sharma

15 March 2019

One of the cool widgets that you can use with the Material Design Components library is a Chip. A Chip is a component that can represent input, filter, choice or action of a user.

To use Chips, your project needs to have material components dependency.

implementation 'com.google.android.material:material:1.0.0'

1	implementation 'com.google.android.material:material:1.0.0'

And your app theme’s parent should be one of the MaterialComponents themes.

Usage

Chips allow users to enter information, make selections, filter content, or trigger actions. Chips should appear dynamically as a group of multiple interactive elements. Unlike buttons, which should be a consistent and familiar call to action, one that a user expects to appear as the same action in the same general area.

Types:

Input chips – Input chips represent information used in fields, such as an entity or different attributes.
Choice chips – In sets that contain at least two options, choice chips represent a single selection.
Filter chips – Filter chips represent filters for a collection.
Action chips – Action chips trigger actions related to primary content.

You can check for example of every type in the official docs.

XML usage of a chip is as follows:

<com.google.android.material.chip.Chip
android:id="@+id/chip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/chip_text" />

<com.google.android.material.chip.Chip

android:id="@+id/chip"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/chip_text" />

Handling Clicks

Call setOnClickListener(OnClickListener) to register a callback to be invoked when the chip is clicked.

Chip chip = (Chip) findViewById(R.id.chip);
chip.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View view) {
        // Handle the click.
    }
});

Chip chip = (Chip) findViewById(R.id.chip);

chip.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View view) {

// Handle the click.

}

});

Or, call setOnCheckedChangeListener(OnCheckedChangeListener) to register a callback to be invoked when the chip is toggled.

Chip chip = (Chip) findViewById(R.id.chip);
chip.setOnCheckedChangeListener(new setOnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton view, boolean isChecked) {
        // Handle the toggle.
    }
});

Chip chip = (Chip) findViewById(R.id.chip);

chip.setOnCheckedChangeListener(new setOnCheckedChangeListener() {

@Override

public void onCheckedChanged(CompoundButton view, boolean isChecked) {

// Handle the toggle.

}

});

Styles

Action Chip is the default Material style, but you can apply any of the other styles using a style attribute.

<com.google.android.material.chip.Chip
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/Widget.MaterialComponents.Chip.Filter"
    app:chipIcon="@drawable/ic_avatar_circle_24"
    android:text="@string/hello_world"/>

<com.google.android.material.chip.Chip

xmlns:app="http://schemas.android.com/apk/res-auto"

style="@style/Widget.MaterialComponents.Chip.Filter"

app:chipIcon="@drawable/ic_avatar_circle_24"

android:text="@string/hello_world"/>

Example:

style="@style/Widget.MaterialComponents.Chip.Entry"
style="@style/Widget.MaterialComponents.Chip.Filter"
style="@style/Widget.MaterialComponents.Chip.Choice"
style="@style/Widget.MaterialComponents.Chip.Action" (default)

style="@style/Widget.MaterialComponents.Chip.Entry"

style="@style/Widget.MaterialComponents.Chip.Filter"

style="@style/Widget.MaterialComponents.Chip.Choice"

style="@style/Widget.MaterialComponents.Chip.Action" (default)

References: