Nerd For Tech
Published in

Nerd For Tech

Jetpack Compose Ep:10 — Checkbox

Here, we will discuss about Checkbox in detail with respect to its attributes by dividing it in multiple sections which will make us easy to understand it.

Jetpack Compose Ep:10 — Checkbox 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’

Checkbox

It is a component which is used to represent two states i.e., either checked or unchecked

Attributes of Checkbox

  • checked — it is boolean state which is either to be selected or not
  • onCheckedChange —it gets invoked when the checkbox 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 “checked” or “unchecked” state if this is dynamic.
  • modifier — modifier to be applied to the checkbox
  • enabled — controls the enabled state of the Checkbox. 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 checkbox by means of customising the appearance or behaviour of this component in different interactions
  • colors — ChecboxDefaults.colors will be used to resolve the color used for this Checkbox 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.

CheckboxDefaults.colors()

This function is used to animate the colors according to the Material Specification.

Attributes of CheckboxDefaults.colors()

  • checkedColor — it is used for the border and box when checked
  • uncheckedColor — used for the border when it is unchecked
  • checkmarkColor — used to checkmark when checked
  • disabledColor — used to provide color for the box and border when disabled
  • disabledIndeterminateColor — used to provide color for the box and border in a TriStateCheckbox when disabled & in an ToggleableState.Indeterminate state

Simple Checkbox

@Composable
fun SimpleCheckbox() {
val isChecked = remember { mutableStateOf(false) }

Checkbox(checked = isChecked.value, onCheckedChange = { isChecked.value = it })
}

Enabled Checkbox

@Composable
fun DisabledCheckbox() {
val isChecked = remember { mutableStateOf(false) }

Checkbox(checked = isChecked.value, onCheckedChange = { isChecked.value = it }, enabled = false)
}

Disabled Checkbox

@Composable
fun EnabledCheckbox() {
val isChecked = remember { mutableStateOf(false) }

Checkbox(checked = isChecked.value, onCheckedChange = { isChecked.value = it }, enabled = true)
}

Coloured Checkbox

@Composable
fun ColouredCheckbox() {
val isChecked = remember { mutableStateOf(false) }

Checkbox(
checked = isChecked.value,
onCheckedChange = { isChecked.value = it },
enabled = true,
colors = CheckboxDefaults.colors(Color.Blue)
)
}

Checked Checkbox

@Composable
fun CheckedCheckbox() {
val isChecked = remember { mutableStateOf(true) }

Checkbox(
checked = isChecked.value,
onCheckedChange = { isChecked.value = it },
enabled = true,
colors = CheckboxDefaults.colors(Color.Blue)
)
}

Labelled Checkbox

@Composable
fun LabelledCheckbox() {
Row(modifier = Modifier.padding(8.dp)) {
val isChecked = remember { mutableStateOf(false) }

Checkbox(
checked = isChecked.value,
onCheckedChange = { isChecked.value = it },
enabled = true,
colors = CheckboxDefaults.colors(Color.Green)
)
Text(text = "Labelled Check Box")
}
}

Grouped Checkbox

@Composable
fun GroupedCheckbox(mItemsList: List<String>) {

mItemsList.forEach { items ->
Row(modifier = Modifier.padding(8.dp)) {
val isChecked = remember { mutableStateOf(false) }

Checkbox(
checked = isChecked.value,
onCheckedChange = { isChecked.value = it },
enabled = true,
colors = CheckboxDefaults.colors(
checkedColor = Color.Magenta,
uncheckedColor = Color.DarkGray,
checkmarkColor = Color.Cyan
)
)
Text(text = items)
}
}
}

Complete Code

package com.akshay.checkboxapp

import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.layout.*
import androidx.compose.material.Checkbox
import androidx.compose.material.CheckboxDefaults
import androidx.compose.material.Text
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.checkboxapp.ui.theme.CheckboxAppTheme

class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
CheckboxAppTheme {
Column(
verticalArrangement = Arrangement.SpaceEvenly,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.fillMaxSize()
) {
SimpleCheckbox()
EnabledCheckbox()
DisabledCheckbox()
ColouredCheckbox()
CheckedCheckbox()
LabelledCheckbox()
GroupedCheckbox(
mItemsList = listOf(
"Grouped Checkbox One",
"Grouped Checkbox Two",
"Grouped Checkbox Three"
)
)
}
}
}
}
}

@Composable
fun SimpleCheckbox() {
val isChecked = remember { mutableStateOf(false) }

Checkbox(checked = isChecked.value, onCheckedChange = { isChecked.value = it })
}

@Composable
fun DisabledCheckbox() {
val isChecked = remember { mutableStateOf(false) }

Checkbox(checked = isChecked.value, onCheckedChange = { isChecked.value = it }, enabled = false)
}

@Composable
fun EnabledCheckbox() {
val isChecked = remember { mutableStateOf(false) }

Checkbox(checked = isChecked.value, onCheckedChange = { isChecked.value = it }, enabled = true)
}

@Composable
fun ColouredCheckbox() {
val isChecked = remember { mutableStateOf(false) }

Checkbox(
checked = isChecked.value,
onCheckedChange = { isChecked.value = it },
enabled = true,
colors = CheckboxDefaults.colors(Color.Blue)
)
}

@Composable
fun CheckedCheckbox() {
val isChecked = remember { mutableStateOf(true) }

Checkbox(
checked = isChecked.value,
onCheckedChange = { isChecked.value = it },
enabled = true,
colors = CheckboxDefaults.colors(Color.Blue)
)
}

@Composable
fun LabelledCheckbox() {
Row(modifier = Modifier.padding(8.dp)) {
val isChecked = remember { mutableStateOf(false) }

Checkbox(
checked = isChecked.value,
onCheckedChange = { isChecked.value = it },
enabled = true,
colors = CheckboxDefaults.colors(Color.Green)
)
Text(text = "Labelled Check Box")
}
}

@Composable
fun GroupedCheckbox(mItemsList: List<String>) {

mItemsList.forEach { items ->
Row(modifier = Modifier.padding(8.dp)) {
val isChecked = remember { mutableStateOf(false) }

Checkbox(
checked = isChecked.value,
onCheckedChange = { isChecked.value = it },
enabled = true,
colors = CheckboxDefaults.colors(
checkedColor = Color.Magenta,
uncheckedColor = Color.DarkGray,
checkmarkColor = Color.Cyan
)
)
Text(text = items)
}
}
}

Output

Jetpack Compose Ep:10 — Checkbox App

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

Connect with me on:

Thank you & Happy coding!

--

--

--

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Recommended from Medium

JavaScript Promises 101

Json Editor in Angular

Zustand, yet another lovely state manager in React

PostCSS with CSS Modules and React

Encryption-Decryption Using RSA in Java Script

Redux Toolkit setup

Why […‘👩‍❤️‍💋‍👨’] returns [‘👩’, ‘‍’, ‘❤’, ‘️’, ‘‍’, ‘💋’, ‘‍’, ‘👨’] in JavaScript?

Doin’ DOM stuff

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
ACE

ACE

Android Developer | Tech Conference Speaker | Tech Writer @KotlinMumbai @NerdForTech

More from Medium

Getting Started with ConstraintLayout in Jetpack Compose

Jetpack Compose 3- Theming

Accessing Hilt-injected Activity dependencies from Composables using CompositionLocal

Gradle Task Ordering