android-layoutandroid-viewandroid-constraintlayoutandroid-viewgroup

How to align in center of a space using constraint layout


I have the following layout file that uses a ConstraintLayout

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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/main_header"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="This is my header text and is long"
            android:textSize="20sp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
    />


    <LinearLayout
            android:id="@+id/vertical_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/main_header"
            android:layout_marginTop="15dp"
    >
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Foo foo fo"
                android:textSize="18sp"
        />
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Bar bar bar"
                android:textSize="18sp"
        />
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Bar bar bar"
                android:textSize="18sp"
        />
    </LinearLayout>

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="centered text"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/vertical_layout"
            app:layout_constraintTop_toBottomOf="@id/main_header"
    />
</android.support.constraint.ConstraintLayout>

The result is the following:
enter image description here

How can I make the highlighted centered text come to the center of that white space next to the vertical linear layout? (approx where the red arrow points?


Solution

  • Easiest way would be to constrain the top and the bottom of the TextView to the respective edges of the LinearLayout so that it's centered vertically between them, even when the LinearLayout's height changes. The horizontal constraints are fine as they are right now. The constraints for the TextView would look like this:

    app:layout_constraintBottom_toBottomOf="@id/vertical_layout"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/vertical_layout"
    app:layout_constraintTop_toTopOf="@id/vertical_layout"
    

    Result:

    enter image description here