How can I change the CheckBox focus color on Android?

Question

I want to change the checkbox "outline" color, which is visible when focusing the checkbox in order to improve the visibility of the currently focused item when using the app with a keyboard or directional pad. How can I do that?

Image of what I mean: Focused CheckBox on Android

Edit: After finding the correct wording ("ripple color") for what I mean, I managed to change it with:

<item name="colorControlHighlight">#00f</item>

But this only applies to unchecked checkboxes. Does anybody know how to apply it to all (also checked) checkboxes? Image of colorControlHighlight effect on checked and unchecked checkboxes

Answer 1

Thanks to @special N9NE

This works: define an own ripple ripple_bg.xml:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/accent_26" />

And set it as background (globally):

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.DayNight">
        <!-- ... -->

        <!-- custom checkbox style to improve visibility on special (TV) devices -->
        <item name="android:checkboxStyle">@style/MyCheckBoxStyle</item>
    </style>

    <style name="MyCheckBoxStyle" parent="Widget.AppCompat.CompoundButton.CheckBox">
        <item name="android:background">@drawable/ripple_bg</item>
    </style>
</resources>

Answer 2

You can check this blog: AppCompat themes

colorControlHighlight is for ripple color

So try to create a ThemeOverlay.AppCompat theme where you will set the value of the color that you want and that will allow you to change the ripple color for that view and its children.

To target ripple in theme use this attribute:

android:colorControlHighlight

Answer 3

you can use the theme attribute:

app:theme="@style/MyCheckboxStyle"

then add this in your style.xml file :

<style name="MyCheckboxStyle" parent="AppTheme">
    <item name="colorAccent">@color/colorAccent</item>  // color when checkbox is checked 
    <item name="android:textColorSecondary">@color/colorSecondary</item>  // when it is unchecked
</style>