Material Chip in Android

Chip, a Material Design Component is used as an action like setting an alarm or a choice like selecting a gender or to filter items like dress types or input types like hints.

Similar to RadioGroup, if we want to create a group of chips with single selection behavior we use ChipGroup and set singleSelection variable to true.

chip-material-android

<com.google.android.material.chip.ChipGroup
    android:id="@+id/genderChip"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/edit_text_horizontal_margin"
    android:layout_marginTop="@dimen/edit_text_vertical_margin"
    android:layout_marginEnd="@dimen/edit_text_horizontal_margin"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/fullNameTextInputLayout"
    app:singleSelection="true">

    <com.google.android.material.chip.Chip
        android:id="@+id/maleChip"
        style="@style/Widget.MaterialComponents.Chip.Choice"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checkable="true"
        android:layoutDirection="locale"
        android:text="@string/chip_text_male"
        android:textAppearance="@style/AppTheme.GenderChip"
        android:textColor="@color/colorWhiteText"
        app:chipBackgroundColor="@drawable/select_chip"
        app:chipEndPadding="@dimen/chip_horizontal_margin"
        app:chipStartPadding="@dimen/chip_horizontal_margin" />

    <com.google.android.material.chip.Chip
        android:id="@+id/femaleChip"
        style="@style/Widget.MaterialComponents.Chip.Choice"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:checkable="true"
        android:layoutDirection="locale"
        android:text="@string/chip_text_female"
        android:textAppearance="@style/AppTheme.GenderChip"
        android:textColor="@color/colorWhiteText"
        app:chipBackgroundColor="@drawable/select_chip"
        app:chipEndPadding="@dimen/chip_horizontal_margin"
        app:chipStartPadding="@dimen/chip_horizontal_margin" />

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

We can add padding to the chips using chipEndPadding, chipStartPadding as padding is ignored. Similar to padding, background attribute is ignored too. So, we have to use chipBackgroundColor in order to switch the chip background color between primary color and accent color based on the checked state.

select_chip.xml drawable

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:color="@color/colorAccent" android:state_selected="true" />
    <item android:color="@color/colorPrimary" />

</selector>

Along with the above discussed attributes, there are text size, text style and font attributes that are ignored if set directly and we need to set these in styles.xml.

Setting layoutDirection to locale makes sure that the system changes the direction of the text based on the user settings.

The chip group contains multiple gender chips. To assign choice behavior to our chips, we set the style as Widget.MaterialComponents.Chip.Choice. The different styles of chips are shown below in the pictures.

choice-chip-material-android
Choice Chips - Widget.MaterialComponents.Chip.Choice

input-chip-material-android
Input Chips - Widget.MaterialComponents.Chip.Entry


action-chip-material-android
Action Chips - Widget.MaterialComponents.Chip.Action

filter-chip-material-android
Filter - Widget.MaterialComponents.Chip.Filter

Even though Chips are available in the support libraries, they originally belong to Material Design Components, it would be better if we migrate to MDC and AndroidX.

Popular posts from this blog

Add Spacing to Recycler View Linear Layout Manager Using Item Decoration

Perform a Post Request Using Volley

Bottom App Bar for Android - A Material Design Component

How to Set an Android App as a Default Dialer

How to Change Material Chip Text Size, Text Style and Font