Chips: Material Components for Android

One of the cool widgets that you can use with the Material Design Components library is Chip. A Chip is a component that can represent input, filter, choice or action of a user. This post will be on the implementation of different chip types and various attributes of chips.

Credit

Setup

To use Chips, your project needs to have material components dependency.

implementation 'com.google.android.material:material:1.0.0-beta01'

Also set your app theme such that it inherits one of MaterialComponents themes.

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="chipIconTint">@color/chipIconTint</item>
</style>

Introduction

The basic XML declaration of chip is as follows.

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

It can also be defined dynamically as follows.

val chip = Chip(context)
chip.text = "Name Surname"
chip.chipIcon = ContextCompat.getDrawable(requireContext(), baseline_person_black_18)
//..likewise various chip attributes can be set

There are four types of chips: Entry (Input) Chips, Filter Chips, Choice Chips and Action Chips. Chips are generally used with ChipGroup which is to hold a number of chips. Below is the XML code for a ChipGroup holding 3 filter chips.

<com.google.android.material.chip.ChipGroup
    android:id="@+id/chipGroup"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="24dp"
    android:layout_marginTop="20dp"
    android:layout_marginEnd="24dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView2">

    <com.google.android.material.chip.Chip
        android:id="@+id/chip6"
        style="@style/Widget.MaterialComponents.Chip.Filter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Fire" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip7"
        style="@style/Widget.MaterialComponents.Chip.Filter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Water" />

    <com.google.android.material.chip.Chip
        android:id="@+id/chip8"
        style="@style/Widget.MaterialComponents.Chip.Filter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Psychic" />
</com.google.android.material.chip.ChipGroup>

To dynamically add chips to a ChipGroup, a simple line of code is enough.

chipGroup.addView(chip as View)

Entry (Input) Chips

These chips are used for inputs such as e-mail inputs. It can be declared in XML as:

<com.google.android.material.chip.Chip
    style="@style/Widget.MaterialComponents.Chip.Entry"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/chip_text"
    app:chipIcon="@drawable/ic_avatar_circle_24"/>

Or it can be declared dynamically:

val chip = Chip(context)
chip.text = "Name Surname"
chip.chipIcon = ContextCompat.getDrawable(requireContext(), baseline_person_black_18)
chip.isCloseIconEnabled = true
// following lines are for the demo
chip.setChipIconTintResource(R.color.chipIconTint)
chip.isClickable = true
chip.isCheckable = false
chipGroup.addView(chip as View)
chip.setOnCloseIconClickListener { chipGroup.removeView(chip as View) }

Below demo is implemented by adding chips dynamically to a ChipGroup. Note that we set a CloseIconClickListener to chip and thus whenever user clicks on the close icon, the chip is removed from the ChipGroup.

Entry Chips

Filter Chips

Filter chips are used as filters for content. Filter chips are checkable, with an optional chip icon and an optional close icon by default. They are generally used within a ChipGroup.

<com.google.android.material.chip.Chip
    android:id="@+id/chip13"
    style="@style/Widget.MaterialComponents.Chip.Filter"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/chip_text" />

Filter Chips

Choice Chips

Choice chips are to select an option among a choice set. They are checkable by default and chip icon is optional.

<com.google.android.material.chip.Chip
    android:id="@+id/chip4"
    style="@style/Widget.MaterialComponents.Chip.Choice"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/chip_text" />

Choice Chips

ActionChips

Action chips are used for primary user actions. They are not checkable and can have an optional chip icon.

<com.google.android.material.chip.Chip
    android:id="@+id/turnLightsOnChip"
    style="@style/Widget.MaterialComponents.Chip.Action"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/chip_text"
    app:chipIcon="@drawable/baseline_brightness_5_black_24" />

Action Chips

Finally

The source code of the demo project can be found on Github. Feel free to share ideas, make comments and ask questions.