Yatung Yü
Yatung Yü

Reputation: 21

Why the view go outside of screen by ConstrainLayout in the condition of RTL?

Problem

Here is my layout file: activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

    <RelativeLayout
        android:id="@+id/rl_next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="58dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <ImageView
            android:id="@+id/iv_bg"
            android:layout_width="136dp"
            android:layout_height="60dp"
            android:src="@drawable/bg_next_img" />

        <ImageView
            android:id="@+id/iv_arrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@drawable/arrow" />
    </RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

And the drawable file mentioned above is here:

  1. arrow.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="27dp"
    android:height="22dp"
    android:autoMirrored="true"
    android:viewportWidth="27"
    android:viewportHeight="22">

    <path
        android:fillColor="#ffffff"
        android:fillType="evenOdd"
        android:pathData="M17.09,21.036L26.278,11.848C26.747,11.38 26.747,10.62 26.278,10.151L17.09,0.964L15.393,2.661L22.532,9.8L0.492,9.8L0.492,12.2L22.532,12.2L15.393,19.339L17.09,21.036Z" />

</vector>

The arrow has autoMirrored attribute and i'm sure that there's android:supportsRtl="true" in my AndroidManifest.xml.

  1. bg_next_img.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid
        android:color="#0066FF"/>
    <corners
        android:radius="100dp" />
</shape>

It works perfectly like this:

enter image description here

But when i chagne the language of my phone to any RTL language, like Hebrew, העברית and then kill the app process. Things happen like this when i reopen the app.

enter image description here The arrow is gone.

I cheked the layout inspector, then i found that the arrow's x is -49 which means it's outside of the phone screen.

enter image description here

Tried

The centerInParnt attribute must do something wrong, so i tried to make the whole realative layout's width to a fixed value 136dp which's id is rl_next. And it works perfectly.

My question

The root cause of this bug is still not known. And the bug only happens in ConstrainLayout. I'v tried to use the traditional RelativeLayout and i did not re-produce this bug. My constraintlayout veriosn is 2.1.4. Any assistance offered would be greatly appreciated!

Upvotes: 1

Views: 28

Answers (0)

Related Questions