Android Chips — Material Component For Android
By: Velmurugan Murugesan
Tags: Material Chips, Android Chips, Material Components, Material Design, Material Chips Android

Android Chips is one the component in Material Design library. A Material Chip is a component that can represent input, filter, choice or action of a user.

A Material Chip represents a complex entity in a small block, such as a contact. It is a rounded button that consists of a label, an optional chip icon, and an optional close icon. A chip can either be clicked or toggled if it is checkable.

Chips may be placed in a , which can be configured to lay out its chips in a single horizontal line or reflowed across multiple lines. If a chip group contains checkable chips, it can also control the multiple-exclusion scope for its set of chips so that checking one chip unchecks all other chips in the group. — Material.io

This is my sample app using Android chips,

sample android chips application demo

Setup Material Chips in your Android Studio

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

implementation 'com.google.android.material:material:1.1.0-alpha05'

Also, set your app theme such that it inherits one of Material Components themes.

<style name="AppTheme" parent="Base.Theme.MaterialComponents.Light">

<!-- Customize your theme here. -->

<item name="colorPrimary">@color/colorPrimary</item>

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

<item name="colorAccent">@color/colorAccent</item>

</style>

Usage

The Chip widget provides a complete implementation of Material Design’s chip component. Example code of how to include the widget in your layout:

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

Types Of Material Chip

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.

1. Entry (Input) Chips

Entry chip used to display captured user input in a non editable format. It’s a very nice way to showcase the user input.

One of the most obvious usages of Android Entry chip is shown in the Gmail app. Particularly the email input experience- when an email is entered by the user, it is showcased as an entry chip, sort of a pill-shaped layout.

Now according to the material design, this element should be an Android Chip with style as ‘Entry’. This chip can also have a close icon along with a chip icon. Generally, this type of chip is contained in a ChipGroup.

ChipGoup class is similar to the RadioGroup class, as it is used to hold multiple chips. It has the properties to display all the chips in a single line.

<com.google.android.material.chip.ChipGroup

android:id="@+id/chip_group"

android:layout_width="0dp"

android:layout_height="wrap_content"/>

Adding text to Entry Chip programmatically.

private fun addChipToGroup(person: String) {

val chip = Chip(context)

chip.text = person

chip.chipIcon = ContextCompat.getDrawable(requireContext(), R.drawable.ic_launcher_background)

chip.isChipIconVisible = false

chip.isCloseIconVisible = true

// necessary to get single selection working

chip.isClickable = true

chip.isCheckable = false

chip_group.addView(chip as View)

chip.setOnCloseIconClickListener { chip_group.removeView(chip as View) }}

Entry Chip demo

2.Filter Chip

Filter chips would start acting as a radio button. This means in a way only one selection can be made at a time. This functionality is achieved by adding all the filter chips in a ChipGroup and setting the property app:singleSelection=”true” of Chip Group.

<com.google.android.material.chip.ChipGroup

android:layout_width="0dp"

android:layout_height="wrap_content"

app:singleSelection="true"

app:layout_constraintEnd_toEndOf="parent"

android:layout_marginEnd="8dp"

app:layout_constraintStart_toStartOf="parent"

android:layout_marginStart="8dp"

android:id="@+id/chip_group_filter"

app:layout_constraintTop_toBottomOf="@+id/text_filter"

>

<com.google.android.material.chip.Chip

style="@style/Widget.MaterialComponents.Chip.Filter"

android:layout_width="wrap_content"

android:text="Fast Delivery"

android:layout_height="wrap_content"

android:id="@+id/chip2"

/>

<com.google.android.material.chip.Chip

style="@style/Widget.MaterialComponents.Chip.Filter"

android:layout_width="wrap_content"

android:text="Pickup"

android:layout_height="wrap_content"

android:id="@+id/chip3"

/>

<com.google.android.material.chip.Chip

style="@style/Widget.MaterialComponents.Chip.Filter"

android:layout_width="wrap_content"

android:text="Best Offer"

android:layout_height="wrap_content"

android:id="@+id/chip4"

/>

<com.google.android.material.chip.Chip

style="@style/Widget.MaterialComponents.Chip.Filter"

android:layout_width="wrap_content"

android:text="Fast Selling"

android:layout_height="wrap_content"

android:id="@+id/chip5"

/>

</com.google.android.material.chip.ChipGroup>

Click Listener for the Filter Chip group,

chip_group_filter.setOnCheckedChangeListener { group, checkedId -> val chip: Chip? = group.findViewById(checkedId) chip?.let {chipView ->

val predicate: (Items) -> Boolean = {item->

item.category == chipView.text

}

val filter = prepareData().filter(predicate)

adapter?.setData(filter)

} ?: kotlin.run {

adapter?.setData(prepareData())

}

}

Filter Chip Demo

3.Choice Chip

The choice chip allows the user to select only one of the available options just like the filter chips. But with one difference, it does not have a check icon on it.

Instead according to material design guidelines, it displays the selection with a change of color, when it is selected. If you wish you can use a chipIcon with this chip.

defining the choice chip in XML.

<com.google.android.material.chip.ChipGroup

android:layout_width="0dp"

app:singleSelection="true"

android:layout_height="wrap_content"

android:layout_marginTop="8dp"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintStart_toStartOf="parent"

android:layout_marginStart="8dp"

app:layout_constraintEnd_toEndOf="parent"

android:layout_marginEnd="8dp"

android:id="@+id/chip_group_choice"

> <com.google.android.material.chip.Chip

android:layout_width="wrap_content"

android:text="Soft"

style="@style/Widget.MaterialComponents.Chip.Choice"

android:layout_height="wrap_content"

android:id="@+id/chip1"

/>

<com.google.android.material.chip.Chip

android:layout_width="wrap_content"

