Constrain layout with padding and no margin, ignore some spacing

Question

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

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>

just added what I see. I want to see "C" is centered and the space to "B" and "D" to "C" is equal — Elad Benda, Dec 08 '19 at 15:27
your constraints are wrong. For example left of B should be constrained to right of A instead of left of A, etc. — Tim, Dec 08 '19 at 15:44

score 1 · Answer 1 · answered Dec 08 '19 at 15:44

Change your:

  <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" />

To:

<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" />

Differences: app:layout_constraintLeft_toLeftOf="@id/c"-app:layout_constraintLeft_toRightOf="@id/c"

p00ns · Accepted Answer · 2019-12-08T15:48:34.587

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:

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.

What is the difference? removed the ` app:layout_constraintHorizontal_chainStyle="packed"` ? — Elad Benda, Dec 08 '19 at 15:36
for example the app:layout_constraintLeft_toRightOf="@id/a" in the second textview. you should set the contraint from left to right and not left to left. I testet my xml code and it looked fine. — p00ns, Dec 08 '19 at 15:44

score 0 · Answer 3 · answered Dec 08 '19 at 15:47

You can't have both constraints to_left_of

try this:

<?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_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+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_constraintStart_toEndOf="@+id/a"
        app:layout_constraintEnd_toStartOf="@+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_constraintStart_toEndOf="@+id/b"
        app:layout_constraintEnd_toStartOf="@+id/d"
        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_constraintStart_toEndOf="@+id/c"
        app:layout_constraintEnd_toStartOf="@+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_constraintStart_toEndOf="@+id/d"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Constrain layout with padding and no margin, ignore some spacing

3 Answers3