// Tutorial //

Android P: Chips and ChipGroup

Published on August 3, 2022
Default avatar
By Anupam Chugh
Developer and author at DigitalOcean.
Android P: Chips and ChipGroup

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

In this tutorial, we’ll be discussing the latest components that are a part of the new Material Design Library: Chips and Chip Groups. We’ll be implementing them in our android application.

Android Chips

Chips are basically a text displayed in a rounded background. These are checkable and can contain icons as well. Chips are a newer and stylised form of RadioButtons. To use Chips in your Android application you need to use the latest Android SDK 28. Following are the dependencies that need to be added in the build.gradle:

implementation 'androidx.appcompat:appcompat:1.0.0-alpha1'
implementation 'com.google.android.material:material:1.0.0-alpha1'

Note: At the time of writing above were the versions available. What is AndroidX? Since the introduction of Android Support v28, Google has refactored the package names. AndroidX is a replacement of the support library. For more details on the new package names check out this link.

Android Chip Usage

A Chip is defined in the xml layout as:

<com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Default" />

app:chipText displays the textual part in the Chip. This is how the chip looks on the screen: android chips default look

Types of Chips

Chips can be styled as:

  • Default - Pressing this does nothing unless some other xml attribute is present.
  • Entry: We need to add the style="@style/Widget.MaterialComponents.Chip.Entry". This makes the Chip checkable and contains a checkmark and close icon by default
  • Choice: This type of chip is generally used to mark/unmark chips for selections. style="@style/Widget.MaterialComponents.Chip.Choice" Choice style is generally used in Chip groups.
  • Actions: This chip is checkable and is used to trigger actions when they are clicked. style="@style/Widget.MaterialComponents.Chip.Action"
  • Filter: This chip is checkable and shows a checkmark when checked. style="@style/Widget.MaterialComponents.Chip.Filter"

XML Attributes

  • app:chipText
  • app:chipBackgroundColor
  • app:rippleColor - To show a custom ripple effect when the chip is pressed.
  • app:checkable - Used to set whether the toggle is enabled or not.
  • app:chipIcon - Used to set a custom drawable icon in the chip.
  • app:closeIcon - Generally present in the Entry type chip. We can set our icon using this. The close icon by default is at the right of the text.
  • app:closeIconTint
  • app:checkedIcon - Used to change the check mark icon that is present in Entry and Filter types of Chips.
  • app:chipStartPadding/app:chipEndPadding
  • app:iconStartPadding/app:iconEndPadding

Let’s use these attributes in our xml layout:

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Default" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Entry"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Entry" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Choice" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Action"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Action" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Filter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Filter" />


    </LinearLayout>

android chips types Time to add background colors, ripple effects, custom icons:

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:orientation="horizontal">

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipBackgroundColor="@android:color/holo_blue_bright"
            app:chipText="Background Color" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Ripple Color"
            app:rippleColor="@android:color/holo_orange_dark" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipIcon="@mipmap/ic_launcher"
            app:chipText="Chip icon" />

    </LinearLayout>

android chips custom icon The chips above are jammed against each other. We can add the padding attributes on the Chips to correct it.

Android ChipGroup

Similar to RadioGroups, ChipGroups are used to hold Chips.

<com.google.android.material.chip.ChipGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp">

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="This" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="is" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="a" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="because" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="chip" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="group" />


    </com.google.android.material.chip.ChipGroup>

android chipgroup default look ChipGroups by default spaces the Chips present inside it. Few of the XML attributes that can be used with ChipGroups are: app:chipSpacing: To set a custom spacing value between the chips, both horizontally and vertically. app:chipSpacingHorizontal app:chipSpacingVertical app:singleSelection - Setting this as true allows only one of the chips to be checked. app:singleLine - Sets all the chips present, in a single line only. Custom Spacing:

<com.google.android.material.chip.ChipGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        app:chipSpacing="25dp">

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Chip" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Group" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="with" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="custom" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="spacing" />

    </com.google.android.material.chip.ChipGroup>

android chipgroup custom spacing Let’s merge the above concepts and also implement the click listeners on the Chips in our Android Studio Project.

Android Chip, ChipGroup Example Project Structure

android chips project structure

Android Chips Code

The code for the activity_main.xml layout is given below:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Default" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Entry"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Entry" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Choice" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Action"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Action" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Filter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Filter" />


    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:orientation="horizontal">

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipBackgroundColor="@android:color/holo_blue_bright"
            app:chipText="Background Color" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Ripple Color"
            app:rippleColor="@android:color/holo_orange_dark" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipIcon="@mipmap/ic_launcher"
            app:chipText="Chip icon" />

    </LinearLayout>

    <com.google.android.material.chip.ChipGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp">

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="This" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="is" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="a" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="because" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="chip" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="group" />


    </com.google.android.material.chip.ChipGroup>

    <com.google.android.material.chip.ChipGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        app:chipSpacing="25dp">

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Chip" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Group" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="with" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="custom" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="spacing" />

    </com.google.android.material.chip.ChipGroup>


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="Choose One"
        android:textSize="18sp" />


    <com.google.android.material.chip.ChipGroup
        android:id="@+id/chipGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:singleSelection="true">

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Choice A" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Choice B" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Choice C" />

    </com.google.android.material.chip.ChipGroup>


    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp">


        <com.google.android.material.chip.ChipGroup
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipSpacingHorizontal="25dp"
            app:singleLine="true">

            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:chipText="Chip" />

            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:chipText="Group" />


            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:chipText="in" />


            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:chipText="single" />

            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:chipText="line" />

            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:chipText="add" />

            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:chipText="a" />

            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:chipText="horizontal" />

            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:chipText="scroll" />

        </com.google.android.material.chip.ChipGroup>

    </HorizontalScrollView>


    <com.google.android.material.chip.Chip
        android:id="@+id/chip"
        style="@style/Widget.MaterialComponents.Chip.Entry"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="24dp"
        app:chipText="Close Icon Listener" />


</LinearLayout>

We’ve enclosed the ChipGroup which is single line only, into a horizontal scroll view. The code for the MainActivity.java class is given below:

package com.journaldev.androidchipsandchipgroup;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

import com.google.android.material.chip.Chip;
import com.google.android.material.chip.ChipGroup;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ChipGroup chipGroup = findViewById(R.id.chipGroup);

        chipGroup.setOnCheckedChangeListener(new ChipGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(ChipGroup chipGroup, int i) {

                Chip chip = chipGroup.findViewById(i);
                if (chip != null)
                    Toast.makeText(getApplicationContext(), "Chip is " + chip.getChipText(), Toast.LENGTH_SHORT).show();


            }
        });

        Chip chip = findViewById(R.id.chip);
        chip.setOnCloseIconClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(), "Close is Clicked", Toast.LENGTH_SHORT).show();
            }
        });

    }
}

setOnCheckedChangeListener on the ChipGroup only gets triggered when the ChipGroup is set to a single selection.

The output of the above application in action is given below: android chips output This brings an end to this tutorial. You can download the project from the link below:

AndroidChipsAndChipGroup

Github Project Link


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?