android:text="Extra Soft"

style="@style/Widget.MaterialComponents.Chip.Choice"

android:layout_height="wrap_content"

android:id="@+id/chip2"

/>

<com.google.android.material.chip.Chip

android:layout_width="wrap_content"

android:text="Medium"

style="@style/Widget.MaterialComponents.Chip.Choice"

android:layout_height="wrap_content"

android:id="@+id/chip3"

/>

<com.google.android.material.chip.Chip

android:layout_width="wrap_content"

android:text="Hard"

style="@style/Widget.MaterialComponents.Chip.Choice"

android:layout_height="wrap_content"

android:id="@+id/chip4"

/>

</com.google.android.material.chip.ChipGroup>

handling ChoiceChip selection on chipgroup.

chip_group_choice.setOnCheckedChangeListener { group, checkedId -> val chip: Chip? = group.findViewById(checkedId) chip?.let {chipView ->

Toast.makeText(context, chip.text, Toast.LENGTH_SHORT).show()

} ?: kotlin.run {

}

}

Choice Chip Cemo

4.Action Chip (Default)

It’s a single actionable chip, in short, its an alternative to the button widget. If you have to perform an action, based on users tap, this is the chip that you should use. Generally, this type of chip is placed after the content of the page and is used as a clickable, just like a button.

<com.google.android.material.chip.ChipGroup

android:layout_width="0dp"

android:layout_height="wrap_content"

android:id="@+id/chip_group_action"

android:padding="10dp"

app:singleLine="true"

app:singleSelection="true"

app:chipSpacingHorizontal="10dp"

style="@style/Widget.MaterialComponents.Chip.Action"

>

<com.google.android.material.chip.Chip

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/chip_alarm"

style="@style/Widget.MaterialComponents.Chip.Action"

android:text="Set Alarm"

app:chipIcon="@drawable/ic_access_alarm_black_24dp"

/>

<com.google.android.material.chip.Chip

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/chip_music"

android:text="Play Music"

style="@style/Widget.MaterialComponents.Chip.Action"

app:chipIcon="@drawable/ic_music_note_black_24dp"

/>

<com.google.android.material.chip.Chip

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/chip_call"

android:text="Call to Friend"

style="@style/Widget.MaterialComponents.Chip.Action"

app:chipIcon="@drawable/ic_call_black_24dp"

/>

<com.google.android.material.chip.Chip

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/chip_message"

android:text="Send Message"

style="@style/Widget.MaterialComponents.Chip.Action"

app:chipIcon="@drawable/ic_message_black_24dp"

/>

</com.google.android.material.chip.ChipGroup>

Implemention click listener for the ActionChips.

chip_alarm.setOnClickListener {

Toast.makeText(context, "Alarm", Toast.LENGTH_SHORT).show()

} chip_music.setOnClickListener {

Toast.makeText(context, "Music", Toast.LENGTH_SHORT).show()

} chip_call.setOnClickListener {

Toast.makeText(context, "Call", Toast.LENGTH_SHORT).show()

} chip_message.setOnClickListener {

Toast.makeText(context, "Message", Toast.LENGTH_SHORT).show()

}

Action Chip Demo

Android Chips Attributes

Chip Icon

Chip icon

app:chipIconVisible — visibility of the chip icon.

app:chipIcon — drawable icon to show at the start of the chip.

app:chipIconSize — size of the chip icon.

Click listener for the clip icon,

chip.setOnClickListener {

// Handle chip click

}

Close Icon

Close icon

app:closeIconVisible — visibility of the close icon.

app:closeIcon — drawable icon show at end of the chip.

app:closeIconSize — size of the close icon.

Click listener for close icon,

chip.setOnCloseIconClickListener {

// Handle chip close icon click

}

Checked Icon

Checked Icon

android:checkable — Whether or not checkable tapping is enabled.

app:checkedIconVisible — visibility of the checked icon.

app:checkedIcon — drawable to show after user toggled chip button.

Click listener for checked icon,

chip.setOnCheckedChangeListener { chip, isChecked ->

// Handle chip checked/unchecked

}

Color

chipBackgroundColor — used to customize the chip background.

textColor — customize the text color.

chipIconTint — the color of the Chip icons can be customized

closeIconTint — Color of the close icon in the chip.

hipStrokeColor — stroke color of the chip.

Android ChipGroup Attributes

singleLine — Put all the Chips under the chip group in single line.

<com.google.android.material.chip.ChipGroup

android:id="@+id/chip_group_filter"

android:layout_width="0dp"

android:layout_height="wrap_content"

app:singleLine="true">

Single line chip group

chipSpacingVertical — Vertical space between two chips in chip group.

<com.google.android.material.chip.ChipGroup

android:id="@+id/chip_group_filter"

android:layout_width="0dp"

android:layout_height="wrap_content"

app:chipSpacingVertical="40dp">

Vertical space chip group

chipSpacingHorizontal — Horizontal space between two chips.

<com.google.android.material.chip.ChipGroup

android:id="@+id/chip_group_filter"

android:layout_width="0dp"

android:layout_height="wrap_content"

app:chipSpacingHorizontal="40dp">

Horizontal Chip group spacing

singleSelection –The singleSelection attribute can be set to true on a ChipGroup in order to toggle single-select and multi-select behavior of child Chips.

selectionRequired — The selectionRequired attribute can be set to true on a ChipGroup to prevent all child Chips from being deselected.

That’s all. Done with the Android chip explanation.

You can download my Android Chips Material Design example in Github.

Check my other example using Material design.

Android Snackbar Example

Cardview Android Example [Beginners]

Finally

Thanks for reading. Please try Material chips in your application. And let me know your feedback in the comments.

Give a clap if you like it.

Originally published at https://howtodoandroid.com on July 22, 2020.