Close
Close full mode
logoAppDevAssist

How to add Chip and ChipGroup in Android Studio

Last update: a month ago by n-k-dReading time: 2 min

Chip and ChipGroup Part 1: Add Chip and ChipGroup in Android Studio:

Chip and ChipGroup are two widgets mainly used to get user selection. There are different types of chips used for different use cases.

ChipGroup is a container to hold multiple chips. ChipGroup is used to hold multiple chips. We can set different properties in a ChipGroup, e.g. we can use single line or multiple lines of chips in a group. Similarly, we can configure a single selection or multiple selections of chips.

In this post, I will show you how to use chip and ChipGroup in Android(Kotlin) with an Android Studio project.

YouTube video:

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

Android Studio project:

Create one basic Android Studio project and open your layout xml file. You can search for chip in the search box of the xml file. It will show both Chip and ChipGroup in the searched list.

Android Chip ChipGoup
Android Chip ChipGoup

You can drag-drop these components to your layout.

We need to add Chip inside a ChipGroup.

Drag and drop one ChipGroup in your componenttree (lower-left). Add a few more Chip inside this ChipGroup.

Android chipgroup add
Android chipgroup add

Also, add the constraints to your Constraint Layout as like below:

  • Right-click on the ChipGroup, click on center and click on Vertically in parent. Do it again for Horizontally in parent. It will add the ChipGroup at the center of the layout.

Android Chip constraints
Android Chip constraints

Add text to the chips:

We can use android:text to add texts to chips. Open the layout file in code and add the texts.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".MainActivity">
<com.google.android.material.chip.ChipGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.chip.Chip
android:id="@+id/chip5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello"/>
<com.google.android.material.chip.Chip
android:id="@+id/chip6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello"/>
<com.google.android.material.chip.Chip
android:id="@+id/chip7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello"/>
<com.google.android.material.chip.Chip
android:id="@+id/chip8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello"/>
<com.google.android.material.chip.Chip
android:id="@+id/chip9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello"/>
<com.google.android.material.chip.Chip
android:id="@+id/chip10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello"/>
<com.google.android.material.chip.Chip
android:id="@+id/chip11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello"/>
<com.google.android.material.chip.Chip
android:id="@+id/chip12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello"/>
<com.google.android.material.chip.Chip
android:id="@+id/chip4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello"/>
</com.google.android.material.chip.ChipGroup>
</androidx.constraintlayout.widget.ConstraintLayout>

It will add text to the chips.

Android Chip add text
Android Chip add text

Gradle dependency for chip and ChipGroup:

Chip and ChipGroup are defined in com.google.android.material.material.

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

You can go to https://maven.google.com and search for this dependency to find the latest version.

Subscribe to our Newsletter

Previous
How to create a custom Navigation drawer in Kotlin with Day-Night toggle
Next
Example of different types of chips in Android