Complete Developer Guide about Chip Support Library 2026
Introduction: What Is the Chip Support Library?
If you build Android apps, you have likely heard the term chip support library at least once. The chip support library is part of Google’s Material Components for Android. It gives developers ready-to-use chip widgets that follow Material Design guidelines. Chips are small, interactive UI elements. They display information, trigger actions, or let users make selections. You can think of them as smart, compact tags inside your app. This guide covers everything from setup to advanced customization. By the end, you will know exactly how to use chips like a professional Android developer.
What Is a Chip in Android?
A chip is a compact element that represents an input, attribute, or action. It usually appears as a rounded rectangle with optional text, icons, or close buttons. Google introduced chips as part of Material Design 2.0. They replaced older methods like tags and toggle buttons in many UI patterns. Developers use chips for filtering search results, entering tags, and selecting categories. Chips also work well inside forms where users need to make multiple selections quickly. They are highly interactive and fully customizable using the chip support library.
Think of chips in action. When you search on Google Photos, those filter buttons at the top (“People”, “Places”, “Things”) are chips. When you type an email address in Gmail, it becomes a chip. These real-world examples show how powerful and practical chips really are.
Why Use the Chip Support Library?
You might ask yourself: why not just build custom buttons? The answer is simple. The chip support library saves you hours of work. It provides pre-built accessibility support, ripple effects, and state handling. You do not need to write custom drawables or touch handlers from scratch. The library follows Material Design principles automatically. It also ensures visual consistency across different Android versions. Building chips manually without the library means handling a lot of edge cases yourself.
Here are key reasons to use the chip support library:
- It reduces boilerplate code significantly.
- It provides built-in accessibility features.
- It supports checkable, filterable, and closeable chip variants.
- It integrates seamlessly with other Material Components.
- It keeps your UI consistent with modern Android design standards.
Setting Up the Chip Support Library
Before you use any chip component, you need to add the correct dependency. The chip support library lives inside the Material Components for Android library. Open your app-level build.gradle file and add the following dependency.
implementation 'com.google.android.material:material:1.12.0'
Always check the official Material Components GitHub for the latest version. After adding the dependency, sync your project. Then make sure your app theme extends a Material theme. You can use Theme.MaterialComponents.Light.NoActionBar or any Material theme variant. Without a Material theme, chips may not render correctly. This is a common mistake that new developers make.
Types of Chips in the Chip Support Library
The chip support library offers four main chip types. Each type serves a different purpose. Understanding them helps you pick the right chip for your use case.
1. Action Chip
Action chips trigger a specific action when the user taps them. They work like buttons but look more compact and modern. Use action chips for actions like “Share”, “Bookmark”, or “Remind me”. They do not hold state. They simply fire a click event and respond.
2. Filter Chip
Filter chips allow users to select one or more options from a set. They toggle between selected and unselected states. Use filter chips for filtering content by category, date, or type. When selected, they display a checkmark by default. They are perfect for search result filtering or preference settings screens.
3. Input Chip
Input chips represent user-generated content or data. When a user types an email address or adds a tag, it becomes an input chip. Users can remove input chips using the close button on the chip. They work well in multi-input fields like email recipients or hashtag editors.
4. Choice Chip
Choice chips allow users to select exactly one option from a set. They behave like radio buttons but look like chips. Use them when only a single selection makes sense, such as selecting a size (Small, Medium, Large) or a payment method.
Chip Types Comparison Table
| Chip Type | Selectable | Has Close Button | Use Case |
|---|---|---|---|
| Action Chip | No | No | Trigger actions like Share/Save |
| Filter Chip | Yes (multi) | No | Filter results by category |
| Input Chip | Yes | Yes | Represent user input like tags |
| Choice Chip | Yes (single) | No | Single selection like size/color |
Adding a Chip in XML Layout
Adding a chip to your layout file is straightforward. You use the com.google.android.material.chip.Chip class in your XML. Here is a basic chip example:
<com.google.android.material.chip.Chip
android:id="@+id/chip_example"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android Development"
style="@style/Widget.MaterialComponents.Chip.Action" />
You can change the style attribute to switch between chip types. Use Chip.Filter, Chip.Entry, or Chip.Choice for other variants. This one attribute controls the chip’s entire visual and behavioral state. Always wrap_content for width and height unless you have a specific layout reason.
Using ChipGroup in Android
ChipGroup is a container that holds multiple chips. It handles the layout and spacing between chips automatically. You can set it to allow single selection or multiple selections. Here is how you add a ChipGroup in XML:
<com.google.android.material.chip.ChipGroup
android:id="@+id/chip_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:singleSelection="true">
<com.google.android.material.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Design"
style="@style/Widget.MaterialComponents.Chip.Choice" />
<com.google.android.material.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Development"
style="@style/Widget.MaterialComponents.Chip.Choice" />
</com.google.android.material.chip.ChipGroup>
Setting app:singleSelection=”true” makes only one chip selectable at a time. Remove that attribute to allow multiple selections. ChipGroup also wraps chips to the next line when they overflow. You can control this with the app:chipSpacingHorizontal and app:chipSpacingVertical attributes.
Adding Chips Dynamically in Kotlin
Sometimes you need to add chips at runtime. You might fetch data from an API and display them as chips. Here is how you add chips dynamically in Kotlin:
val chipGroup = findViewById<ChipGroup>(R.id.chip_group)
val categories = listOf("Android", "iOS", "Flutter", "React Native")
for (category in categories) {
val chip = Chip(this)
chip.text = category
chip.isCheckable = true
chipGroup.addView(chip)
}
This code loops through a list and creates a chip for each item. It then adds the chip to the ChipGroup. You can apply any style or attribute to each chip programmatically. Dynamic chips are perfect for data-driven UIs where content changes at runtime.
Handling Chip Click Events
You can listen for chip click events in multiple ways. The simplest way is to set an OnClickListener directly on the chip. Here is an example:
val chip = findViewById<Chip>(R.id.chip_example)
chip.setOnClickListener {
Toast.makeText(this, "Chip clicked!", Toast.LENGTH_SHORT).show()
}
For filter or choice chips, you should use setOnCheckedChangeListener instead. This listener fires when the chip’s checked state changes:
chip.setOnCheckedChangeListener { buttonView, isChecked ->
if (isChecked) {
// Chip is selected
} else {
// Chip is deselected
}
}
For a ChipGroup with singleSelection, you can use setOnCheckedStateChangeListener to get the selected chip’s ID.
Customizing Chip Appearance
The chip support library gives you deep control over chip appearance. You can change colors, text, icons, corner radius, and more. Here are the most useful customization attributes:
<com.google.android.material.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Custom Chip"
app:chipBackgroundColor="@color/chip_bg"
app:chipStrokeColor="@color/chip_stroke"
app:chipStrokeWidth="1dp"
app:chipCornerRadius="8dp"
app:chipIconVisible="true"
app:chipIcon="@drawable/ic_tag"
app:closeIconVisible="true"
style="@style/Widget.MaterialComponents.Chip.Entry" />
Each attribute targets a specific visual part of the chip. Use chipBackgroundColor for background, chipCornerRadius to control roundness and chipIcon to add a leading icon. These attributes give your chips a unique look that fits your app’s brand.
Chip Customization Attributes Table
| Attribute | Purpose | Example Value |
|---|---|---|
| chipBackgroundColor | Sets chip background color | @color/blue_light |
| chipStrokeColor | Sets chip border color | @color/gray_400 |
| chipStrokeWidth | Sets chip border thickness | 1dp |
| chipCornerRadius | Controls the chip corner roundness | 8dp |
| chipIcon | Adds a leading icon | @drawable/ic_tag |
| closeIconVisible | Shows or hides the close button | true / false |
| chipIconSize | Sets icon size inside the chip | 18dp |
| textStartPadding | Adds padding before text | 4dp |
Chip Close Button and How to Handle It
The close button lets users remove chips. This is especially useful for input chips. You can listen for close icon clicks like this:
chip.setOnCloseIconClickListener {
chipGroup.removeView(chip)
}
This code removes the chip from its parent ChipGroup when the user taps the close icon. You can also animate the removal for a smoother experience. Always handle chip removal gracefully in input scenarios. This prevents users from accidentally deleting chips they still want to keep.
Chip Accessibility in Android
The chip support library handles most accessibility automatically. It sets content descriptions, touch targets, and focus states for you. However, you should still set meaningful content descriptions when chips use only icons. Always make sure your chip text is clear and descriptive. Screen reader users depend on that text to understand the chip’s purpose. Material chips also meet minimum touch target sizes of 48dp by default. This is important for usability across all user types.
Common Mistakes Developers Make With Chips
Many developers run into the same issues when first using chips. Here are the most common ones and how to avoid them.
Wrong theme: If your Activity or Fragment does not use a Material theme, chips may crash or look broken. Always extend Theme.MaterialComponents or Theme.Material3.
Forgetting ChipGroup: Using chips without a ChipGroup leads to messy layouts. Always wrap related chips inside a ChipGroup for proper spacing and selection handling.
Not using the correct style: Using the wrong chip style (for example, using Entry style when you need Choice style) causes confusing UX. Pick the right style based on your use case.
Hardcoding chip data: Always populate chips from a data source. Hardcoded chips are difficult to maintain when requirements change.
Chip Support Library vs. Custom Views
Some developers consider building custom chip-like views. This path is not recommended for most projects. The chip support library already handles ripple effects, state colors, focus, and accessibility. Building all of that from scratch takes significant time. The library also stays updated with Android design guidelines. A custom view can fall out of sync with design changes quickly. The chip support library is almost always the better and faster choice.
Material Design 3 and Chip Updates
Google updated chip designs in Material Design 3 (Material You). The new chips have slightly different shapes, elevations, and color roles. If you use Material3 in your project, use the Theme.Material3 parent theme. The chip styles for Material3 follow a different naming convention. For example, Widget.Material3.Chip.Filter replaces the Material2 equivalent. Always match your chip styles with the correct Material version in your theme. Mixing Material2 and Material3 styles causes visual inconsistencies.
Conclusion
The chip support library is one of the most powerful tools in Android’s Material Components toolkit. It lets you build polished, accessible, and interactive chip UIs with minimal effort. You now understand all four chip types and when to use each one and You know how to set up the library, add chips in XML, and create them dynamically. Also You can handle click events, customize appearance, and remove chips on demand. Chips may be small UI elements, but they make a huge difference in user experience. Start using the chip support library in your next Android project and see the difference yourself.
Frequently Asked Questions (FAQ)
Q1: What is the chip support library in Android?
The chip support library is part of Material Components for Android. It provides ready-to-use chip widgets that follow Material Design guidelines for building interactive, compact UI elements.
Q2: How do I add the chip support library to my project?
Add this dependency to your app-level build.gradle: implementation 'com.google.android.material:material:1.12.0'. Then make sure your app theme extends a Material Components theme.
Q3: What are the four types of chips in Android?
The four chip types are Action, Filter, Input (Entry), and Choice chips. Each type has a different style and serves a specific UI purpose like triggering actions or selecting options.
Q4: How do I use ChipGroup in Android?
Wrap your Chip elements inside a ChipGroup in XML. Use app:singleSelection=”true” for single choice behavior. ChipGroup manages chip layout, spacing, and selection state automatically.
Q5: Can I add chips dynamically at runtime in Android?
Yes. Create a Chip object in Kotlin or Java, set its properties like text and style, then call chipGroup.addView(chip) to add it to your layout at runtime.
Q6: How do I handle chip click events?
Use setOnClickListener for action chips. Use setOnCheckedChangeListener for filter or choice chips. For a ChipGroup, use setOnCheckedStateChangeListener to track selection changes.
Q7: How do I customize the chip background color?
Use the app:chipBackgroundColor attribute in XML or call chip.chipBackgroundColor = ColorStateList.valueOf(color) in Kotlin to set the background color programmatically.
Q8: What theme is required for chips to render correctly?
Your Activity or Application theme must extend Theme.MaterialComponents or Theme.Material3. Without a Material theme, chips may crash or display with incorrect styling.
Q9: Is the chip support library compatible with older Android versions?
Yes. Material Components for Android supports API level 21 and above. The chip support library works across a wide range of Android versions with consistent behavior and styling.
Q10: What is the difference between Filter Chip and Choice Chip?
Filter chips allow multiple selections at once, making them ideal for multi-filter scenarios. Choice chips allow only one selection at a time, similar to radio buttons, and work best for single-option choices.