androidandroid-constraintlayoutconstraint-layout-chains

Constrain layout with padding and no margin, ignore some spacing


I have a constraintLayout-1.1 with 5 textViews.

I want to center horizontally the 3rd textView and spread its siblings packed to it.

However when I try this, I see the space between the children is not even.

I want to view to be packed to the center. Also "C" should be centered and the space to "B" and "D" to "C" is equal enter image description here

What am I missing?

<?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"
    tools:context=".MainActivity">

  <TextView
      android:id="@+id/a"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="A"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toLeftOf="@id/b"
      app:layout_constraintHorizontal_chainStyle="packed"
      app:layout_constraintTop_toTopOf="parent" />

  <TextView
      android:id="@+id/b"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="B"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="@id/a"
      app:layout_constraintRight_toLeftOf="@id/c"
      app:layout_constraintTop_toTopOf="parent" />


  <TextView
      android:id="@+id/c"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="C"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

  <TextView
      android:id="@+id/d"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="D"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="@id/c"
      app:layout_constraintRight_toLeftOf="@id/e"
      app:layout_constraintTop_toTopOf="parent" />

  <TextView
      android:id="@+id/e"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="E"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="@id/d"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent" />



</androidx.constraintlayout.widget.ConstraintLayout>

Solution

  • Does this work?

    <?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"
        tools:context=".MainActivity">
    
        <TextView
            android:id="@+id/a"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="A"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@id/b"
            app:layout_constraintTop_toTopOf="parent" />
    
        <TextView
            android:id="@+id/b"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="B"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toRightOf="@id/a"
            app:layout_constraintRight_toLeftOf="@id/c"
            app:layout_constraintTop_toTopOf="parent" />
    
    
        <TextView
            android:id="@+id/c"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="C"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
        <TextView
            android:id="@+id/d"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="D"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toRightOf="@id/c"
            app:layout_constraintRight_toLeftOf="@id/e"
            app:layout_constraintTop_toTopOf="parent" />
    
        <TextView
            android:id="@+id/e"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="E"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toRightOf="@id/d"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
    
    
    </androidx.constraintlayout.widget.ConstraintLayout>
    

    I tested my code of the xml lyout and it looked like this: enter image description here

    The problem was that you set the constraint from left to left for the B for example. It should be from left to right of A.