Switch Material Design in Jetpack Compose

What is Switch?

Switch is an important components in Material Design. It is a selection control components that can be used to toggle between two states in checked and unchecked.

Parameter used in

checked: This is the initial state of the switch.

onCheckedChange: A callback that is called when the state of the switch changes.

enabled: This is used to enabled or disabled the switch.

colors: This is used to customize the colors used for the appearance of switch.

thumbContent: This is used to create a custom icon for the switch when it is clicked an icon can be seen.

For more information visit official developer website Jetpack Compose Material Design 3 Components Switch.

Let's see the simple Code for switch. This is an example of simple switch 

Copy this code →

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

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    )
}

In this example we added a checked Icon.

Copy this code →

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

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        thumbContent = if (checked) {
            {
                Icon(
                    imageVector = Icons.Filled.Check,
                    contentDescription = null,
                    modifier = Modifier.size(SwitchDefaults.IconSize),
                )
            }
        } else {
            null
        }
    )
}

This is an example of switch in which we have changed its default colors.

Copy this code →

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

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        colors = SwitchDefaults.colors(
            checkedThumbColor = Color.Magenta,
            checkedTrackColor = Color.Green,
            uncheckedThumbColor = Color.Black,
            uncheckedTrackColor = Color.Cyan,
        )
    )
}

Copy this code →

package com.example.composeswitch

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.ui.Modifier
import com.example.composeswitch.ui.theme.ComposeSwitchTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeSwitchTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    
                    ComposeSwitch()
                }
            }
        }
    }
}

Copy this code →

package com.example.composeswitch

import androidx.activity.ComponentActivity
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Switch
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun ComposeSwitch() {
    val context = LocalContext.current
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(start = 20.dp, end = 20.dp)
    ) {
        IconButton(
            onClick = {
                (context as? ComponentActivity)?.finish()
            }
        ) {
            Icon(
                imageVector = Icons.Default.ArrowBack,
                contentDescription = "back",Modifier.size(34.dp)
            )
        }
        Text(text = "Portable hotspot", fontSize = 26.sp)
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 30.dp),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Column {
                Text(
                    text = "Portable hotspot",
                    fontWeight = FontWeight.Bold
                )
                Text(text = "Pixel 7 Pro", color = Color.DarkGray)
            }
            var checked1 by remember { mutableStateOf(false) }

            Switch(
                checked = checked1,
                onCheckedChange = {
                    checked1 = it
                })
        }

        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 30.dp),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Text(
                text = "Set up portable hotspot",
                fontWeight = FontWeight.Bold
            )
            var checked2 by remember { mutableStateOf(false) }

            Switch(
                checked = checked2,
                onCheckedChange = {
                    checked2 = it
                })
        }
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 30.dp),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Column {
                Text(text = "One-time data limit", fontWeight = FontWeight.Bold)
                Text(
                    text = "Data limit will be applied next\ntime your hotspot is on ",
                    color = Color.DarkGray
                )
            }
            var checked3 by remember { mutableStateOf(false) }

            Switch(
                checked = checked3,
                onCheckedChange = {
                    checked3 = it
                })
        }
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 30.dp),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Column {
                Text(text = "Turn off hotspot automatically", fontWeight = FontWeight.Bold)
                Text(
                    text = "Turn off hotspot automatically when\nno device are connected",
                    color = Color.DarkGray
                )
            }
            var checked4 by remember { mutableStateOf(true) }

            Switch(
                checked = checked4,
                onCheckedChange = {
                    checked4 = it
                })
        }

OUTPUT: