androidandroid-constraintlayoutandroid-9.0-pie

ConstraintLayout.Guidelines losing proportional percentage values at runtime


I'm using a ConstraintLayout and 2 vertical Guidelines to simulate a grid-like area within my Android activity. These Guidelines represent 'columns' inside the ConstraintLayout. I've also put 3 elements, leftmost one is an ImageView, which is constrained vertically to the left of parent, and to the first guideline (first cell). Second one is a TextView, which is constrained to both guidelines (middle cell), and finally, a NumberPicker which is constrained to the second guideline and to the right of parent (third cell).

Everything works alright in Android Studio's activity design panel, even changing the simulated device type won't break the layout, however, when I run the application, to my surprise, the layout is messed up in a way that the TextView is overlapped by the ImageView and NumberPicker, and the two mentioned components even overlap each other!

Here is the ultimate layout design in Android Studio itself, which is supposed to look like this at runtime (Device is Pixel 9): Correct UI layout at design-time

And this is the messed up layout at runtime (Pixel 9): Incorrect UI layout at runtime, the title TextView is not concerened here.

Here is my XML code for the ConstraintLayout in question:

<androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#00000000">

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/guidelineRolesList1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_percent="0.2638191" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/guidelineRolesList2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_percent="0.69849247" />

            <ImageView
                android:id="@+id/imageViewRoleMafia"
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:src="@drawable/role_mafia"
                app:layout_constraintLeft_toLeftOf="parent"
                android:background="#00000000"
                app:layout_constraintRight_toLeftOf="@id/guidelineRolesList1"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="100dp"
                app:layout_constraintLeft_toRightOf="@id/guidelineRolesList1"
                android:gravity="center"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintRight_toLeftOf="@id/guidelineRolesList2"
                android:textColor="#ffffff"
                android:background="#00000000"
                android:text="@string/role_mafia"
                android:textSize="45sp"
                />

            <NumberPicker
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:id="@+id/numberPickerNumMafias"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintLeft_toRightOf="@id/guidelineRolesList2"
                app:layout_constraintRight_toRightOf="parent"
                android:background="#00000000"

                android:theme="@style/AppTheme.Picker"
                />

</androidx.constraintlayout.widget.ConstraintLayout>

I have double-checked the name for Guidelines, even set static DP values for sizes, but as long as the controls are constrained to those guidelines, the issue persists.


Solution

  • I think it is related to RTL (Right-To-Left) screens. You have to use start/end instead of left/right.

    for eg.

    app:layout_constraintLeft_toLeftOf="parent" 
    
    app:layout_constraintRight_toLeftOf="@id/guidelineRolesList1"
    

    to

    app:layout_constraintStart_toStartOf="parent" 
    
    app:layout_constraintEnd_toStartOf="@id/guidelineRolesList1"