androidandroid-themematerial-components-androidandroid-checkboxmaterial-components

MaterialComponents CheckBox, how to keep the icon's original colors


I've recently changed my app's theme from Theme.AppCompat to Theme.MaterialComponents, and need to stop my CheckBox views from painting over the icon drawable colors.

MaterialComponents views normally tint icons with values from the app's theme, but it can be disabled. For example in the Button class, if app:iconTint="@null" is set, then the icon's original colors are seen. I'm looking for a way to do that for the android:button property of CheckBox, since buttonTint="@null" doesn't seem to work. Here's the layout file, the Button displays the intended behavior (icon is a blue circle with a green checkmark) and the CheckBox is painting over those colors when it shouldn't:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="300dp"
        android:layout_height="60dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:text="Test button"
        android:backgroundTint="#000000"
        app:icon="@drawable/multi_color_icon"
        app:iconTint="@null"
        app:iconGravity="textStart"
        />

    <CheckBox
        android:id="@+id/checkbox"
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/button"
        android:text="Test checkbox"
        android:gravity="center"
        android:button="@drawable/multi_color_icon"
        android:buttonTint="@null"
        android:paddingStart="8dp"
        android:paddingEnd="8dp"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

Drawable asset:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="22dp"
    android:height="22dp"
    android:viewportWidth="22"
    android:viewportHeight="22">
  <path
      android:pathData="M11,22a11,11 0,1 1,11 -11,11 11,0 0,1 -11,11zM11,1.61A9.39,9.39 0,1 0,20.39 11,9.39 9.39,0 0,0 11,1.61z"
      android:fillColor="#0099FF"/>
  <path
      android:pathData="M9.364,15.885a0.829,0.829 0,0 1,-0.553 -0.218l-3.52,-3.247a0.829,0.829 0,1 1,1.106 -1.221l2.877,2.653 5.855,-7.093a0.829,0.829 0,0 1,1.279 1.056L9.997,15.584a0.829,0.829 0,0 1,-0.583 0.3z"
      android:fillColor="#98c02f"/>
</vector>

Screenshot of layout (the icon on the checkbox shouldn't be grey, but rather blue/green like the button above):

enter image description here


Solution

  • Couldn't figure out a way to make it work with a MaterialComponents CheckBox, so I changed the layout to use a androidx.appcompat.widget.AppCompatCheckBox instead.