Ultimate Guide to Material 3 Chips in Android XML (2025 Tutorial + Examples)
Ultimate Guide to Material 3 Chips in Android: Tutorial & Examples for 2025 🚀
Overview 📖
Material 3 Chips are compact elements representing inputs, attributes, or actions, enabling users to enter information, make selections, filter content, or trigger actions. This guide covers four variants—Assist, Filter, Input, and Suggestion—their implementation, and theming for 2025. 🏷️
Design and API Documentation 🔗
Using Chips 🤖
Add the Material Components for Android library dependency to use Material 3 Chips. See the Get Started guide. Chips are grouped using ChipGroup for layout and selection management. Use a Theme.Material3.* theme for auto-inflation as com.google.android.material.chip.Chip. 🛠️
Making Chips Accessible ♿
Chips are readable by screen readers like TalkBack, with text labels automatically provided. Set android:contentDescription for custom accessibility labels, especially for close icons. Use ensureMinTouchTargetSize for accessible touch targets. See the Android accessibility guide. 🗣️
Behavior and Configuration 🎬
Handle chip interactions with setOnClickListener, setOnCloseIconClickListener, or setOnCheckedChangeListener. Configure ChipGroup for single/multi-selection. Example:
chip.setOnClickListener { /* Handle click */ }
chip.setOnCheckedChangeListener { _, isChecked -> /* Handle check */ }
chipGroup.setOnCheckedStateChangeListener { _, checkedIds -> /* Handle group changes */ }
Chip Variants 🌟
Material 3 Chips come in four variants: Assist (smart actions), Filter (content filtering), Input (discrete information), and Suggestion (dynamic suggestions). Each serves unique interaction needs. 🏷️
- Assist Chip: Triggers smart or automated actions.
- Filter Chip: Filters content with tags.
- Input Chip: Represents user-entered data.
- Suggestion Chip: Offers dynamic suggestions.
Assist Chip 🤖
Assist Chips initiate smart or automated actions, like opening a calendar event. 🔧
Assist Chip Example 💻
API and source code:
The following example shows an assist chip.
val chip = findViewById(R.id.assist_chip)
chip.setOnClickListener { /* Trigger smart action */ }
Anatomy and Key Properties 📏
An assist chip has a container, label, and optional leading icon. 🔧
- Container: Rounded, 32dp min height.
- Label: Action description. ✍️
- Leading Icon: Optional, 18dp. 🖼️
Filter Chip 🔍
Filter Chips use tags to filter content, acting as compact alternatives to checkboxes. 🏷️
Filter Chip Example 💻
The following example shows filter chips in a ChipGroup.
val chipGroup = findViewById(R.id.chip_group)
chipGroup.setOnCheckedStateChangeListener { _, checkedIds ->
// Handle filter selection
}
Anatomy and Key Properties 📏
A filter chip has a container, label, and optional leading/trailing icons. 🔍
- Container: Checkable, rounded.
- Label: Filter tag. ✍️
- Icons: Leading (optional), trailing (checked state). 🖼️
Input Chip 📥
Input Chips represent discrete user-entered data, like contacts or tags, with a close icon for removal. 📋
Input Chip Example 💻
The following example shows input chips in a ChipGroup.
val chip = findViewById(R.id.input_chip_1)
chip.setOnCloseIconClickListener { /* Remove chip */ }
Anatomy and Key Properties 📏
An input chip has a container, label, trailing close icon, and optional leading icon. 📥
- Container: Holds content, removable.
- Label: User-entered data. ✍️
- Icons: Close icon, optional leading icon. 🖼️
Suggestion Chip 💡
Suggestion Chips present dynamic suggestions, like search filters or responses. 🗳️
Suggestion Chip Example 💻
The following example shows suggestion chips in a ChipGroup.
val chip = findViewById(R.id.suggestion_chip_1)
chip.setOnClickListener { /* Apply suggestion */ }
Anatomy and Key Properties 📏
A suggestion chip has a container and label, with no default icons. 💡
- Container: Checkable, rounded.
- Label: Suggested action or filter. ✍️
Attributes (All Variants) 📋
| Element | Attribute | Related method(s) | Default value |
|---|---|---|---|
| Container | app:chipBackgroundColor |
setChipBackgroundColor, getChipBackgroundColor |
?attr/colorOnSurface |
app:chipStrokeWidth |
setStrokeWidth, getChipStrokeWidth |
1dp |
|
app:shapeAppearance |
setShapeAppearanceModel, getShapeAppearanceModel |
?attr/shapeAppearanceCornerSmall |
|
| Label | android:text |
setChipText, getChipText |
null |
| Icon | app:chipIcon |
setChipIcon, getChipIcon |
null |
| Close Icon | app:closeIconVisible |
setCloseIconVisible, isCloseIconVisible |
true (input) |
Styles 🎨
- Assist Chip:
Widget.Material3.Chip.Assist - Filter Chip:
Widget.Material3.Chip.Filter - Input Chip:
Widget.Material3.Chip.Input - Suggestion Chip:
Widget.Material3.Chip.Suggestion - Default style theme attribute:
?attr/chipStyle
See the full list of styles and attrs. 🔗
Theming Chips 🖌️
Material Theming customizes chip color, typography, and shape. 🎨
Theming Example 💻
Theming example for chips:
Specific styles for chips without affecting other components:
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, with removable options. 📥
How to make chips accessible? ♿
Use auto-provided labels or custom contentDescription; ensure min touch target size. 🗣️
Can I customize chip appearance? 🎨
Yes, theme color, typography, and shape via res/values/styles.xml. 🖌️
How to add the Material 3 library? 📦
Include the Material Components for Android library. See the Get Started guide. 🛠️
Are there updates for 2025? 🗓️
This guide reflects 2025 Material 3 standards for chips. 🚀
Comments
Post a Comment