Jetpack compose material3 TextField minimum height

Question

so I have a OutlinedTextField with supportingText which is available with conditions.

var usernameValue by remember { mutableStateOf(TextFieldValue("")) }
androidx.compose.material3.OutlinedTextField(
    modifier = Modifier
        .fillMaxWidth()
        .minimumInteractiveComponentSize(),
    value = usernameValue,
    onValueChange = {
        usernameValue = it
    },
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text),
    colors = androidx.compose.material3.TextFieldDefaults.textFieldColors(
        focusedIndicatorColor = Color.White,
        disabledIndicatorColor = Color.White,
        unfocusedIndicatorColor = Color.White,
        containerColor = Color(0xFFE5EAF0),
        placeholderColor = Color.Transparent
    ),
    shape = RoundedCornerShape(size = 12.dp),
    singleLine = true,
    isError = shouldShowUsernameError,
    supportingText = {
        if (shouldShowUsernameError)
            Text(
                userNameErrorMessage,
                color = MaterialTheme.colorScheme.error
            )
    }
)

this is the screen when there is no error

and this the screen when there is error

as you can see problem is when there is error, error messages change the layout! and the question is how can I set minimum height for OutlinedTextField

The layout changes because there is the supportingText. It is not clear what is the expected result. — Gabriele Mariotti, Mar 07 '23 at 16:56

score 1 · Accepted Answer · answered Mar 07 '23 at 20:32

The layout changes because when shouldShowUsernameError=true there is the supportingText.

To avoid it you can use something like:

supportingText = {
    Text(
        text = if (shouldShowUsernameError) "userNameErrorMessage" else "",
        color = MaterialTheme.colorScheme.error
    )
}

Jetpack compose material3 TextField minimum height

1 Answers1