androidandroid-jetpack-composetextfieldhint

How to hide hint label on the OutlinedTextField border

How can I hide or disable hint label after text input?

OutlinedTextField(
            value = value,
            modifier = Modifier.fillMaxSize(),
            shape = RoundedCornerShape(8.dp),
            textStyle = TextStyle(fontSize = nFontSize),
            colors = TextFieldDefaults.outlinedTextFieldColors(
                textColor = Color.Black,
                focusedBorderColor = colorResource(id = R.color.inbox_company_red),
                cursorColor = Color.Black),
            //visualTransformation = VisualTransformation.None,
            label = {Text(text = if (value.isEmpty()) stringResource(id = R.string.name" else "")}

enter image description here

Solution

  • You can hide using remember function as this :

        var value by remember { mutableStateOf("")

    Then update your @Composable as this :

    OutlinedTextField(
        value = value,
        onValueChange = {
            value = it
        },
        modifier = Modifier.fillMaxSize(),
        shape = RoundedCornerShape(8.dp),
        textStyle = TextStyle(fontSize = 16.sp),
        colors = TextFieldDefaults.outlinedTextFieldColors(
            textColor = Color.Black,
            focusedBorderColor = Color.Red, // Change this to your desired color
            cursorColor = Color.Black
        ),
        label = {
            Text(text = if (value.isEmpty()) "Hint" else "")
        }
    )

    Result is

    enter image description here

    enter image description here

    Edit

    If you want to hide the label when gaining focus your @Composable you can use the Modifier.onFocusChange see the edited code

        var value by remember { mutableStateOf("") }
    var isFocused by remember { mutableStateOf(false) }
    var isLabelVisible by remember { mutableStateOf(true) }

    OutlinedTextField(
        value = value,
        onValueChange = {
            value = it
        },
        modifier = Modifier
            .size(width = 200.dp, height = 100.dp)
            .onFocusChanged { focusState ->
                isFocused = focusState.isFocused
                if (focusState.isFocused) {
                    isLabelVisible = false
                } else if (value.isEmpty()) {
                    isLabelVisible = true
                }
            },
        shape = RoundedCornerShape(8.dp),
        textStyle = TextStyle(fontSize = 16.sp),
        colors = TextFieldDefaults.outlinedTextFieldColors(
            textColor = Color.Black,
            focusedBorderColor = Color.Red, 
            cursorColor = Color.Black
        ),
        label = {
            if (isLabelVisible) {
                Text(text = "Hint")
            }
        }
    )