ConstraintLayout with chain makes the view jump

Question

Update: Adding screenshot of desired result

I've this simple layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is a title"
        android:textSize="20sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <com.google.android.material.button.MaterialButton
        android:id="@+id/button"
        android:layout_width="100dp"
        android:layout_height="56dp"
        style="@style/LoginBlueButtonsV2"
        android:text="Button"
        android:textColor="@color/white"
        android:gravity="center"
        android:backgroundTint="@android:color/holo_red_dark"
        app:layout_constraintBottom_toTopOf="@id/text1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>
    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is a"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/button"
        app:layout_constraintEnd_toStartOf="@+id/text3"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"/>
    <TextView
        android:id="@+id/text3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" textview"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="@id/text1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/text1"
        app:layout_constraintTop_toTopOf="@id/text1"/>

</androidx.constraintlayout.widget.ConstraintLayout>

I want to have text2 at the top, text1 and text3 chained horizontally and constrained to the bottom and have button chained vertically to text1.

The result is that everything is jumping to the top

This is the desired result:

I can't figure why.

I've spent hours on hours trying to find a solution and understand what's wrong here...

Thanks.

Can you sketch your needs and upload it with label on the view to make it more clear . — Karunesh Palekar, Aug 29 '21 at 17:47
Hey @KaruneshPalekar I've added screenshot of desired result — Sharas, Aug 29 '21 at 18:03

score 0 · Answer 1 · answered Aug 29 '21 at 18:09

0

Remove this line from text1.

app:layout_constraintTop_toBottomOf="@id/button"

answered Aug 29 '21 at 18:09

Kishan Maurya

3,356
8
21

the question is why? I know that removing it will solve the problem, but i wonder why it happens – Sharas Aug 29 '21 at 18:11
As per your layout, you have to fix Text1 at the bottom and the material button on top of that. For text1, you are writing that it's top to bottom of button, and for the button, its bottom to the top of text1. making it circular-dependent. – Kishan Maurya Aug 29 '21 at 18:15
but isn't what chain is? – Sharas Aug 29 '21 at 18:18
For that, you also need to add vertical biasing and chain style between text1 and button else it will not form a chain and behave misaligned. – Kishan Maurya Aug 29 '21 at 18:37

ConstraintLayout with chain makes the view jump

1 Answers1