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):
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.