Android constraint layout center align two text fields

Question

I want to center align two items to another element and I have issues with that.

Now if I constraint the top text to top of left element and the bottom text to the bottom of the left element and chain them. The whole text will move. I want to fix the top text element but still have it centered if there is less text

Another condition that is not yet covered by the answer is that if the top text has more than one line

Answer 1

Place a Space at the 50% vertical mark of the view on the left. You can then vertically constrain the other views to the Space like this:

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

    <View
        android:id="@+id/view"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginStart="16dp"
        android:background="#8BC34A"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Space
        android:id="@+id/space"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="@id/view"
        app:layout_constraintStart_toEndOf="@id/view"
        app:layout_constraintTop_toTopOf="@id/view" />


    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginBottom="16dp"
        android:text="This is the upper TextView."
        app:layout_constraintBottom_toBottomOf="@+id/space"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/view" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="This is the lower TextView. This is the lower TextView. This is the lower TextView. This is the lower TextView. This is the lower TextView. This is the lower TextView. This is the lower TextView."
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/view"
        app:layout_constraintTop_toTopOf="@+id/space" />

</androidx.constraintlayout.widget.ConstraintLayout>

This looks like the following with single line text:

and like this for multi-line text in the bottom TextView:

---

---

To address the comment, if the top TextView can have more than one line and must only move down, add an end barrier with the Space and the top TextView as the referenced ids as follows:

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

    <View
        android:id="@+id/view"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginStart="16dp"
        android:background="#8BC34A"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Space
        android:id="@+id/space"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="@id/view"
        app:layout_constraintStart_toEndOf="@id/view"
        app:layout_constraintTop_toTopOf="@id/view" />

    <TextView
        android:id="@+id/helperView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginBottom="16dp"
        android:text="A"
        app:layout_constraintBottom_toBottomOf="@+id/space"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/view"
        tools:visibility="invisible" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:text="This is the upper TextView."
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/view"
        app:layout_constraintTop_toTopOf="@id/helperView" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="This is the lower TextView."
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/view"
        app:layout_constraintTop_toBottomOf="@id/barrier" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="space,textView1" />
</androidx.constraintlayout.widget.ConstraintLayout>