Close
Close full mode
logoAppDevAssist

Example of different types of chips in Android

Different types of Chips available in Android:

There are four different types of chips available in Android. There are predefined styles defined for each of these chips and we can easily configure it in a com.google.android.material.chip.Chip component.

We need to use style property and create these chips.

In this post, we will learn how to create different types of chips in Android with an example.

YouTube video:

I have published one YouTube video on this topic. You can watch it here:

What are the types of Chips available:

We have the following four types of chips available:

1. Action:

This chip can be used by the following style:

@style/Widget.MaterialComponents.Chip.Action

2. Choice:

This chip can be used by the following style:

@style/Widget.MaterialComponents.Chip.Choice

3. Entry:

This chip can be used by the following style:

@style/Widget.MaterialComponents.Chip.Entry

4. Filter:

This chip can be used by the following style:

@style/Widget.MaterialComponents.Chip.Filter

Example of chips:

Let's create one xml file with all of these chips:

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
tools:context=".MainActivity">
<com.google.android.material.chip.ChipGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.google.android.material.chip.Chip
android:id="@+id/chip1"
style="@style/Widget.MaterialComponents.Chip.Filter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Filter 1" />
<com.google.android.material.chip.Chip
android:id="@+id/chip2"
style="@style/Widget.MaterialComponents.Chip.Filter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Filter 2" />
</com.google.android.material.chip.ChipGroup>
<com.google.android.material.chip.ChipGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.google.android.material.chip.Chip
android:id="@+id/chip5"
style="@style/Widget.MaterialComponents.Chip.Entry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checkable="false"
android:text="Entry 1" />
<com.google.android.material.chip.Chip
android:id="@+id/chip6"
style="@style/Widget.MaterialComponents.Chip.Entry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checkable="false"
android:text="Entry 2" />
</com.google.android.material.chip.ChipGroup>
<com.google.android.material.chip.ChipGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.google.android.material.chip.Chip
style="@style/Widget.MaterialComponents.Chip.Choice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Choice 1" />
<com.google.android.material.chip.Chip
style="@style/Widget.MaterialComponents.Chip.Choice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Choice 2" />
</com.google.android.material.chip.ChipGroup>
<com.google.android.material.chip.ChipGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.google.android.material.chip.Chip
style="@style/Widget.MaterialComponents.Chip.Action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Action 1" />
<com.google.android.material.chip.Chip
style="@style/Widget.MaterialComponents.Chip.Action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Action 2" />
</com.google.android.material.chip.ChipGroup>
</LinearLayout>
  • We have 4 different ChipGroup here.
  • The first group has two Filter chips, the second group has two Entry chips, the third group has two Choice chips and the fourth group has two Action chips.

If you run the app, it will give one output as like below:

Android types of chips
Android types of chips

In our next post, I will show you how to add styling to these chips.

Subscribe to our Newsletter

Previous
How to add Chip and ChipGroup in Android Studio
Next