Jetpack Compose Ep:11 — Switch App

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

Jetpack Compose Ep:11 — Switch App

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

• Jetpack Compose Episode:1 — Just Text App
• Jetpack Compose Episode:2 — The Scroll App
• Jetpack Compose Episode:3 — Button App
• Jetpack Compose Episode:4 — Icon & Icon Toggle Button App
• Jetpack Compose Episode:5 — Divider App
• Jetpack Compose Episode:6 — Floating Action Button App
• Jetpack Compose Episode:7 — Extended Floating Action ButtonApp
• Jetpack Compose Episode:8 — Radio Button App
• Jetpack Compose Episode:9 — Progress Indicator App
• Jetpack Compose Episode:10 — Checkbox App

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)
    )
}

Output

Jetpack Compose Ep:11 — Switch App

If there is any issue, do let me know in the comment section.

Connect with me on:

• Twitter
• Linkedin
• Github

Thank you & Happy coding!