CODEWITHSUNDEEP
androidcheckboxmaterial-designmaterial-components-android
DJTalls
DJTalls

Reputation: 13

Make Material CheckBox Checkmark Color Black Instead of Transparent

I like the animation and the teal color of the default Material 3 CheckBox. However, the checked checkBox on a white background is not easily readable for those that are color blind. I would like for the checkmark that is currently transparent to be black so that it is a black check on a teal background when checked.

I have played with different variations of checkboxes and tried to change the checkbox background, but nothing has looked remotely like what I want or the animation was missing.

Does anyone have any ideas of how I could do this without losing the animation? I am using XML

Upvotes: 0

Views: 40

Answers (1)

Monica Ivan
Monica Ivan

Reputation: 162

depends on what you're using, for xml based views you have

app:buttonIconTint  
app:buttonTint

if you're using Compose, you have

CheckboxColors(
   checkedCheckmarkColor: Color,
   uncheckedCheckmarkColor: Color,
...)

which can be used in the Checkbox Composable:

@Composable
fun Checkbox(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: CheckboxColors = CheckboxDefaults.colors(),
    interactionSource: MutableInteractionSource? = null
): Unit

some useful links:

  1. for XML
  2. for Compose

Upvotes: 0

Related Questions