Jetpack Compose: Getting Started
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
Sometimes, we want to allow users to select one or more options from a list of options.
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.
@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.
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.