ConstraintLayout newest version doesn't work

Question

My project is using Constraintlayout 1.1.3 and i've just updated its version to 2.0.4.

and the part of entire layout got mixed up a little. so i checked my code and i realized that i use layout_ConstraintLeft or right.

so i added "start" and "end" of attribute of ConstraintLayout. but it's stil not working.

they stick to each other.

this constraintLayout is made of flat hierarchy. and the other part of this layout still works.

why dose it not work?

how can i fix it?

this is what i want.

but it ended up being like tihs. they stick to each other. when i upgrade ConstraintLayout version.

This is my xml code.

 <?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:custom="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:background="#FFF"
 android:fillViewport="true"
 android:clickable="true"
 tools:context=".ManiActivity">

<ImageView
    android:id="@+id/container_outline"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#333"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHeight_percent="0.25"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0"
    tools:viewBindingIgnore="true" />

<ImageView
    android:id="@+id/iv_drawer_info_logo"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginLeft="10dp"
    android:layout_marginTop="20dp"
    android:layout_marginBottom="20dp"
    android:src="@drawable/img_drawer_logo"
    app:layout_constraintBottom_toBottomOf="@id/container_outline"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintHeight_percent="0.15"
    app:layout_constraintHorizontal_bias="0"
    app:layout_constraintLeft_toLeftOf="@id/container_outline"
    app:layout_constraintStart_toStartOf="@id/container_outline"
    app:layout_constraintRight_toRightOf="@id/container_outline"
    app:layout_constraintEnd_toEndOf="@id/container_outline"
    app:layout_constraintTop_toTopOf="@id/container_outline"
    tools:viewBindingIgnore="true" />

<ImageView
    android:id="@+id/iv_drawer_info_name_icon"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginLeft="10dp"
    android:paddingTop="1dp"
    android:src="@drawable/icn_drawer_name"
    app:layout_constraintBottom_toBottomOf="@id/tv_drawer_info_name"
    app:layout_constraintDimensionRatio="3:5"
    app:layout_constraintHorizontal_bias="0"
    app:layout_constraintLeft_toRightOf="@id/iv_drawer_info_logo"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="@id/tv_drawer_info_name"
    app:layout_constraintVertical_bias="1"
    tools:viewBindingIgnore="true" />

<TextView
    android:id="@+id/tv_drawer_info_name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="3dp"
    android:gravity="left|bottom"
    android:textColor="#FFF"
    android:textSize="@dimen/text_main_big"
    android:textStyle="bold"
    app:layout_constraintBottom_toTopOf="@id/tv_drawer_info_id"
    app:layout_constraintHorizontal_bias="0"
    app:layout_constraintLeft_toRightOf="@id/iv_drawer_info_name_icon"
    app:layout_constraintRight_toRightOf="@id/container_outline"
    app:layout_constraintTop_toTopOf="@id/container_outline"
    app:layout_constraintVertical_chainStyle="packed"
    tools:text="Hello" />

<androidx.appcompat.widget.AppCompatTextView
    android:id="@+id/tv_drawer_info_id"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/detail_margin_3"
    android:ellipsize="end"
    android:maxLines="1"
    android:textColor="#FFF"
    android:textSize="14dp"
    app:autoSizeMaxTextSize="14dp"
    app:autoSizeMinTextSize="9dp"
    app:autoSizeTextType="uniform"
    app:layout_constrainedWidth="true"
    app:layout_constraintBottom_toBottomOf="@id/container_outline"
    app:layout_constraintHorizontal_bias="0"
    app:layout_constraintLeft_toLeftOf="@id/iv_drawer_info_name_icon"
    app:layout_constraintStart_toStartOf="@id/iv_drawer_info_name_icon"
    app:layout_constraintRight_toLeftOf="@id/iv_drawer_info_expire_icon"
    app:layout_constraintEnd_toStartOf="@id/iv_drawer_info_expire_icon"
    app:layout_constraintTop_toBottomOf="@id/tv_drawer_info_name"
    tools:text="hello wordhello wordhello wordhello wordhello wordhello wordhello wordhello word" />

