Jetpack Compose Ep:10 — Checkbox

Published in

Nerd For Tech

5 min readMar 13, 2021

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.

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

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

Connect with me on:

Thank you & Happy coding!