Android

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:

Android Basic Material Chip

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.

Android Material Design with chip corner radius
cornerChipRadius=5dp

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

Android Material Design with chip  background color
chipBackgroundColor=”@color/colorBlack”

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

Android Material Design with chip stroke properties
chipStrokeColor=”@color/colorAccent” && chipStrokeWidth=”2dp”

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

Android Material Design with chip Ripple Color
app:rippleColor=”@color/colorAccent”

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

Android Material Design with chip icon
app:chipIcon=”@drawable/androidIcon”

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

Android Material Design with chip icon size and accent color
app:chipIconTint=”@color/colorAccent” && app:chipIconSize=”30dp”

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.

Android Material Design with close chip icon visibility
app:closeIconVisible=”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.

Android Material Design with chip close icon
app:closeIcon=”@drawable/remove_drawable”

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

Android Material Design with chip close icon tint color and size
app:closeIconTint=”@color/colorAccent” && app:closeIconSize=”30dp”

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

Android Material Design with chip checkable
android:checkable=”true”

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 PropertyProgrmatically
Set Corner Radiuschip.shapeAppearanceModel = ShapeAppearanceModel().withCornerSize(5f)
Chip Background Colorchip.setChipBackgroundColorResource(R.color.colorBlack)
Stroke Color & Widthchip.setChipStrokeColorResource(R.color.colorAccent)
chip.chipStrokeWidth = 2.0f
Ripple Colorchip.setRippleColorResource(R.color.colorAccent)
Set Chip Iconchip.setChipIconResource(R.drawable.androidIcon)
Change chip Icon Tint & Sizechip.setChipIconTintResource(R.color.colorAccent)
chip.chipIconSize = 30f
Change chip close icon visibilitychip.isCloseIconVisible = true
Add custom close iconchip.closeIcon = ContextCompat.getDrawable(this,R.drawable.remove_drawable)
Close Icon Tint & Sizechip.setCloseIconTintResource(R.color.colorAccent)
chip.closeIconSize = 30f
Making chip checkablechip.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"
        ........ />
Android Material Design with filter chip style

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"
        ........ />
Android Material Design with chip choice style

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"
        ...... />
Android Material Design with entry chip style

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…

Write A Comment