Material 3 Chips

Overview

Chips are compact elements for inputs, attributes, or actions.

Material 3 Chips, using com.google.android.material.chip.Chip, support four variants: Assist, Filter, Input, and Suggestion. They enable actions, filtering, data entry, or suggestions, with ChipGroup for layout and selection management. This guide covers implementation, accessibility, and theming for color, typography, and shape.

Getting Started

• Add Material Components for Android library dependency
• Use Chip with Theme.Material3.* for styling
• Group with ChipGroup for layout and selection
• Use ChipDrawable for standalone chips in text fields

Accessibility

• Labels auto-provided for TalkBack; set android:contentDescription for custom labels
• Ensure chipMinTouchTargetSize (48dp) for accessible touch targets
• Add contentDescription for close icons in Input Chips

Behavior and Configuration

• Handle clicks with setOnClickListener, close actions with setOnCloseIconClickListener
• Manage checkable states with setOnCheckedChangeListener or ChipGroup.setOnCheckedStateChangeListener
• Configure single/multi-selection in ChipGroup

      
val chip = findViewById<Chip>(R.id.chip)
val chipGroup = findViewById<ChipGroup>(R.id.chip_group)
chip.setOnClickListener { /* Handle click */ }
chip.setOnCloseIconClickListener { /* Handle close */ }
chip.setOnCheckedChangeListener { _, isChecked -> /* Handle check */ }
chipGroup.setOnCheckedStateChangeListener { _, checkedIds -> /* Handle group changes */ }
      
    

Chip Variants

• Assist: Triggers smart or automated actions
• Filter: Filters content with tags
• Input: Represents user-entered data
• Suggestion: Offers dynamic suggestions

Assist Chip

• Initiates actions like opening a calendar event
• Non-checkable, with optional leading icon

Example

      
<com.google.android.material.chip.Chip
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/assist_chip"
    style="@style/Widget.Material3.Chip.Assist"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/assist_action"
    android:contentDescription="@string/assist_desc"
    app:chipIcon="@drawable/ic_assist_24"
    app:ensureMinTouchTargetSize="true"/>
      
    

      
val chip = findViewById<Chip>(R.id.assist_chip)
chip.setOnClickListener { /* Trigger smart action */ }
      
    

Assist Chip Anatomy

Component	Description	Behavior
Container	Rounded, 32dp min height, 1dp stroke	colorOnSurface background, clickable
Label	Action description	Visible, centered
Leading Icon	Optional, 18dp	Visible if set, enhances action context

Filter Chip

• Filters content with tags, checkable
• Alternative to checkboxes

Example

      
<com.google.android.material.chip.ChipGroup
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/chip_group"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:chipSpacing="8dp">
    <com.google.android.material.chip.Chip
        android:id="@+id/filter_chip_1"
        style="@style/Widget.Material3.Chip.Filter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        android:text="@string/filter_1"
        android:contentDescription="@string/filter_1_desc"/>
    <com.google.android.material.chip.Chip
        style="@style/Widget.Material3.Chip.Filter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/filter_2"
        android:contentDescription="@string/filter_2_desc"/>
</com.google.android.material.chip.ChipGroup>
      
    

      
val chipGroup = findViewById<ChipGroup>(R.id.chip_group)
chipGroup.setOnCheckedStateChangeListener { _, checkedIds ->
    // Handle filter selection
}
      
    

Filter Chip Anatomy

Component	Description	Behavior
Container	Checkable, rounded, 32dp min height	colorPrimary when checked, colorOnSurface outline
Label	Filter tag	Visible, centered
Leading Icon	Optional, 18dp	Visible if set
Trailing Icon	Checkmark, 18dp	Visible when checked

Input Chip

• Represents user-entered data, removable
• Ideal for contacts or tags

Example

      
<com.google.android.material.chip.ChipGroup
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/chip_group"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:chipSpacing="8dp">
    <com.google.android.material.chip.Chip
        android:id="@+id/input_chip_1"
        style="@style/Widget.Material3.Chip.Input"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/input_1"
        app:closeIconVisible="true"
        app:closeIconContentDescription="@string/close_desc"/>
    <com.google.android.material.chip.Chip
        style="@style/Widget.Material3.Chip.Input"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/input_2"
        app:closeIconVisible="true"
        app:closeIconContentDescription="@string/close_desc"/>
</com.google.android.material.chip.ChipGroup>
      
    

      
val chip = findViewById<Chip>(R.id.input_chip_1)
chip.setOnCloseIconClickListener { /* Remove chip */ }
      
    

Input Chip Anatomy

