Jetpack Compose Ep:10 — Checkbox

Akshay Sawant
Mar 13 · 5 min read

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

Attributes of Checkbox

  • 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()

MutableStateOf()

Attributes of MutableStateOf()

  • policy — a policy to controls how changes are handled in mutable snapshots.

CheckboxDefaults.colors()

Attributes of CheckboxDefaults.colors()

  • 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!

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

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 stay up to date on other topics, follow us on LinkedIn. https://www.linkedin.com/company/nerdfortech

Akshay Sawant

Written by

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

Nerd For Tech

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 stay up to date on other topics, follow us on LinkedIn. https://www.linkedin.com/company/nerdfortech

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