Disable upward movement animation of label in TextField (Jetpack compose)

user_9260623 0
Viewed 930

On tapping a TextField, created with Jetpack compose, the label of TextField moves upward. How do we disable this? Or is there any other way the TexField would work like an EditText in View system where we have hint which disappears on tapping the EditText?

android-jetpack-compose textfield android
2 Answers

Jetpack compose version - 1.0.3

placeholder attribute might be what you are looking for.
But, the text doesn't disappear on clicking the TextField.
It disappears only when the user enters some input text.

Default state

Default state

Focused state

Focused state

After entering input

After entering input

Code

TextField(
    placeholder = { Text(text = "Label") },
    // Other attributes
)
user_96360370

UPDATE

You can use placeholder with state.

var focusState by remember { mutableStateOf(false) }
placeholder = {
    Text(
         text = if (focusState) "" else "label",       
    )
}

and focusState you take from onFocusChanged

TextField(
          modifier = Modifier
                .onFocusChanged { focus ->
                    focusState = focus.isFocused
                }
user_70742780
Related