Material Design Components Chips in Android with Example

Chips in android are one of the components which are used to make the choice filters, actions, and display the selectable options in the compact area of the Android Window. In this article, it’s been discussed how to implement the very basic selectable chips for the filtering of the options. Have a look at the following image to get an idea of what’s been discussed further. Note that we are going to implement this project using the Java language. 

Steps to Implement the Selectable Chips in Android

Step 1: Create an empty project

• Create an empty activity Android Studio project. Refer to Android | How to Create/Start a New Project in Android Studio? to know how to create an empty activity Android Studio project.
• Note that select Java as the programming language.

Step 2: Adding the dependency to the app-level gradle file

• The current project needs Material Design Dependency.
• Invoke the following dependency inside the app-level gradle file.
• Make sure the system is connected to the network so that Android Studio can download the required files.
• And click on the “Sync Now” button which appears on the top right corner.

implementation ‘com.google.android.material:material:1.3.0-alpha03’

• Refer to the following image if unable to locate the app-level gradle file and invoke the dependency.

Step 3: Working with the activity_main.xml file

• The tag required to implement the basic chip in Android is as follows:

com.google.android.material.chip.Chip

• To implement the same in the layout invoke the following code. This layout includes a very basic chip from Material Design Dependency.

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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">

    <com.google.android.material.chip.Chip
        android:id="@+id/chipCpp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="64dp"
        android:text="GEEKS FOR GEEKS" />

</RelativeLayout>

Output UI:

Step 4: Handling Chip in MainActivity.java file

• The Material design chip button is handled using “OnClickListener”, as same as that of the normal Button.
• Invoke the following code inside the MainaActivity.java file to handle the chip button, which shows the simple Toast message.

Java

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
import com.google.android.material.chip.Chip;

public class MainActivity extends AppCompatActivity {

    Chip chip1;

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

          // chips is handled using the
          // normal OnClickListener callback
        chip1 = findViewById(R.id.chipGfg);
        chip1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Action Completed", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Output: Run on Emulator

Making the Chips Selectable

• To make the chip selectable in android the chip group needs to implement instead of a single chip.
• This helps in filtering the selections of the user choices.
• To implement the chip group in android invoke the following code inside the activity_main.xml file.

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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">

    <!--make sure to group the chips-->
    <!--style attribute is mandatory
         for each of the chips-->
    <com.google.android.material.chip.ChipGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">

        <com.google.android.material.chip.Chip
            android:id="@+id/chipCpp"
            style="@style/Widget.MaterialComponents.Chip.Filter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="C++" />

        <com.google.android.material.chip.Chip
            android:id="@+id/chipJava"
            style="@style/Widget.MaterialComponents.Chip.Filter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="JAVA" />

        <com.google.android.material.chip.Chip
            android:id="@+id/chipPython"
            style="@style/Widget.MaterialComponents.Chip.Filter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Python" />

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

</RelativeLayout>

• To handle the selection of the chips whether the chips are filtered by the user or not, invoke the following code inside the MainActivity.java file.

Java

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
import com.google.android.material.chip.Chip;

public class MainActivity extends AppCompatActivity {

    Chip chipCpp, chipJava, chipPython;

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

        chipCpp = findViewById(R.id.chipCpp);
        chipJava = findViewById(R.id.chipJava);
        chipPython = findViewById(R.id.chipPython);

        chipCpp.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // check whether the chips is filtered by user
                  // or not and give the suitable Toast message
                if (chipCpp.isChecked()) {
                    Toast.makeText(MainActivity.this, "C++ selected", Toast.LENGTH_SHORT).show();
                } else {
                    Toast.makeText(MainActivity.this, "C++ deselected", Toast.LENGTH_SHORT).show();
                }
            }
        });

        chipJava.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // check whether the chips is filtered by user or
                  // not and give the suitable Toast message
                if (chipJava.isChecked()) {
                    Toast.makeText(MainActivity.this, "JAVA selected", Toast.LENGTH_SHORT).show();
                } else {
                    Toast.makeText(MainActivity.this, "JAVA deselected", Toast.LENGTH_SHORT).show();
                }
            }
        });

        chipPython.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // check whether the chips is filtered by user or
                  // not and give the suitable Toast message
                if (chipPython.isChecked()) {
                    Toast.makeText(MainActivity.this, "Python selected", Toast.LENGTH_SHORT).show();
                } else {
                    Toast.makeText(MainActivity.this, "Python deselected", Toast.LENGTH_SHORT).show();
                }
            }
        });

    }
}

Output: Run on Emulator