Switch on checked change event – Android Jetpack Compose

Switch on Checked Change Event in Android Jetpack Compose

We can react to the events of change in checked state of switch in Android.

To execute some code when user interacts with the switch and sets it checked or unchecked, in Android Jetpack Compose, you can use the onCheckedChange parameter of the Switch composable.

The onCheckedChange parameter takes a lambda function whose parameter receives a boolean value of true when switch is checked, or false when the switch is unchecked. The lambda function is called whenever the switch is checked or unchecked.

If the onCheckedChange parameter is set to null, then the Switch becomes unable to interact.

For example, the following is a sample code snippet for a Switch composable with onCheckedChange parameter set with a lambda function.

var checked by remember { mutableStateOf(true) }

Switch(
    checked = checked,
    onCheckedChange = {
        if (it) {
            println("The switch is checked.")
        } else {
            println("The switch is unchecked.")
        }
        checked = it
    },
) 

Inside the lambda function, we are printing a message to standard output based on whether the switch is checked or not. Also we are setting the checked variable with the boolean value received in the lambda function.

Example Android Application for Switch onCheckedChange

Let us create an Android Application with Switch compose specified above.

MainActivity.kt

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Switch
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(50.dp),
                ) {
                    SwitchExample()
                }
            }
        }
    }
}

@Composable
fun SwitchExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            if (it) {
                println("The switch is checked.")
            } else {
                println("The switch is unchecked.")
            }
            checked = it
        },
    )
}

Screenshot

When user checks and unchecks the switch, the user should be able to see the following in the logcat.

2023-12-16 14:17:34.125 11847-11847 System.out              com.example.myapplication            I  
The switch is unchecked.
2023-12-16 14:17:34.488 11847-11847 System.out              com.example.myapplication            I  
The switch is checked.

Summary

In summary, we have seen how to set a callback function for the event of state change of the Switch composable, using toCheckedChange parameter, with the help of an example Android application.