Exploring jetpack Compose: Switch

If you’re enjoying my posts on Jetpack Compose, check out some details on the book I’ll be writing on Compose!

We previously looked at the Checkbox components and how they can be used to allow a toggle able state controller within our user interface. Alongside this toggleable component we also have the Switch component. This Switch allows our users to turn some property on and off, which can be used for enabling/disabling features, settings or functionality within our applications. Within Jetpack Compose we have the Switch component, this provides a single composable function which can be used to construct an instance:

@Composable
fun Switch(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    enabled: Boolean = true,
    color: Color = MaterialTheme.colors.secondaryVariant
)

As we can see here, there are four available properties that we can pass to the Switch function:

• checked – whether or not the switch is currently checked. This is required
• onCheckedChange – a callback that will receive change events for when the selected state of the component changes changes. This is required
• enabled – declares whether the component is currently enabled
• color – the color to be used for the component. If not provided, then the secondary color from the application theme will be applied

With the above in mind we can create a simple Switch by providing the two required values for both checked and onCheckedChange, as shown below:

Switch(
    checked = true,
    onCheckedChange = { }
)

Let’s change our checked value to false so that we can see the unchecked state in action:

Switch(
    checked = false,
    onCheckedChange = { }
)

We can mix things up a little further by providing a value for the color property, overriding the use our the secondary color from our application theme:

Switch(
    checked = false,
    onCheckedChange = { },
    color = Color.Red
)

Whilst the above looks great, statically defining the checked value, along with not reacting to check changed events, doesn’t really resemble how we might handle this in a real world scenario. To approach this, let’s being by created a new @Model representation that will house the state for our switch:

@Model
class FormState(var optionChecked: Boolean = false)

This class will only be holding our checked state for this example. But with this in place we can now pass this FormState class to our SwitchComponent function, so that it can be used to assign values to the required properties.

@Composable
fun SwitchComponent(formState: FormState) {
    Switch(
        checked = formState.optionChecked,
        onCheckedChange = { }
    )
}

Now, whatever the value of our optionChecked is inside of our FormState reference, this will be represented in the state of the switch. So when optionChecked is false our switch will be unchecked and vice versa. Whilst this optionChecked value could be changed somewhere with in our code, it make sense to update this value within our onCheckedChange callback:

@Composable
fun SwitchComponent(formState: FormState) {
    Switch(
        checked = formState.optionChecked,
        onCheckedChange = { checked ->
            formState.optionChecked = checked
        }
    )
}

Now whenever our onCheckedChange is triggered, our formState optionChecked reference will be updated to reflect the new checked value. This will then cause the switch to be updated to reflect this value, allowing our switch to be toggled between checked and unchecked.

---

In this post we’ve taken a quick dive into the Switch component from Jetpack Compose. Stay tuned for the next post and in the meantime, subscribe to updates on my Jetpack Compose book 🙂