Search code examples
androidmaterial-designandroid-chips

Do not show Checked Icon On Material Components Chip Android


Edit: I managed to make it work by setting the below attirbutes in styles.xml like so:

  <android.support.design.chip.Chip
                    android:id="@+id/chipFollowing"
                    style="@style/ChipCustomStyle" ...>

styles.xml

<style name="ChipCustomStyle" parent="Widget.MaterialComponents.Chip.Action">
    <item name="checkedIconEnabled">false</item>
    <item name="checkedIcon">@null</item>
</style>

Leaving it here in case anyone runs into the same WTF :)


Original question:

I don't want to show checked icon on my Chip. I tried setting

        app:checkedIcon="@null"
        app:checkedIconVisible="false"

both in Chip and ChipGroup element. It won't even compile :/

When I set it on Chip element, I am getting: error: attribute 'com.companyname.projectname:checkedIconVisible' not found.

Here is my Chip XML:

            <android.support.design.chip.Chip
                android:id="@+id/chipFollowing"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checkable="true"
                android:clickable="true"
                android:focusable="true"
                android:textAppearance="@style/ChipFilledUncheckedText"
                app:checkedIcon="@null"
                app:checkedIconVisible="false"
                app:chipBackgroundColor="@color/bg_chip_state_list"
                app:chipText="@string/chip_following" />

I am using Material Components from the 28 Support Library version. Am I missing something obvious? :/


Solution

  • I managed to make it work by setting the below attirbutes in styles.xml like so:

      <android.support.design.chip.Chip
                        android:id="@+id/chipFollowing"
                        style="@style/ChipCustomStyle" ...>
    

    styles.xml

    <style name="ChipCustomStyle" parent="Widget.MaterialComponents.Chip.Action">
        <item name="checkedIconEnabled">false</item>
        <item name="checkedIcon">@null</item>
    </style>