Search code examples
androidandroid-layoutviewandroid-edittextandroid-constraintlayout

EditText inside ConstraintLayout not working properly

I have an AppCompatEditText as a search bar and a FrameLayout as a "Clear" button, both inside a ConstraintLayout:

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    ...
    android:layoutDirection="ltr">

    <FrameLayout
        android:id="@+id/clearBtnLyt"
        android:layout_width="36dp"
        android:layout_height="36dp"
        ...
        app:layout_constraintBottom_toBottomOf="@+id/editText1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/editText1">

        ... CONTENTS ...

    </FrameLayout>

    <androidx.appcompat.widget.AppCompatEditText
        android:id="@+id/editText1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        ...
        android:layoutDirection="rtl"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/clearBtnLyt"
        app:layout_constraintTop_toBottomOf="@id/toolbar1" />

    ...
</androidx.constraintlayout.widget.ConstraintLayout>

The ConstraintLayout is set to be left-to-right and only the AppCompatEditText is RTL. These views have shown well in the Android Studio's Layout Preview.

enter image description here

But when I ran the app on my Samsung Galaxy A5 (2017) with Android 8.0 OS, it looked like this:

enter image description here

I can't type anything in the AppCompatEditText or click it, but the "Clear" button is working. My phone is also set to be left-to-right. What am I doing wrong?

Solution

  • The problem was because of I set the layoutDirection of the AppCompatEditText to rtl. As it should be Right-to-Left, I didn't set it to ltr, but I changed its constraints from

        app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/clearBtnLyt"
    app:layout_constraintTop_toBottomOf="@id/toolbar1"

    to

        app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toRightOf="@+id/clearBtnLyt"
    app:layout_constraintTop_toBottomOf="@id/toolbar1"

    Note that I changed End to Right and Start to Left, e.g. app:layout_constraintStart_toEndOf to app:layout_constraintLeft_toRightOf.