Material Design Components Chips in Android with Example

25 Dec, 2020
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. 
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();            }        });    }}
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();                }            }        });      }}
android
Technical Scripter 2020
Android
Java
Technical Scripter
Java
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Android SDK and it's Components
Flutter - Custom Bottom Navigation Bar
Retrofit with Kotlin Coroutine in Android
How to Post Data to API using Retrofit in Android?
Flutter - Stack Widget
Arrays in Java
Split() String method in Java with examples
Arrays.sort() in Java with examples
Object Oriented Programming (OOPs) Concept in Java
Reverse a string in Java