Jetpack Compose: Getting Started

Sometimes, we want to allow users to select one or more options from a list of options.

In order to do this, we can use the Checkbox and Radio Button Composables.

The Checkbox Composable is a Composable that is used to allow users to select one or more options from a list of options.

This Composable contains 2 parameters:

• checked: This is used to specify whether the Checkbox is checked or not. It is of type Boolean.

• onCheckedChange: This is used to specify the action to take when the Checkbox is checked or unchecked. It is of type ((Boolean) -> Unit)?.

It has some optional parameters:

• colors: This is used to specify the colors to use for the Checkbox. It is of type CheckboxColors and has a default value of CheckboxDefaults.colors(). It is used to specify the colors to use for the Checkbox.

• enabled: This is used to specify whether the Checkbox is enabled or not. It is of type Boolean and has a default value of true. It is used to specify whether the Checkbox is enabled or not.

CheckBox

Let us add two CheckBoxes inside a Column Composable.

Column(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
) {
    Checkbox(
        enabled = false,
        checked = true,
        onCheckedChange = { /*TODO*/ }
    )
    Checkbox(
        checked = false,
        onCheckedChange = { /*TODO*/ }
    )
}

CheckBox with Label

We can add labels to our CheckBoxes by placing it beside a Text Composable.

Let us create our own custom CheckBox Composable that takes in a label as a parameter.

@Composable
fun LabelCheckBox(
    modifier: Modifier = Modifier,
    label: String,
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit
) {
    Row(
        modifier = modifier
            .fillMaxWidth()
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Checkbox(
            checked = checked,
            onCheckedChange = onCheckedChange
        )

        Spacer(modifier = Modifier.size(8.dp))

        Text(
            modifier = Modifier,
            text = label
        )
    }
}

Radio Button

The RadioButton Composable is a Composable that is used to allow users to select one option from a list of options.

This Composable contains 3 parameters:

• selected: This is used to specify the selected RadioButton. It is of type T?.

• onClick: This is used to specify the action to take when the RadioButton is clicked. It is of type ((T) -> Unit)?.

It has some optional parameters:

• colors: This is used to specify the colors to use for the RadioButton. It is of type RadioButtonColors and has a default value of RadioButtonDefaults.colors(). It is used to specify the colors to use for the RadioButton.

• enabled: This is used to specify whether the RadioButton is enabled or not. It is of type Boolean and has a default value of true. It is used to specify whether the RadioButton is enabled or not.

Radio Button

Let us add two RadioButtons inside a Column Composable.

Column(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
) {
    RadioButton(
        enabled = false,
        selected = true,
        onClick = { /*TODO*/ }
    )
    RadioButton(
        selected = false,
        onClick = { /*TODO*/ }
    )
}

Conclusion

In this session, you learned how to use the Checkbox and Radio Button Composables to allow users to select one or more options from a list of options. We will learn how to enable the toggle functionality of the Checkbox and Radio Button Composables in coming sessions.

In our next episode, we will continue working on our TextField skills.