Jetpack Compose align input text in TextField

Question

I would like to achieve similar behaviour with TextField from Jetpack Compose like from old school XML layout:

<EditText
    android:id="@+id/some_id"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="right" /> <!-- or end -->

When I try this approach:

TextField(value = "", onValueChange = {

}, textAlign = TextAlign.End)

It simply just doesn't work because textAlign property doesn't exists in TextField. Then how to do input text alignment like TextAlign.Center, TextAlign.End, TextAlign.Justify and so on for TextField?

score 47 · Accepted Answer · answered Jul 25 '21 at 12:46

47

You can do it through textStyle.

TextField(
    value = "",
    onValueChange = {

    },
    textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.End)
)

LocalTextStyle.current is the default value for TextField, you can replace it by your own.

answered Jul 25 '21 at 12:46

Phil Dukhov

67,741
15
184
220

Thanks, then why `textStyle` doesn't exist for `Text` and `textAlign` doesn't exist for `TextField`? – Arsenius Jul 26 '21 at 06:29
1

In `Text` it's called `style`. I'm not sure why such design is taken, probably because changing align for `TextField` is not needed that often. You can set `textAlign` for `Text` the same way as for `TextField`, but it also has `textAlign` that'll override the style value. – Phil Dukhov Jul 26 '21 at 06:36

Jetpack Compose align input text in TextField

1 Answers1