CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-compose-switch
davidvarghese
davidvarghese

Reputation: 677

Customise selected/unselected background of Switch composable in Jetpack Compose?

I am using a Switch Composable for which I want to give a custom background for selected and unselected state. How can I do that?

var switchState by remember { mutableStateOf(false) }

Switch(
   checked = switchState,
   onCheckedChange = { switchState = !switchState }                          
)

Upvotes: 8

Views: 3681

Answers (1)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363935

You can customize the colors of the thumb and the truck using the colors attribute. If you want to customize also the background you can use the background modifier.

Something like:

var switchState by remember { mutableStateOf(false) }

Switch(
    checked = switchState,
    onCheckedChange = { switchState = !switchState },
    colors  = SwitchDefaults.colors(
        checkedThumbColor = Teal200,
        checkedTrackColor = Teal200,
        uncheckedThumbColor = Yellow,
        uncheckedTrackColor= Yellow,
    ),
    modifier = Modifier.background(if (switchState) Blue else Red )
)

enter image description hereenter image description here

Upvotes: 19

Related Questions