Chips and ChipGroups: The New Heroes of Android User Interface

Discover the exciting possibilities of integrating Chips and ChipGroups into your Android apps in our latest blog post! From modern design to enhanced user interaction, learn how these new Material Design components can take your applications to the next level.

Android Chips

Chips are essentially texts displayed within a rounded background. They are selectable and can also contain icons. Chips are a newer and stylized form of RadioButtons. To use Chips in your Android application, you need to use the latest Android SDK 28. The following dependencies need to be added to the build.gradle:

implementation 'androidx.appcompat:appcompat:1.0.0-alpha1'
implementation 'com.google.android.material:material:1.0.0-alpha1'

Using Android Chips

A Chip is defined in the XML layout as:

<com.google.android.material.chip.Chip
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:chipText="Default" />

`app:chipText` displays the text part in the Chip. Here’s how the Chip looks on the screen:

Types of Chips

Chips can be styled as:

• Default: This does nothing unless another XML attribute is present.
• Entry: We need to add the style `@style/Widget.MaterialComponents.Chip.Entry`. This makes the Chip selectable and includes by default a check and close icon.
• Choice: This type of Chip is generally used to toggle selection marks on or off. Style `@style/Widget.MaterialComponents.Chip.Choice` is commonly used in Chip Groups.
• Actions: This Chip is selectable and is used to trigger actions when clicked. Style `@style/Widget.MaterialComponents.Chip.Action`.
• Filter: This Chip is selectable and displays a check when selected. Style `@style/Widget.MaterialComponents.Chip.Filter`.

XML Attributes

• `app:chipText`
• `app:chipBackgroundColor`
• `app:rippleColor` – Displays a custom ripple effect when the Chip is pressed.
• `app:checkable` – Used to set whether the toggle is enabled or not.
• `app:chipIcon` – Used to set a custom icon in the Chip.
• `app:closeIcon` – Usually present in Entry type Chips. We can set our icon with it. The close icon is by default located to the right of the text.
• `app:closeIconTint`
• `app:checkedIcon` – Used to change the check symbol present in Entry and Filter types of Chips.
• `app:chipStartPadding/app:chipEndPadding`
• `app:iconStartPadding/app:iconEndPadding`

Android ChipGroup

Similar to RadioGroups, ChipGroups are used to hold Chips.

<com.google.android.material.chip.ChipGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp">

    <com.google.android.material.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:chipText="This" />

   <!-- Insert more Chips here -->

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

Conclusion

Chips and ChipGroups offer a modern way to design user interfaces in Android applications. By using XML attributes and styles, Chips can be customized to various requirements. ChipGroups provide a convenient way to group multiple Chips and manage them collectively. With this knowledge, you’re ready to integrate these new components into your own Android applications.