What is Check box?
Checkboxes are just like the buttons that allow the users to select one or more options from a set. We use checkbox options in a vertical list.
It can also be used to turn an option on or off for instance to on or off the flash light of our smartphones.
Checkbox is a two-states button checked (selected) or unchecked (not selected).
Checkboxes can have a parent-child relationship with other checkboxes. It means When the parent checkbox is checked, all the child checkboxes are checked. If a parent checkbox is unchecked, all child checkboxes are unchecked. If some, but not all, child checkboxes are checked, the parent checkbox becomes an indeterminate checkbox.
Also Read Floating Action Button in Jetpack Compose
Steps :
Create a New Project and select Empty Activity In my case, application name is Coding Bihar you can use any other name.
Also Read Radio Button in Jetpack Compose
MainActivity
Copy this code →
package com.example.codingbihar
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.ui.Modifier
import com.example.codingbihar.ui.theme.CodingBiharTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
CodingBiharTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
Checkboxes()
}
}
}
}Create a separate file for Checkbox and named it as CheckBox
CheckBox
Copy this code →
package com.example.codingbihar
import android.widget.Toast
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Checkbox
import androidx.compose.material3.CheckboxDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
@Composable
fun Checkboxes() {
val checkboxList: List = listOf("Checkbox 1", "Checkbox 2", "Checkbox 3","Checkbox 4")
val context = LocalContext.current.applicationContext
Column(horizontalAlignment = Alignment.Start) {
checkboxList.forEach { optionName ->
var checked by remember {
mutableStateOf(false)
}
Row(verticalAlignment = Alignment.CenterVertically) {
Checkbox(
checked = checked,
onCheckedChange = { checked_ ->
checked = checked_
Toast.makeText(context, "$optionName $checked_", Toast.LENGTH_SHORT)
.show()
},
colors = CheckboxDefaults.colors(
checkedColor = Color.Magenta)
)
Text(
modifier = Modifier.padding(start = 2.dp),
text = optionName
)
}
}
}
} OUTPUT :
*******************End**********************************
.png)