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:
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>
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.