Android Constraint Layout all borke after update to 2.1.2 from 1.1.3

Question

Recently I have decided to update my old project with the latest library as I wanted to learn how to migrate to use Jetpack compose.

But somehow once I upgrade my Constraint Layout Library from 1.1.3 to 2.1.2, some of the layouts just broke. I tried to search on the internet, but I have not seen people facing the same issue yet.

Basically, whenever a layout that contains the following attribute will show correctly in the preview, but once build on a physical device the view is broken:

layout_constraintBaseline_toBaselineOf
layout_constraintHorizontal_chainStyle="packed"
- layout_constraintHorizontal_bias is not working when used with layout_constraintHorizontal_chainStyle

I am running out of ideas on how to fix these views without removing all the chain styles or biases.

Highly appreciate it if anyone can offer any help.

Here is an example of one of the XML files that works on 1.1.3 and does not work on 2.1.2. Again the preview on the Android studio is correctly shown, but the app built on a physical device is broken.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text_battery"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="12dp"
        android:text="Battery"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/image_battery"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <ImageView
        android:id="@+id/image_battery"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:src="@drawable/ic_battery"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintTop_toBottomOf="@id/text_battery"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="@id/text_battery"
        app:layout_constraintEnd_toStartOf="@id/text_battery_percentage"/>

    <TextView
        android:id="@+id/text_battery_percentage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        app:layout_constraintTop_toTopOf="@id/image_battery"
        app:layout_constraintBottom_toTopOf="@id/text_time"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_constraintStart_toEndOf="@id/image_battery"
        app:layout_constraintEnd_toEndOf="parent"
        tools:text="100%" />

    <TextView
        android:id="@+id/text_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="12sp"
        app:layout_constraintTop_toBottomOf="@id/text_battery_percentage"
        app:layout_constraintBottom_toBottomOf="@id/image_battery"
        app:layout_constraintStart_toStartOf="@id/text_battery_percentage"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        tools:text="12:00 am" />

    <TextView
        android:id="@+id/text_duration"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:text="Duration"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/image_clock"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <ImageView
        android:id="@+id/image_clock"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:src="@drawable/ic_clock"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintTop_toBottomOf="@id/text_duration"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="@id/text_duration"
        app:layout_constraintEnd_toStartOf="@id/image_calendar" />

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottie_progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerInside"
        android:visibility="gone"
        app:layout_constraintTop_toTopOf="@id/image_clock"
        app:layout_constraintBottom_toBottomOf="@id/image_clock"
        app:layout_constraintStart_toStartOf="@id/image_clock"
        app:layout_constraintEnd_toEndOf="@id/image_clock" />

    <ImageView
        android:id="@+id/image_calendar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_phone"
        app:tint="@color/black"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintTop_toTopOf="@id/image_clock"
        app:layout_constraintBottom_toBottomOf="@id/image_clock"
        app:layout_constraintStart_toEndOf="@id/image_clock"
        app:layout_constraintEnd_toEndOf="@id/text_duration"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Hello, I am also facing same problem, have you get any solution for this? — Upendra Shah, Apr 12 '22 at 15:23
@UpendraShah unfortunately I have not yet found any solution for it. — Ming, Apr 12 '22 at 17:22
Okay. Thanks. I am also not getting solution for this. But in my case I can able to upgrade constraint lib to 2.0.1 without any misbehavior of layout ui. So may be you can use that version. — Upendra Shah, Apr 13 '22 at 07:26
@UpendraShah Hi there, I know it has been a while, but have you figured out the reason of your problem? If not, I have edit my question with recent update, hopefully it could help you. — Ming, May 04 '23 at 22:58
It's best if you answer your own question and accept it if you've since resolved your issue. Then people looking to answer the same question can see that the question has an answer. — dominicoder, May 04 '23 at 23:27
@dominicoder Thank you for the suggestion, I have edited the post, and answered my own question. — Ming, May 15 '23 at 18:33

score 0 · Accepted Answer · answered May 15 '23 at 18:32

Since the question was posted, I was not able to find a solution so I postponed the update of the Constraint Layout library.

But in the recent event of updating my app's UI automation test with Appium, I have found the reason why the view is correctly shown in the preview but incorrect in the physical devices.

The reason is that in my app, I used to programmatically change the view's ids for the Appium to track if the view is visible. And because the id of the view was changed, the ConstraintSet is no longer linked to the correct view, therefore the view was incorrectly shown in the physical devices.

Hopefully, this will help you located/inspire you to solve your issue as well.

Android Constraint Layout all borke after update to 2.1.2 from 1.1.3

1 Answers1