Always display placeholder and RTL input in TextField with Jetpack Compose

Issue

I want the placeholder not to disappear if I start typing in a field and it should be on the left side of the screen.
But the text input and cursor must be on the right.

An example is in the screenshot. Thanks!

enter image description here

Solution

Not the best solution, but it works.

Customizing the placeholder as per the requirement is not possible at this point in time. You have to create a completely customized TextField if that is an absolute requirement.

Note.

  1. This is not a placeholder.
  2. The positioning of the text is absolute, it should be adjusted according to the TextField size.

Screenshot

@Composable
fun FixedPlaceholder() {
    var name by remember { mutableStateOf("") }
    Box {
        OutlinedTextField(
            shape = MaterialTheme.shapes.medium,
            value = name,
            onValueChange = {
                name = it
            },
            singleLine = true,
            textStyle = LocalTextStyle.current.copy(
                textAlign = TextAlign.End,
            ),
            modifier = Modifier
                .fillMaxWidth()
                .padding(
                    horizontal = 16.dp,
                    vertical = 8.dp,
                ),
        )
        Text(
            text = "to",
            modifier = Modifier
                .fillMaxWidth()
                .padding(
                    start = 32.dp,
                    end = 32.dp,
                    top = 24.dp,
                    bottom = 8.dp
                ),
        )
    }
}

Answered By – Abhimanyu

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published