Material 3 Switch in Jetpack Compose (with Examples)

In this article, we’ll explore Material 3 Switch in Jetpack Compose with the help of examples.

Prerequisites:

• What is State in Jetpack Compose?

This article talks about the Material 3 switch. For the Material 2 version, follow this link.

What is a Switch in Android?

Switch (or switch button) represents two states – on and off. When we tap on it, it toggles the state. We mostly use the switch in the app’s settings screen.

Example:

Anatomy of the Material 3 Switch:

The switch has 3 properties: thumb, track, and icon.

1. Track
2. Thumb
3. Icon

For this article, create an empty Compose project and open MainActivity.kt. Create a MyUI() composable and call it from the onCreate() method. We’ll write our code in it.

// add the following packages
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Check
import androidx.compose.material.icons.filled.Close
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Switch
import androidx.compose.material3.SwitchDefaults
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.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.draw.scale

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            YourProjectNameTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Column(
                        modifier = Modifier
                            .fillMaxSize(),
                        verticalArrangement = Arrangement.Center,
                        horizontalAlignment = Alignment.CenterHorizontally    
                    ) {
                        MyUI()
                    }
                }
            }
        }
    }
}

@Composable
fun MyUI() {

}

Jetpack Compose provides Switch() API. It looks like this:

@Composable
fun Switch(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier = Modifier,
    thumbContent: (@Composable () -> Unit)? = null,
    enabled: Boolean = true,
    colors: SwitchColors = SwitchDefaults.colors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },      
)

checked – Whether the switch is ON or OFF.

onCheckedChange – A lambda that gets called whenever the state is changed. It includes a boolean that indicates whether the switch is on or off.

modifier – The Modifier to be applied to this switch.

thumbContent – It is the content that will be drawn inside the thumb.

enabled – If the switch is enabled or not. If it is false, the switch won’t respond to the user’s clicks.

colors – The colors of the switch at different states.

interactionSource – It helps us to customize the interactions. For example, you can disable the ripple effect.

Switch Example:

The checked and onCheckedChange parameters are mandatory.

@Composable
fun MyUI() {
    var switchON by remember {
        mutableStateOf(false)
    }

    Switch(
        checked = switchON,
        onCheckedChange = { switchState ->      
            switchON = switchState
        }
    )
}

Output:

Switch Colors:

Jetpack Compose provides SwitchDefaults.colors() methods. We can change the colors at any state.

@Composable
public final fun colors(
    checkedThumbColor: Color,
    checkedTrackColor: Color,
    checkedBorderColor: Color,
    checkedIconColor: Color,
    uncheckedThumbColor: Color,
    uncheckedTrackColor: Color,
    uncheckedBorderColor: Color,
    uncheckedIconColor: Color,
    disabledCheckedThumbColor: Color,
    disabledCheckedTrackColor: Color,
    disabledCheckedBorderColor: Color,
    disabledCheckedIconColor: Color,
    disabledUncheckedThumbColor: Color,
    disabledUncheckedTrackColor: Color,
    disabledUncheckedBorderColor: Color,     
    disabledUncheckedIconColor: Color
): SwitchColors

Let’s change the checked thumb and track colors.

@Composable
fun MyUI() {
    var switchON by remember {
        mutableStateOf(true)
    }

    Switch(
        checked = switchON,
        onCheckedChange = { switchState ->
            switchON = switchState
        },
        colors = SwitchDefaults.colors(
            checkedThumbColor = Color(0xFFF64668),    
            checkedTrackColor = Color(0xFFFE9677)
        )
    )
}

Output:

Switch Size:

We can change the size using the scale modifier.

@Composable
fun MyUI() {
    var switchON by remember {
        mutableStateOf(false)
    }

    Switch(
        modifier = Modifier.scale(scale = 1.5f),     
        checked = switchON,
        onCheckedChange = { switchState ->
            switchON = switchState
        }
    )
}

Output:

Switch with Custom Thumb:

Material 3 Switch provides thumbContent parameter. We can create a custom thumb using it.

@Composable
fun MyUI() {
    var switchON by remember {
        mutableStateOf(false)
    }

    val thumbContent: (@Composable () -> Unit)? = if (switchON) {
        {
            Icon(
                modifier = Modifier.size(size = SwitchDefaults.IconSize),
                imageVector = Icons.Default.Check,
                contentDescription = null // icon is not focusable, no need for content description    
            )
        }
    } else {
        null
    }

    Switch(
        checked = switchON,
        onCheckedChange = { switchState ->
            switchON = switchState
        },
        thumbContent = thumbContent
    )
}

Output:

We can also set the icon when the switch is in the off state.

@Composable
fun MyUI() {
    var switchON by remember {
        mutableStateOf(false)
    }

    val thumbContent: (@Composable () -> Unit) =
        {
            Icon(
                modifier = Modifier.size(size = SwitchDefaults.IconSize),
                imageVector = if (switchON) Icons.Default.Check else Icons.Default.Close,
                contentDescription = null // icon is not focusable, no need for content description     
            )
        }

    Switch(
        checked = switchON,
        onCheckedChange = { switchState ->
            switchON = switchState
        },
        thumbContent = thumbContent
    )
}

Output:

Switch with Text/Label:

Switch() composable doesn’t have a parameter to add a label. But, we can put the Switch() and Text() in a Column() layout.

@Composable
fun MyUI() {
    var switchON by remember {
        mutableStateOf(false)
    }

    val thumbContent: (@Composable () -> Unit) =
        {
            Icon(
                modifier = Modifier.size(size = SwitchDefaults.IconSize),
                imageVector = if (switchON) Icons.Default.Check else Icons.Default.Close,
                contentDescription = null // icon is not focusable, no need for content description    
            )
        }

    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Switch(
            checked = switchON,
            onCheckedChange = { switchState ->
                switchON = switchState
            },
            thumbContent = thumbContent
        )
        Text(text = if (switchON) "ON" else "OFF")
    }
}

Output:

This is all about Material 3 Switch in Jetpack Compose. I hope you have learned something new. If you have any doubts, leave a comment below.

Related Articles:

References:

• Android docs
• Material docs