CheckBox - Android Studio - Compose

How to use the CheckBox using Android Studio & Compose?

Learn how to use the Android CheckBox widget to allow users to select multiple options. This tutorial covers the complete implementation using Android Studio, Jetpack Compose, and XML layouts with practical examples like a color selector.

>> Check For Java

>> Check For Kotlin

>> Check For Compose

Code:

MainActivity.kt

package com.technifysoft.myapplication

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Checkbox
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.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.technifysoft.myapplication.ui.theme.MyApplicationTheme

class MainActivityCompose : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            CheckBoxScreen()
        }
    }

    @Composable
    fun CheckBoxScreen() {
        // Checkbox states
        var androidChecked by remember { mutableStateOf(false) }
        var iosChecked by remember { mutableStateOf(false) }
        var graphicsChecked by remember { mutableStateOf(false) }

        // Result text
        var resultText by remember { mutableStateOf("") }

        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(10.dp)
        ) {

            Text(
                modifier = Modifier.fillMaxWidth().padding(vertical = 40.dp),
                text = "Check Box",
                fontSize = 20.sp,
                fontWeight = FontWeight.Bold,
                textAlign = TextAlign.Center
            )

            Text(
                text = "Select Your Experiences:",
                fontWeight = FontWeight.Bold
            )

            Spacer(modifier = Modifier.height(10.dp))

            // Android checkbox
            Row(verticalAlignment = Alignment.CenterVertically) {
                Checkbox(
                    checked = androidChecked,
                    onCheckedChange = { androidChecked = it }
                )
                Text(text = "Android Developer")
            }

            // iOS checkbox
            Row(verticalAlignment = Alignment.CenterVertically) {
                Checkbox(
                    checked = iosChecked,
                    onCheckedChange = { iosChecked = it }
                )
                Text(text = "iOS Developer")
            }

            // Graphics checkbox
            Row(verticalAlignment = Alignment.CenterVertically) {
                Checkbox(
                    checked = graphicsChecked,
                    onCheckedChange = { graphicsChecked = it }
                )
                Text(text = "Graphics Designer")
            }

            Spacer(modifier = Modifier.height(20.dp))

            Button(
                onClick = {
                    if (!androidChecked && !iosChecked && !graphicsChecked) {
                        Toast.makeText(
                            this@MainActivityCompose,
                            "Please select at least one checkbox.",
                            Toast.LENGTH_SHORT
                        ).show()

                        return@Button
                    }

                    val result = buildString {
                        if (androidChecked) append("\nAndroid Developer")
                        if (iosChecked) append("\niOS Developer")
                        if (graphicsChecked) append("\nGraphics Designer")
                    }
                    resultText = "You've selected:$result"
                },
                modifier = Modifier.fillMaxWidth()
            ) {
                Text("Confirm")
            }

            Spacer(modifier = Modifier.height(20.dp))

            Text(text = resultText)
        }
    }

    /**
     * GreetingPreview is a composable function for previewing the MainUI in Android Studio.
     * It is annotated with @Preview to enable live preview.
     *
     */
    @Preview(showBackground = true)
    @Composable
    private fun GreetingPreview() {
        MyApplicationTheme {
            CheckBoxScreen()
        }
    }
}

Screenshots: