In today’s tutorial, we will learn Switch in Kotlin KMP KMM Compose Multiplatform for both Android & iOS platforms. We will learn about the customization of Switch, the properties of the Switch, and Switch events.
Switch in Kotlin KMP KMM Compose Multiplatform:
Switches are used to enable toggle functionality in mobile and web applications. We can enable and disable modes and switch between dark and light modes with switches. It enables the mobile app’s functionality to Turn ON and OFF on a specific case.
Creating Switch in KMP(KMM):
To create a Switch in KMP, we would define the Switch widget in Composable.
|
1 2 3 4 5 6 |
var switchState by remember { mutableStateOf(false) } Switch( checked = switchState, onCheckedChange = { switchState = it } ) |
Code explanation:
- switchState: The mutable state that handles the Button enable and Disable state in the form of True and False.
- checked: The default value of Switch should be the same as the mutable state.
- onCheckedChange: Invokes when the user Turns ON and OFF switches.
Complete source code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
package com.app.test import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.material.MaterialTheme import androidx.compose.material.Switch import androidx.compose.runtime.* import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp @Composable fun App() { MaterialTheme { var switchState by remember { mutableStateOf(false) } Row( modifier = Modifier.padding(16.dp).fillMaxWidth(), horizontalArrangement = Arrangement.Center ) { Switch( checked = switchState, onCheckedChange = { switchState = it } ) } } } |
Screenshot:
Adding Label to Switch:
To add a label with Switch, we have to wrap both Switch and Text into the Row widget. To set the padding between both of them, I am using the Spacer widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
Row( modifier = Modifier.padding(16.dp).fillMaxWidth(), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically ) { Text( text = "Turn ON OFF Switch", style = MaterialTheme.typography.h6, color = Color(0xFF00C853) ) Spacer(modifier = Modifier.width(12.dp)) Switch( checked = switchState, onCheckedChange = { switchState = it } ) } |
Screenshot:
Customizing Switch Colors:
The Switch component has the property SwitchDefaults.colors() with multiple sub-properties, which can customize the Swith UI.
- checkedThumbColor: Set the Switch thumb color when the Switch is in the ON state.
- uncheckedThumbColor: Set thumb color when the Switch is in the OFF state.
- checkedTrackColor: Set the switch track color when it is ON.
- uncheckedTrackColor: Set the switch track color to OFF.
- disabledCheckedThumbColor: Set the color of the thumb when the switch is ON but disabled.
- disabledCheckedTrackColor: Set the track color when the switch is ON but disabled.
- disabledUncheckedThumbColor: Set the color of the thumb in the switch OFF and disabled.
- disabledUncheckedTrackColor: Set the track color when the switch is OFF and disabled.
- uncheckedTrackAlpha: To set the opacity of Track when the switch is OFF.
- checkedTrackAlpha: Adjust the opacity of the track when the Switch is ON.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
Switch( checked = switchState, onCheckedChange = { switchState = it }, colors = SwitchDefaults.colors( checkedThumbColor = Color.Cyan, uncheckedThumbColor = Color(0xFFB0BEC5), checkedTrackColor = Color(0xFF4CAF50), uncheckedTrackColor = Color(0xFF757575), disabledCheckedThumbColor = Color(0xFFE0E0E0), disabledCheckedTrackColor = Color(0xFF81C784), disabledUncheckedThumbColor = Color(0xFFE0E0E0), disabledUncheckedTrackColor = Color(0xFFBDBDBD), uncheckedTrackAlpha = 0.3f, checkedTrackAlpha = 0.8f ) ) |
Screenshot:
Create Disabled Switch:
To Enable and Disable a Switch, we have to use the enabled property.
- enabled = true: To Enable the switch.
- enabled = false: To Disable the Switch.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Switch( checked = switchState, onCheckedChange = { switchState = it }, enabled = false, colors = SwitchDefaults.colors( checkedThumbColor = Color.Cyan, uncheckedThumbColor = Color(0xFFB0BEC5), checkedTrackColor = Color(0xFF4CAF50), uncheckedTrackColor = Color(0xFF757575), disabledCheckedThumbColor = Color(0xFFE0E0E0), disabledCheckedTrackColor = Color(0xFF81C784), disabledUncheckedThumbColor = Color(0xFFE0E0E0), disabledUncheckedTrackColor = Color(0xFFBDBDBD), uncheckedTrackAlpha = 0.3f, checkedTrackAlpha = 0.8f ) ) |
Screenshot:
Retrieve Switch ON and OFF Value in Text:
We are creating a Text widget showing the Switch ON and OFF result in Text using an IF condition with Switch state.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
package com.app.test import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.material.MaterialTheme import androidx.compose.material.Switch import androidx.compose.material.SwitchDefaults import androidx.compose.material.Text import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp @Composable fun App() { MaterialTheme { var switchState by remember { mutableStateOf(false) } Column( modifier = Modifier.padding(12.dp).fillMaxWidth(), verticalArrangement = Arrangement.Top ) { Row( modifier = Modifier.padding(16.dp).fillMaxWidth(), horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically ) { Text( text = "Turn ON OFF Switch", style = MaterialTheme.typography.h6, color = Color(0xFF00C853) ) Spacer(modifier = Modifier.width(12.dp)) Switch( checked = switchState, onCheckedChange = { switchState = it }, enabled = true, colors = SwitchDefaults.colors( checkedThumbColor = Color.Cyan, uncheckedThumbColor = Color(0xFFB0BEC5), checkedTrackColor = Color(0xFF4CAF50), uncheckedTrackColor = Color(0xFF757575), disabledCheckedThumbColor = Color(0xFFE0E0E0), disabledCheckedTrackColor = Color(0xFF81C784), disabledUncheckedThumbColor = Color(0xFFE0E0E0), disabledUncheckedTrackColor = Color(0xFFBDBDBD), uncheckedTrackAlpha = 0.3f, checkedTrackAlpha = 0.8f ) ) } Spacer(modifier = Modifier.height(16.dp)) Text( modifier = Modifier.fillMaxWidth(), text = "Switch is : ${if (switchState) "ON" else "OFF"}", fontSize = 20.sp, textAlign = TextAlign.Center ) } } } |
Screenshot in Android device:
Screenshot in iOS device:
