How to align in center of a space using constraint layout

Question

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:

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?

Pawel Laskowski · Accepted Answer · 2019-04-02T22:35:05.090

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:

Tamir Abutbul · Answer 2 · 2019-04-02T19:58:09.547

You can simply add guideline like this :

Before you look at the layout lets look on how guidelines work:

You can think of them as invisible views that won't affect your layout, from the documentation:

a guideline is a visual guide which will not be seen at runtime that is used to align other views too.

So how I did it - I created a guideline (horizontal in my case) and told him to be at 20% height of the screen - app:layout_constraintGuide_percent="0.2" and after that I connected constraint to it and now your view is centered between the top of your screen and your guidline.

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


    <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:layout_marginTop="15dp"
        android:orientation="vertical"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/main_header">

            <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:layout_marginBottom="8dp"
        android:text="centered text"
        app:layout_constraintBottom_toTopOf="@+id/guideline3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/vertical_layout"
        app:layout_constraintTop_toBottomOf="@id/main_header" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.2" />

But , please avoid using nested views because this is not what constraintLayout is for.

Here is example for layout without nested view groups:

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


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


    <TextView
        android:id="@+id/textView11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="Foo foo fo"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@+id/guideline3"
        app:layout_constraintEnd_toEndOf="@+id/textView8"
        app:layout_constraintStart_toStartOf="@+id/textView8"
        app:layout_constraintTop_toBottomOf="@+id/textView8" />

    <TextView
        android:id="@+id/textView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bar bar bar"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@+id/textView11"
        app:layout_constraintEnd_toEndOf="@+id/textView10"
        app:layout_constraintStart_toStartOf="@+id/textView10"
        app:layout_constraintTop_toBottomOf="@+id/textView10" />

    <TextView
        android:id="@+id/textView10"
        android:layout_width="wrap_content"
        android:layout_height="24dp"
        android:layout_marginStart="8dp"
        android:text="Bar bar bar"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@+id/textView8"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/main_header" />


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:text="centered text"
        app:layout_constraintBottom_toTopOf="@+id/guideline3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/main_header" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.2" />

I don't get how the horizontal guideline with 20% height of the screen helps with the centering. Is the 20% a magic number? How did you find it? — Jim, Apr 02 '19 at 20:02
Second question: You mention not to use the vertical linear layout. What about a custom view? Is that also an antipattern? — Jim, Apr 02 '19 at 20:03
Not at all, it just an example. now think of the 20% guideline as an invisible view. if you constraint the top of your text to the top of your screen and the bottom of your text to the guideline it will be centered between them(because this is how constraints works.) — Tamir Abutbul, Apr 02 '19 at 20:04
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/191125/discussion-between-tamir-abutbul-and-jim). — Tamir Abutbul, Apr 02 '19 at 20:05

Shoaib Mirza · Answer 3 · 2019-04-02T20:30:13.897

It is a constraint layout do it with adding a constraint at the top of the text view. Check out this https://developer.android.com/training/constraint-layout to know details about how constraint layout work.

Just added marginTop and solved your prooblem

Here is your layout

<?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:layout_marginTop="40dp"
    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>

Here is the image

I have read the doc and I have used constraints for the other elements. I don't understand how I can use the constraints to move that textview in the center of that empty space that is to the right of the vertical layout — Jim, Apr 02 '19 at 19:48
https://android.jlelse.eu/how-to-use-constraintlayout-736a78e2971c check this too — Shoaib Mirza, Apr 02 '19 at 20:06
margin 40dp only works if the text in the vertical linear layout does not change. So it is not the general solution to the problem, but a trial of how much space to add — Jim, Apr 02 '19 at 20:35

How to align in center of a space using constraint layout

3 Answers3