<ImageView
    android:id="@+id/iv_drawer_info_expire_icon"
    android:layout_width="20dp"
    android:layout_height="0dp"
    android:layout_marginLeft="10dp"
    android:layout_marginStart="10dp"
    android:layout_marginRight="3dp"
    android:layout_marginEnd="3dp"
    android:paddingTop="1dp"
    android:src="@drawable/icn_drawer_expire"
    app:layout_constraintBottom_toBottomOf="@id/tv_drawer_info_expire_title"
    app:layout_constraintHorizontal_bias="1"
    app:layout_constraintLeft_toLeftOf="@id/container_outline"
    app:layout_constraintStart_toStartOf="@id/container_outline"
    app:layout_constraintRight_toLeftOf="@id/tv_drawer_info_expire_title"
    app:layout_constraintEnd_toStartOf="@id/tv_drawer_info_expire_title"
    app:layout_constraintTop_toTopOf="@id/tv_drawer_info_expire_title"
    app:layout_constraintVertical_bias="1"
    tools:viewBindingIgnore="true" />


<TextView
    android:id="@+id/tv_drawer_info_expire_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="left|bottom"
    android:text="Hello word"
    android:textColor="#FFF"
    android:textSize="14dp"
    android:textStyle="bold"
    app:layout_constraintBottom_toTopOf="@id/tv_drawer_info_expire"
    app:layout_constraintHorizontal_bias="0.6"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="@id/container_outline"
    app:layout_constraintVertical_chainStyle="packed"
    tools:viewBindingIgnore="true" />

<TextView
    android:id="@+id/tv_drawer_info_expire"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/detail_margin_3"
    android:textColor="#FFF"
    android:textSize="14dp"
    app:layout_constraintBottom_toBottomOf="@id/container_outline"
    app:layout_constraintHorizontal_bias="0"
    app:layout_constraintLeft_toLeftOf="@id/iv_drawer_info_expire_icon"
    app:layout_constraintStart_toStartOf="@id/iv_drawer_info_expire_icon"
    app:layout_constraintRight_toRightOf="@id/container_outline"
    app:layout_constraintEnd_toEndOf="@id/container_outline"
    app:layout_constraintTop_toBottomOf="@id/tv_drawer_info_expire_title"
    tools:text="~2020.12.31" />

<ImageButton
    android:id="@+id/btn_drawer_pay"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_marginRight="24dp"
    android:background="@drawable/ripple_white"
    android:padding="15dp"
    android:scaleType="fitCenter"
    android:src="@drawable/img_drawer_payment"
    app:layout_constrainedWidth="true"
    app:layout_constraintBottom_toBottomOf="@id/iv_drawer_info_logo"
    app:layout_constraintDimensionRatio="4:3"
    app:layout_constraintHeight_percent="0.15"
    app:layout_constraintHorizontal_bias="1"
    app:layout_constraintLeft_toLeftOf="@id/container_outline"
    app:layout_constraintStart_toStartOf="@id/container_outline"
    app:layout_constraintRight_toRightOf="@id/container_outline"
    app:layout_constraintEnd_toEndOf="@id/container_outline"
    app:layout_constraintTop_toTopOf="@id/iv_drawer_info_logo" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

It's not clear to me why your layout doesn't work or why it stopped working when you upgraded ConstraintLayout. I suggest the you break down the layout to its basic components and build back up to the full layout.

Considering the images that you posted, the following is how I would approach this using ConstraintLayout chains:

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:src="@drawable/ic_launcher_foreground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.15"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:src="@drawable/ic_launcher_foreground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintHeight_percent="0.15"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:text="TextView"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1"
        app:layout_constraintEnd_toStartOf="@+id/textView2"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toEndOf="@+id/imageView"
        tools:layout_editor_absoluteY="172dp" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1"
        app:layout_constraintEnd_toStartOf="@+id/imageView2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/textView"
        tools:layout_editor_absoluteY="172dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

This XML produces the following image:

Other than that, check that all the constraints you have are what you want and that you understand what they are doing. Starting from the basic layout and added one component or small set of components at a time would be a reasonable approach to solving the problem.