Jetpack Compose Ep:11 — Switch App

Akshay Sawant
Mar 27 · 4 min read

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:

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’

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

  • 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 the value produced by calculation. calculation will only be evaluated during the composition. Re-composition will always return the value produced by composition.

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.

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

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

  • 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
@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)
)
}
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)
)
}
Jetpack Compose Ep:11 — Switch App

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

Connect with me on:

Thank you & Happy coding!

Nerd For Tech

From Confusion to Clarification

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store