Component	Description	Behavior
Container	Rounded, 32dp min height	colorOnSurface background, removable
Label	User-entered data	Visible, centered
Leading Icon	Optional, 18dp	Visible if set
Close Icon	18dp, for removal	Visible, triggers removal

Suggestion Chip

• Offers dynamic suggestions, checkable
• Ideal for search filters or responses

Example

      
<com.google.android.material.chip.ChipGroup
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/chip_group"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:chipSpacing="8dp">
    <com.google.android.material.chip.Chip
        android:id="@+id/suggestion_chip_1"
        style="@style/Widget.Material3.Chip.Suggestion"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/suggestion_1"
        android:contentDescription="@string/suggestion_1_desc"/>
    <com.google.android.material.chip.Chip
        style="@style/Widget.Material3.Chip.Suggestion.Elevated"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/suggestion_2"
        android:contentDescription="@string/suggestion_2_desc"/>
</com.google.android.material.chip.ChipGroup>
      
    

      
val chip = findViewById<Chip>(R.id.suggestion_chip_1)
chip.setOnClickListener { /* Apply suggestion */ }
      
    

Suggestion Chip Anatomy

Component	Description	Behavior
Container	Checkable, rounded, 32dp min height	colorPrimary when checked, colorOnSurface outline
Label	Suggested action or filter	Visible, centered

Standalone Chip

• Uses ChipDrawable for chips in text fields
• Ideal for editable fields like email addresses

Example

      
<!-- res/xml/chip.xml -->
<chip
    xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/Widget.Material3.Chip.Input"
    android:text="@string/input_1"
    app:closeIconVisible="true"/>
      
    

      
val chipDrawable = ChipDrawable.createFromResource(context, R.xml.chip)
chipDrawable.setBounds(0, 0, chipDrawable.intrinsicWidth, chipDrawable.intrinsicHeight)
val span = ImageSpan(chipDrawable)
val text = editText.text!!
text.setSpan(span, 0, text.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
      
    

Attributes and Usage

Element	Attribute	Related Method(s)	Default Value	Usage Description
Container	app:chipBackgroundColor	setChipBackgroundColor, getChipBackgroundColor	?attr/colorOnSurface	Sets background color
Container	app:chipStrokeWidth	setStrokeWidth, getChipStrokeWidth	1dp	Sets stroke width
Container	app:chipStrokeColor	setStrokeColor, getChipStrokeColor	?attr/colorOnSurface	Sets stroke color
Container	app:shapeAppearance	setShapeAppearanceModel, getShapeAppearanceModel	?attr/shapeAppearanceCornerSmall	Sets corner shape
Container	android:checkable	setCheckable, isCheckable	true (Input, Filter, Suggestion)	Enables checkable behavior
Label	android:text	setChipText, getChipText	null	Sets label text
Leading Icon	app:chipIcon	setChipIcon, getChipIcon	null	Sets leading icon
Close Icon	app:closeIconVisible	setCloseIconVisible, isCloseIconVisible	true (Input)	Shows close icon

Theming Chips

• Customize color, typography, and shape
• Use res/values/styles.xml for theming

Example

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="colorOnSurface">@color/shrine_pink_100</item>
    <item name="chipStyle">@style/Widget.App.Chip</item>
</style>
<style name="Widget.App.Chip" parent="Widget.Material3.Chip.Input">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.Chip</item>
    <item name="chipBackgroundColor">@color/white</item>
    <item name="chipStrokeColor">@color/shrine_pink_100</item>
    <item name="shapeAppearance">@style/ShapeAppearance.App.Corner.Small</item>
</style>
<style name="ThemeOverlay.App.Chip" parent="">
    <item name="colorOnSurfaceVariant">@color/shrine_pink_900</item>
</style>
<style name="ShapeAppearance.App.Corner.Small" parent="ShapeAppearance.Material3.Corner.Small">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">4dp</item>
</style>
      
    

Material Design Documentation

• Adheres to Material Design guidelines for Chips
• Covers design, behavior, theming specifications
• Includes accessibility and ChipDrawable usage
• Refer to Material Design documentation for full details

FAQ

What are Material 3 Chips?

• Compact elements for inputs, attributes, or actions

---

How many chip variants are there?

• Four variants: Assist, Filter, Input, Suggestion

---

When to use Input Chips?

• Use for user-entered data like contacts or tags

---

How to make chips accessible?

• Use auto-provided labels or custom contentDescription

---

Can I customize chip appearance?

• Yes, theme via res/values/styles.xml

---

How to add the Material 3 library?

• Include Material Components for Android library

---

Are there updates for the latest standards?

• Reflects latest Material 3 standards for Chips