Jetpack Compose Ep:11 — Switch App

Published in

Nerd For Tech

4 min readMar 27, 2021

In this post, i’ll brief about Switch Component with respect to its detail and attributes by scrambling it in multiple functions.

To get your basic done, do visit to my previous articles which are given below:

Note: In build.gradle(Project Level) file, the compose_version is upgraded to ‘1.0.0-beta01’ and maven() is replaced with mavenCentral(). Also the dependency is upgraded to classpath “com.android.tools.build:gradle:7.0.0-alpha08”
classpath “org.jetbrains.kotlin:kotlin-gradle-plugin:1.4.30”
And in build.gradle(Module Level) file, following dependency is upgraded:
implementation ‘com.google.android.material:material:1.3.0’
implementation ‘androidx.activity:activity-compose:1.3.0-alpha03’

Switch

It is toggleable component which provides two states i.e., on or off.

Attributes of Switch

checked — it is boolean state which is either to be on or off
onCheckedChange — it gets invoked when the switch is being clicked and thus the change of state is being requested. It can also rely on a higher-level component to be controlled by for the “on” or “off” state if this is dynamic.
modifier — modifier to be applied to the Switch
enabled — controls the enabled state of the Switch. When false, this component will not be selectable and appears in the disabled ui state
interactionSource — it is used to represent a stream of Interactions. MutableInteractionSource can be modify as per our need and pass it on the switch by means of customising the appearance or behaviour of this component in different interactions
colors — SwitchColors will be used to resolve the color used for this Switch in different states.

Remember()

Remember the value produced by calculation. calculation will only be evaluated during the composition. Re-composition will always return the value produced by composition.

MutableStateOf()

Return a new MutableState initialized with the passed in value
The MutableState class is a single value holder whose reads and writes are observed by Compose. Additionally, writes to it are transacted as part of the Snapshot system.

Attributes of MutableStateOf()

value — the initial value for the MutableState
policy — a policy to controls how changes are handled in mutable snapshots.

SwitchDefaults.colors()

This function is used to represent the different colors used in a Switch in different states.

Attributes of SwitchDefaults.colors()

checkedThumbColor — it is used for the thumb when the switch is enabled and checked
checkedTrackColor — it is used for the track when the switch is enabled and checked
checkedTrackAlpha — it is applied to checkedTrackColor and disabledCheckedTrackColor
uncheckedThumbColor — it is used for the thumb when the switch is enabled and unchecked
uncheckedTrackColor — it is used for the track when the switch is enabled and unchecked
uncheckedTrackAlpha — it is applied to uncheckedTrackColor and disabledUncheckedTrackColor
disabledCheckedThumbColor — it si used for the thumb when the switch is disabled and checked
disabledCheckedTrackColor — it is used for the track when the switch is disabled and checked
disabledUncheckedThumbColor — it is used for the thumb when the switch is disabled and unchecked
disabledUncheckedTrackColor — it is used for the track when the switch is disabled and unchecked

SimpleSwitch()

@Composable
fun SimpleSwitch() {
    val mRemember = remember { mutableStateOf(false) }

    Switch(checked = mRemember.value, onCheckedChange = { mRemember.value = it })
}

EnabledSwitch()

@Composable
fun EnabledSwitch() {
    val mRemember = remember { mutableStateOf(false) }

    Switch(checked = mRemember.value, onCheckedChange = { mRemember.value = it }, enabled = true)
}

DisabledSwitch()

@Composable
fun DisabledSwitch() {
    val mRemember = remember { mutableStateOf(false) }

    Switch(checked = mRemember.value, onCheckedChange = { mRemember.value = it }, enabled = false)
}

CheckedThumbColorSwitch()

@Composable
fun CheckedThumbColorSwitch() {
    val mRemember = remember { mutableStateOf(false) }

    Switch(
        checked = mRemember.value,
        onCheckedChange = { mRemember.value = it },
        enabled = true,
        colors = SwitchDefaults.colors(
            checkedThumbColor = Color.Cyan
        ),
        modifier = Modifier.padding(8.dp)
    )
}

Complete Code

package com.akshay.switchapp

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.padding
import androidx.compose.material.Switch
import androidx.compose.material.SwitchDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.akshay.switchapp.ui.theme.SwitchAppTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SwitchAppTheme {
                // A surface container using the 'background' color from the theme
                Column(
                    verticalArrangement = Arrangement.SpaceEvenly,
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier.fillMaxSize()
                ) {
                    SimpleSwitch()
                    EnabledSwitch()
                    DisabledSwitch()
                    CheckedThumbColorSwitch()
                }
            }
        }
    }
}

@Composable
fun SimpleSwitch() {
    val mRemember = remember { mutableStateOf(false) }

    Switch(checked = mRemember.value, onCheckedChange = { mRemember.value = it })
}

@Composable
fun EnabledSwitch() {
    val mRemember = remember { mutableStateOf(false) }

    Switch(checked = mRemember.value, onCheckedChange = { mRemember.value = it }, enabled = true)
}

@Composable
fun DisabledSwitch() {
    val mRemember = remember { mutableStateOf(false) }

    Switch(checked = mRemember.value, onCheckedChange = { mRemember.value = it }, enabled = false)
}

@Composable
fun CheckedThumbColorSwitch() {
    val mRemember = remember { mutableStateOf(false) }

    Switch(
        checked = mRemember.value,
        onCheckedChange = { mRemember.value = it },
        enabled = true,
        colors = SwitchDefaults.colors(
            checkedThumbColor = Color.Cyan
        ),
        modifier = Modifier.padding(8.dp)
    )
}