This article is the third part of the series, Lost in Android Support Material Design Library. If you didn’t read the previous one you can start from here.
So, today we will be covering the features of Android Material Chip Component. A Chip is a compact element that shows a label, an optional icon, and an optional close icon. Moreover, chips are flexible enough for entering information, handling the action of a user, and filtering the content.
Table of content:
- Setup
- Basic Usage Of Android Chip With XML
- Testing Out Multiple Chip Attributes
- Setting Chip Properties Programmatically
- Listening For Callbacks
- Different types of Material Chips
1. Setup
To use chips in our app first we need to add the android material design dependency. Open the build.gradle file of your application and include the Google Maven Repository in it. For example.
allprojects { repositories { google() jcenter() } }
And now add the library in the dependencies section:
dependencies { // ... implementation 'com.google.android.material:material:1.2.0-aplha01' // ... }
2. Basic Usage Of Chip With XML
Example code of how to declare the chip widget inside the layout.
<com.google.android.material.chip.Chip android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/material_chip"/>
Visually it looks this:
3. Testing Out Multiple Chip Attributes
There are many chips attributes provided by Material Design Library for styling a chip via XML. Let’s check out them one by one.
1. app:cornerChipRadius: Corner radius to apply the chip’s shape.
2. app:chipBackgroundColor: Background color to apply on the chip.
3. app:chipStrokeColor & app:chipStrokeWidth: The stroke color to apply the chip outline and width in size.
4. app:rippleColor: Apply the ripple color to Chip.
5. app:chipIcon: Sets the icon drawable to display at the start of the Chip.
6. app:chipIconTint && app:chipIconSize: Apply the tinting color to chipIcon
and set the size of chipIcon
.
7. app:closeIconVisible: Show or hide the close icon visibility on-chip. By default the value is false
. Also by default, the cancel icon will be shown on the right side of the chip if we set the value to true
.
If you see at the previous demo the close icon hides when I press the cancel icon and shows again when I press on the material chip. For this, we also need to add some code inside the Activity onCreate method.
chip.setOnCloseIconClickListener { chip.isCloseIconVisible = false } chip.setOnClickListener { chip.isCloseIconVisible = true }
The setOnCloseIconClickListener
callback to be invoked when the chip’s close is clicked and simply hiding the icon visibility inside the callback. And, the setOnClickListener
callback will be invoked when the chip is clicked so in that we’re showing the icon again.
8. app:closeIcon: We can also use our custom drawable for close icon instead of using the default cancel icon.

9. app:closeIconTint && app:closeIconSize: Apply the tinting color to closeIcon
and set the size of closeIcon
.
10. android:checkable: Set whether this chip is checkable or not.
You can also set the custom checked icon instead of using the default tick icon with the app:checkedIcon
property.
4. Setting Chip Properties Programmatically
We can also define all the above properties programmatically.
Attribute Property | Progrmatically |
Set Corner Radius | chip.shapeAppearanceModel = ShapeAppearanceModel().withCornerSize(5f) |
Chip Background Color | chip.setChipBackgroundColorResource(R.color.colorBlack) |
Stroke Color & Width | chip.setChipStrokeColorResource(R.color.colorAccent) chip.chipStrokeWidth = 2.0f |
Ripple Color | chip.setRippleColorResource(R.color.colorAccent) |
Set Chip Icon | chip.setChipIconResource(R.drawable.androidIcon) |
Change chip Icon Tint & Size | chip.setChipIconTintResource(R.color.colorAccent) chip.chipIconSize = 30f |
Change chip close icon visibility | chip.isCloseIconVisible = true |
Add custom close icon | chip.closeIcon = ContextCompat.getDrawable(this,R.drawable.remove_drawable) |
Close Icon Tint & Size | chip.setCloseIconTintResource(R.color.colorAccent) chip.closeIconSize = 30f |
Making chip checkable | chip.isCheckable = true |
5. Listening For Callbacks
Android chips have some UI elements that can response to click events.
Registering for a callback when the chip clicks:
chip.setOnClickListener { }
Registering for a callback when a close chip icon click:
chip.setOnCloseIconClickListener { }
Registering a callback to be invoked when the chip is checkable
state changes.
chip.setOnCheckedChangeListener { chip, isChecked -> }
Note: The above callback only works if the chip.isCheckable = true
.
6. Different types of Material Chips
From the design guidelines, there are four types of chips added to the Android Material Design Library.
6.1 Filter Chip
As the name tells the filter chips are used as a filter within a ChipGroup and are always checkable.
<com.google.android.material.chip.Chip android:id="@+id/chip" ......... style="@style/Widget.MaterialComponents.Chip.Filter" ........ />

6.2 Choice Chip
Choice chips allow the selection of a single chip from a set of options. The style usually contains an optional chip icon and is always checkable. Choice chips are usually placed within a ChipGroup.
<com.google.android.material.chip.Chip android:id="@+id/chip" ...... style="@style/Widget.MaterialComponents.Chip.Choice" ........ />

6.3 Entry Chips (Input)
The entry chips are usually used for inputs such as searching text and verify that input by covering text into the chip. By default, the input chip contains a close icon, chip icon, and it is checkable.
<com.google.android.material.chip.Chip android:id="@+id/chip" ...... style="@style/Widget.MaterialComponents.Chip.Entry" ...... />

Note: We need to set a CloseIconClickListener
to chip and thus whenever a user clicks on the close icon, the chip is removed from the ChipGroup.
6.4 Action Chip
If we did not set any style property to chip widget then the default @style/Widget.MaterialComponents.Chip.Action
will be used.
I hope this article provides you some insight on the Android Material Chip component. Hopefully, in the next article, we’ll see how to use ChipGroup with Chips. If you wanna get notified for my every article please subscribe to my website at home page.
Thank you for being here and keep reading…