Hands-on with Material Components for Android: Chips

Part 5 of a series covering practical usage of Material Components for Android

Nick Rout
May 13 ยท 7 min read

Basic usage ๐Ÿ

<FrameLayout
  ...>

  <com.google.android.material.chip.Chip
    android:id="@+id/chip"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Chip" />

</FrameLayout>

Choosing a style ๐Ÿค”

Applying attributes ๐ŸŽ›๏ธ

Chip icon

Close icon

Checked icon

Listening for clicks, closes and checks ๐Ÿ‘‚

chip.setOnClickListener {
   // Handle chip click
}
chip.setOnCloseIconClickListener {
    // Handle chip close icon click
}
chip.setOnCheckedChangeListener { chip, isChecked ->
    // Handle chip checked/unchecked
}

Grouping Chips ๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ฆ

Chips grouped with ChipGroup
<com.google.android.material.chip.ChipGroup
  android:id="@+id/chipGroup"
  android:layout_width="match_parent"
  android:layout_height="wrap_content">

  <com.google.android.material.chip.Chip
    android:id="@+id/choice1"
    ... />

  <com.google.android.material.chip.Chip
    android:id="@+id/choice2"
    ... />

  ...

</com.google.android.material.chip.ChipGroup>
<!-- Optionally wrap ChipGroup in a HorizontalScrollView for scrolling behavior --><com.google.android.material.chip.ChipGroup
  ...
  app:singleLine="true">    ...</com.google.android.material.chip.ChipGroup>
ChipGroup with singleLine enabled
Vertical and horizontal Chip spacing
Single- vs. multi-select
chipGroup.check(R.id.choice1)
val checkedChipId = chipGroup.checkedChipId // Will return View.NO_ID if singleSelection = false
chipGroup.setOnCheckedChangeListener { group, checkedId ->
    // Handle child Chip checked/unchecked
}

Advanced usage with ChipDrawable ๐Ÿค“

<chip
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  app:chipIcon="@drawable/ic_chip"
  app:closeIconVisible="false"
  android:text="ChipDrawable" />
val chipDrawable = ChipDrawable.createFromResource(context, R.xml.chip)
chip.setBounds(0, 0, chip.intrinsicWidth, chip.intrinsicHeight)
val span = ImageSpan(chip)
val text = editText.text!!
text.setSpan(span, 0, text.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
A ChipDrawable used for an EditText span

Theming ๐ŸŽจ

Color

Color theming

Typography

<style name="ChipTextAppearance" parent="TextAppearance.MaterialComponents.Chip">
  <item name="fontFamily">@font/roboto_mono</item>
  <item name="android:fontFamily">@font/roboto_mono</item>
</style>
Type theming

Shape

Shape theming

More resources ๐Ÿ“š


Over Engineering

Over is a mobile app for creativity that allows you to build beautiful custom designs

Nick Rout

Written by

Nick Rout

Android Engineer at Over | Google Developer Expert for Android | GDG Cape Town Organizer | ๐ŸŒš

Over Engineering

Over is a mobile app for creativity that allows you to build beautiful custom designs