Switch in Jetpack Compose

Jetpack Compose has revolutionized Android app development with its declarative UI toolkit, enabling developers to create beautiful and responsive user interfaces with ease. One of the key components that contribute to this efficiency is the Switch widget. In this blog post, we will explore the benefits and possibilities of using the Switch in Jetpack Compose, focusing on its role in simplifying state management. Jetpack compose switch is a simple and small component.

The Switch widget is a fundamental UI component that allows users to toggle between two states, typically representing binary choices such as on/off or enabled/disabled. Switches are commonly used in settings screens, preference panels, and various other scenarios where user interaction is required to change a specific value or setting.

There is only one type of switch in Jetpack compose.

In Jetpack Compose, the Switch composable is part of the Material Design library, making it easy to integrate into your app’s UI. The Switch composable in Jetpack Compose is state-driven, meaning it reflects and updates its state based on changes in the underlying data.

Creating Switch

var myState by remember { mutableStateOf(false) }
    Switch(
        checked = myState,
        onCheckedChange = { myState = it }

    )

We create a mutable state variable (myState) using remember or mutableStateOf and pass it to the checked parameter of the Switch composable. Whenever the user interacts with the switch, the onCheckedChange lambda is called, allowing us to update the state and perform any necessary actions based on the new state.

Disable Switch

We can disable the switch component using its parameter enabled which when false, the component will not respond to user input, and it will appear visually disabled and disabled to accessibility services as well.

 var myState by remember { mutableStateOf(false) }
    Switch(
        checked = myState,
        onCheckedChange = { myState = it },
        enabled = false
    )

Switch Customization

We can style a switch using its colors parameter but before that, we will see another parameter.

1. thumbContent

With the use of this parameter, we can place any composable in the thumb of the switch. Let’s take an example:

 var myState by remember { mutableStateOf(false) }
    Switch(
        checked = myState,
        onCheckedChange = { myState = it },
        thumbContent = {
            Icon(
                imageVector = Icons.Default.Favorite,
                contentDescription = null
            )
        }
)

In the above image, we placed a heart icon on the thumb of the switch using thumbContent parameter. But the icon is too close to the bound of the thumb of the switch. To resolve this issue, we use a padding modifier.

var myState by remember { mutableStateOf(false) }
    Switch(
        checked = myState,
        onCheckedChange = { myState = it },
        thumbContent = {
            Icon(
                imageVector = Icons.Default.Favorite,
                contentDescription = null,
                modifier = Modifier.padding(2.dp)
            )
        }
    )

2. Color

Let’s play with some color on the switch.

    var myState by remember { mutableStateOf(true) }
    Switch(
        checked = myState,
        onCheckedChange = { myState = it },
        colors = SwitchDefaults.colors(Color.Green)
    )
}

Passing single color will apply only to the thumb of the switch. Now, Let’s explore the parameters of SwitchDefaults.colors() function.

var myState by remember { mutableStateOf(false) }
    Switch(
        checked = myState,
        onCheckedChange = { myState = it },
        colors = SwitchDefaults.colors(
            checkedThumbColor = Color.Red,
            checkedBorderColor = Color.Yellow,
            checkedTrackColor = Color.Cyan,
            uncheckedThumbColor = Color.Green,
            uncheckedBorderColor = Color.Blue,
            uncheckedTrackColor = Color.Magenta
        ),
        modifier = Modifier.padding(4.dp)
    )

All the names of the parameters of colors function are self-explanatory.

If you are looking for a custom switch library for jetpack compose then I would recommend heart-switch library.

Some Useful links

Material 3

Slider in Jetpack compose