Import
XML Layout
Add to your layout XML:
<com.google.android.material.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your text here" />
Usage
Basic usage
A simple chip with text content.
<com.google.android.material.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sample Chip" />
Advanced usage
Chip with icon and customized close behavior.
<com.google.android.material.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/Widget.Backbase.Chip"
android:text="Chip with Icon"
app:chipIcon="@drawable/ic_public"
app:closeIconVisible="true" />
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
android:text |
String |
null |
|
app:closeIconVisible |
Boolean |
true |
|
app:chipIcon |
Drawable |
null |
android:text
The text content displayed on the chip.
<com.google.android.material.chip.Chip
android:text="Sample Chip"
style="@style/Widget.Backbase.Chip" />
app:closeIconVisible
Controls whether the close/dismiss icon is visible. When true, users can tap the close icon to dismiss the chip.
<com.google.android.material.chip.Chip
app:closeIconVisible="false"
style="@style/Widget.Backbase.Chip" />
app:chipIcon
Sets a leading icon for the chip. The icon appears before the text content.
<com.google.android.material.chip.Chip
app:chipIcon="@drawable/ic_star"
style="@style/Widget.Backbase.Chip" />
Styling
Default styling
The Widget.Backbase.Chip style provides consistent theming with brand colors, typography, and shape.
<com.google.android.material.chip.Chip
style="@style/Widget.Backbase.Chip"
android:text="Default Styled Chip" />
Custom styling
Create custom chip styles by extending the base style.
<style name="Widget.Custom.Chip" parent="Widget.Backbase.Chip">
<item name="chipBackgroundColor">@color/custom_background</item>
<item name="android:textColor">@color/custom_text</item>
</style>
Accessibility
Content description
Provide meaningful content descriptions for screen readers.
<com.google.android.material.chip.Chip
android:contentDescription="@string/chip_category_description"
style="@style/Widget.Backbase.Chip" />
Close action accessibility
When closeIconVisible="true", the close action is automatically accessible with appropriate announcements.
Focus handling
Chips support standard Android focus navigation and can be navigated using keyboard or accessibility services.
Best practices
Text content
- Keep chip text concise and descriptive
- Use sentence case for consistency
- Avoid overly long text that might cause layout issues
Icon usage
- Use icons sparingly and only when they add meaningful context
- Ensure icons are recognizable and consistent with your design system
- Test icon visibility across different screen densities
Grouping
- Use ChipGroup for related chips that function as filters or categories
- Consider the flow and logical grouping of chip options
- Limit the number of chips to avoid overwhelming users
Design tokens
The component uses Backbase design tokens for consistent theming:
- Colors: Background and text colors from brand token group
- Typography: Body1 text appearance for consistent text styling
- Shape: Maximum radius token for fully rounded appearance
- Icons: System close icon with consistent tinting