Resolved: How can I use checkbox control in jetpack compose?

Question:

I am try to use sign in for android jetpack compose, when I click the button it works, but I want to use the checkbox in my project for users accept the

I Agree to App Terms of Service and Privacy Policy.

privacy policy for my app, and if users uncheck the checkbox, they will not able to login, but if click the check, they can login, is there a way to control it for users, any idea?

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun LoginScreen(
    navController: NavController,

) {
    val email = remember { mutableStateOf(TextFieldValue()) }
    val password = remember { mutableStateOf(TextFieldValue()) }

    val passwordVisibility = remember { mutableStateOf(false) }

    Column(
        Modifier
            .fillMaxSize()
           
        ,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        val context = LocalContext.current

        OutlinedTextField(
            value = email.value,
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = white,
                focusedIndicatorColor = Grey,
                unfocusedIndicatorColor = Grey,
                focusedLabelColor = Grey,
                unfocusedLabelColor = Grey,
                cursorColor = custom,
                textColor = custom,

                ),
            onValueChange = { email.value = it },
            label = { Text(text = "Email Address") },
            placeholder = { Text(text = "Email Address") },
            singleLine = true,
            modifier = Modifier.fillMaxWidth(0.8f)

        )
        Spacer(modifier = Modifier.padding(2.dp))

        OutlinedTextField(
            value = password.value,
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = white,
                focusedIndicatorColor = Grey,
                unfocusedIndicatorColor = Grey,
                focusedLabelColor = Grey,
                unfocusedLabelColor = Grey,
                cursorColor = custom,
                textColor = custom,

                ),
            onValueChange = { password.value = it },
            label = { Text(text = "Password") },
            placeholder = { Text(text = "Password") },
            singleLine = true,
            modifier = Modifier.fillMaxWidth(0.8f),
            trailingIcon = {
                IconButton(onClick = {
                    passwordVisibility.value = !passwordVisibility.value
                }) {
                    Icon(
                        painter = painterResource(id = R.drawable.password_eye),
                        contentDescription = "",
                        tint = if (passwordVisibility.value) custom else Grey
                    )
                }
            },
            visualTransformation = if (passwordVisibility.value) VisualTransformation.None
            else PasswordVisualTransformation()
        )

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

        Row(
            horizontalArrangement = Arrangement.Center
        ) {
            val isChecked = remember { mutableStateOf(false) }

            Checkbox(
                checked = isChecked.value,
                onCheckedChange = { isChecked.value = it },
                enabled = true,
                colors = CheckboxDefaults.colors(custom),
                modifier = Modifier
                    .padding(5.dp)
                    .size(3.dp),
            )

            Spacer(modifier = Modifier.padding(2.dp))

            Text(
                "I Agree to  App Terms of Service and Privacy Policy.",
                modifier = Modifier.width(320.dp),
                textAlign = TextAlign.Center,
                fontSize = 12.sp,
                color = custom
            )
        }

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

        Button(
            modifier = Modifier
                .width(285.dp)
                .height(55.dp),
            onClick = {
                focus.clearFocus(force = true)
                model.onSignUpOne(
                    email.value.text,
                    password.value.text,

                )

            },
            colors = ButtonDefaults.buttonColors(
                backgroundColor = custom
            ),
            shape = RoundedCornerShape(30)
        ) {
            Text(
                text = "Login",
                style = TextStyle(
                    fontSize = 18.sp,
                    color = white,

                    )
            
        }
    }}}}

Answer:

Move isChecked out of Rowand add enabled = isChecked.value to login button, so now only if the Checkbox isChecked the login button will be enabled

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun LoginScreen(
    navController: NavController,

    ) {
    val email = remember { mutableStateOf(TextFieldValue()) }
    val password = remember { mutableStateOf(TextFieldValue()) }

    val passwordVisibility = remember { mutableStateOf(false) }

    Column(
        Modifier
            .fillMaxSize()

        ,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        val context = LocalContext.current

        OutlinedTextField(
            value = email.value,
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = white,
                focusedIndicatorColor = Grey,
                unfocusedIndicatorColor = Grey,
                focusedLabelColor = Grey,
                unfocusedLabelColor = Grey,
                cursorColor = custom,
                textColor = custom,

                ),
            onValueChange = { email.value = it },
            label = { Text(text = "Email Address") },
            placeholder = { Text(text = "Email Address") },
            singleLine = true,
            modifier = Modifier.fillMaxWidth(0.8f)

        )
        Spacer(modifier = Modifier.padding(2.dp))

        OutlinedTextField(
            value = password.value,
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = white,
                focusedIndicatorColor = Grey,
                unfocusedIndicatorColor = Grey,
                focusedLabelColor = Grey,
                unfocusedLabelColor = Grey,
                cursorColor = custom,
                textColor = custom,

                ),
            onValueChange = { password.value = it },
            label = { Text(text = "Password") },
            placeholder = { Text(text = "Password") },
            singleLine = true,
            modifier = Modifier.fillMaxWidth(0.8f),
            trailingIcon = {
                IconButton(onClick = {
                    passwordVisibility.value = !passwordVisibility.value
                }) {
                    Icon(
                        painter = painterResource(id = R.drawable.password_eye),
                        contentDescription = "",
                        tint = if (passwordVisibility.value) custom else Grey
                    )
                }
            },
            visualTransformation = if (passwordVisibility.value) VisualTransformation.None
            else PasswordVisualTransformation()
        )

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

        val isChecked = remember { mutableStateOf(false) }

        Row(
            horizontalArrangement = Arrangement.Center,
        ) {
            Checkbox(
                checked = isChecked.value,
                onCheckedChange = { isChecked.value = it },
                enabled = true,
                colors = CheckboxDefaults.colors(custom),
                modifier = Modifier
                    .padding(5.dp)
                    .size(3.dp),
            )

            Spacer(modifier = Modifier.padding(2.dp))

            Text(
                "I Agree to  App Terms of Service and Privacy Policy.",
                modifier = Modifier.width(320.dp),
                textAlign = TextAlign.Center,
                fontSize = 12.sp,
                color = custom
            )
        }

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

        Button(
            modifier = Modifier
                .width(285.dp)
                .height(55.dp),
            onClick = {
                focus.clearFocus(force = true)
                model.onSignUpOne(
                    email.value.text,
                    password.value.text,

                    )

            },
            colors = ButtonDefaults.buttonColors(
                backgroundColor = custom
            ),
            shape = RoundedCornerShape(30),
            enabled = isChecked.value
        ) {
            Text(
                text = "Login",
                style = TextStyle(
                    fontSize = 18.sp,
                    color = white,

                    )

        }
    }}}}

If you have better answer, please add a comment about this, thank you!

Resolved: How can I use checkbox control in jetpack compose?

Resolved: Convert function is not working with {fn } in SQL Server

Resolved: Why reference in pointer array doesn’t have data?

Resolved: EntityFramework creates/runs migrations using parameterless DataContext instance

Leave A Reply