Material Chips – Material Components for Android

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 ChipGroup, 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

Chip Attributes

android:text
android:textAppearance Shape
app:chipCornerRadius Size
app:chipMinHeight Background
app:chipBackgroundColor Border
app:chipStrokeColor
app:chipStrokeWidth Ripple
app:rippleColor Chip Icon
app:chipIconVisible
app:chipIcon
app:chipIconTint
app:chipIconSize Close Icon
app:closeIconVisible
app:closeIcon
app:closeIconSize
app:closeIconTint Checkable
android:checkable Checked Icon
app:checkedIconVisible
app:checkedIcon Motion
app:showMotionSpec
app:hideMotionSpec Paddings
app:chipStartPadding
app:iconStartPadding
app:iconEndPadding
app:textStartPadding
app:textEndPadding
app:closeIconStartPadding
app:closeIconEndPadding
app:chipEndPadding TouchTarget
app:chipMinTouchTargetSize
app:ensureMinTouchTargetSize

Handling Clicks

Call setOnClickListener(OnClickListener) to register a callback to be invoked when the chip is clicked.

chip.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
// Handle the click.
}
});

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.

Setup

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 MaterialComponents themes.

<style name="AppTheme" parent="Base.Theme.MaterialComponents.Light">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>

Entry (Input) Chips

Entry chip used to display captured user input in a noneditable 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.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"/>
Entry (Input) Chips

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.Chip
android:id="@+id/chip"
style="@style/Widget.MaterialComponents.Chip.Filter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/chip_text" />
Filter Chip

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. But ideally, they should be used wherever you feel the need to show RadioButton.

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

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.Chip
android:id="@+id/chip"
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 chip
Github
Medium

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top
%d bloggers like this: