Home > database >  How can I use textfield control for multi textfield in jetpack compose?
How can I use textfield control for multi textfield in jetpack compose?

Time:06-20

I have a multi text field in a screen in my android jetpack compose app and I want to check the textfields are not empty, button will be active and if one of textfield is empty, button will be active, I was asked for check box control, but I do not know how can I use it for multi text field, 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(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,

                    )
            
        }
    }}}}

CodePudding user response:

You can simply use the enabled property of the button for this.

Button(
    enabled = email.value.isNotBlank() && password.value.isNotBlank()
) {

}
  • Related