LOST IN ANDROID SUPPORT MATERIAL DESIGN LIBRARY: CHIPS

This article is the third part of the series, Lost in Android Support Material Design Library. If you didn’t read the previous one you can start from here.

So, today we will be covering the features of Android Material Chip Component. A Chip is a compact element that shows a label, an optional icon, and an optional close icon. Moreover, chips are flexible enough for entering information, handling the action of a user, and filtering the content.

• 

Table of content:

1. Setup
2. Basic Usage Of Android Chip With XML
3. Testing Out Multiple Chip Attributes
4. Setting Chip Properties Programmatically
5. Listening For Callbacks
6. Different types of Material Chips

1. Setup

To use chips in our app first we need to add the android material design dependency. Open the build.gradle file of your application and include the Google Maven Repository in it. For example.

  allprojects {
    repositories {
      google()
      jcenter()
    }
  }

And now add the library in the dependencies section:

  dependencies {
    // ...
    implementation 'com.google.android.material:material:1.2.0-aplha01'
    // ...
  }

2. Basic Usage Of Chip With XML

Example code of how to declare the chip widget inside the layout.

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

Visually it looks this:

3. Testing Out Multiple Chip Attributes

There are many chips attributes provided by Material Design Library for styling a chip via XML. Let’s check out them one by one.

1. app:cornerChipRadius: Corner radius to apply the chip’s shape.

2. app:chipBackgroundColor: Background color to apply on the chip.

3. app:chipStrokeColor & app:chipStrokeWidth: The stroke color to apply the chip outline and width in size.

4. app:rippleColor: Apply the ripple color to Chip.

5. app:chipIcon: Sets the icon drawable to display at the start of the Chip.

6. app:chipIconTint && app:chipIconSize: Apply the tinting color to chipIcon and set the size of chipIcon.

7. app:closeIconVisible: Show or hide the close icon visibility on-chip. By default the value is false. Also by default, the cancel icon will be shown on the right side of the chip if we set the value to true.

If you see at the previous demo the close icon hides when I press the cancel icon and shows again when I press on the material chip. For this, we also need to add some code inside the Activity onCreate method.

        chip.setOnCloseIconClickListener {
            chip.isCloseIconVisible = false
        }

        chip.setOnClickListener {
            chip.isCloseIconVisible = true
        }

The setOnCloseIconClickListener callback to be invoked when the chip’s close is clicked and simply hiding the icon visibility inside the callback. And, the setOnClickListener callback will be invoked when the chip is clicked so in that we’re showing the icon again.

8. app:closeIcon: We can also use our custom drawable for close icon instead of using the default cancel icon.

9. app:closeIconTint && app:closeIconSize: Apply the tinting color to closeIcon and set the size of closeIcon.

10. android:checkable: Set whether this chip is checkable or not.

You can also set the custom checked icon instead of using the default tick icon with the app:checkedIcon property.

4. Setting Chip Properties Programmatically

We can also define all the above properties programmatically.

Attribute Property	Progrmatically
Set Corner Radius	chip.shapeAppearanceModel = ShapeAppearanceModel().withCornerSize(5f)
Chip Background Color	chip.setChipBackgroundColorResource(R.color.colorBlack)
Stroke Color & Width	chip.setChipStrokeColorResource(R.color.colorAccent) chip.chipStrokeWidth = 2.0f
Ripple Color	chip.setRippleColorResource(R.color.colorAccent)
Set Chip Icon	chip.setChipIconResource(R.drawable.androidIcon)
Change chip Icon Tint & Size	chip.setChipIconTintResource(R.color.colorAccent) chip.chipIconSize = 30f
Change chip close icon visibility	chip.isCloseIconVisible = true
Add custom close icon	chip.closeIcon = ContextCompat.getDrawable(this,R.drawable.remove_drawable)
Close Icon Tint & Size	chip.setCloseIconTintResource(R.color.colorAccent) chip.closeIconSize = 30f
Making chip checkable	chip.isCheckable = true

5. Listening For Callbacks

Android chips have some UI elements that can response to click events.

Registering for a callback when the chip clicks:

chip.setOnClickListener {
   
}

Registering for a callback when a close chip icon click:

chip.setOnCloseIconClickListener {

}

Registering a callback to be invoked when the chip is checkable state changes.

chip.setOnCheckedChangeListener { chip, isChecked ->

}

Note: The above callback only works if the chip.isCheckable = true.

6. Different types of Material Chips

From the design guidelines, there are four types of chips added to the Android Material Design Library.

6.1 Filter Chip

As the name tells the filter chips are used as a filter within a ChipGroup and are always checkable.

<com.google.android.material.chip.Chip
        android:id="@+id/chip"
        .........
        style="@style/Widget.MaterialComponents.Chip.Filter"
        ........ />

6.2 Choice Chip

Choice chips allow the selection of a single chip from a set of options. The style usually contains an optional chip icon and is always checkable. Choice chips are usually placed within a ChipGroup.

  <com.google.android.material.chip.Chip
        android:id="@+id/chip"
        ......
        style="@style/Widget.MaterialComponents.Chip.Choice"
        ........ />

6.3 Entry Chips (Input)

The entry chips are usually used for inputs such as searching text and verify that input by covering text into the chip. By default, the input chip contains a close icon, chip icon, and it is checkable.

    <com.google.android.material.chip.Chip
        android:id="@+id/chip"
        ......
        style="@style/Widget.MaterialComponents.Chip.Entry"
        ...... />

Note: We need to set a CloseIconClickListener to chip and thus whenever a user clicks on the close icon, the chip is removed from the ChipGroup.

6.4 Action Chip

If we did not set any style property to chip widget then the default @style/Widget.MaterialComponents.Chip.Action will be used.

---

I hope this article provides you some insight on the Android Material Chip component. Hopefully, in the next article, we’ll see how to use ChipGroup with Chips. If you wanna get notified for my every article please subscribe to my website at home page.

Thank you for being here and keep reading…