Jetpack compose TextField RTL support

user_3502856 0
Viewed 803

XML TextField, automatically response to RTL text and align it to right.

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/textview_first"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="سلااااااممممممم"
        app:layout_constraintBottom_toTopOf="@id/button_first"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

1 * 2

But, In Compose TextField, it's stick to left. Is there any way to have TextField to align RTL text to right and LTR text to left?

android-jetpack-compose textfield
3 Answers

Based on @Poran answer, you must add textStyle to TextField :

TextField(
   value = name,
   ...
   textStyle = TextStyle(color = Color.Black, textDirection = TextDirection.Content)
)
user_35028560

You have to add textDirection on textStyle textStyle = TextStyle(color = Color.Black, textDirection = TextDirection.ContentOrLtr)

BasicTextField(
                value = text,
                onValueChange = {
                text = it
                onSearch(it)
            },
                maxLines = 1,
                singleLine = true,
                textStyle = TextStyle(color = Color.Black, textDirection = TextDirection.ContentOrLtr),
                modifier = Modifier
                    .fillMaxWidth()
                    .shadow(5.dp, CircleShape)
                    .background(Color.White, CircleShape)
                    .padding(horizontal = 20.dp, vertical = 12.dp)
                    .onFocusChanged {
                        isDisableHint = it.isFocused && text.isEmpty()
                    }
            )

Updated my answer: I think it will solve your problem

textStyle = TextStyle(color = Color.Black, textDirection = TextDirection.ContentOrLtr)
user_68790580

This is working for text view and text field->

Text->

Text(modifier = Modifier.fillMaxWidth(),
        text = text,
        fontSize = 20.sp,
        fontFamily = FontFamily.SansSerif,
        style = TextStyle(textDirection = TextDirection.Rtl)
    )

TextField->

var value by remember {
            mutableStateOf("")
        }


TextField(value = value,
          onValueChange = { value = it },
          modifier = Modifier.fillMaxWidth(),
          textStyle = TextStyle(textDirection = TextDirection.Rtl))
user_122280790
Related