Align a group of elements in ConstraintLayout

Question

I have three elements: an output text, an input text and a button. I want that the three of them are aligned to the center of the screen. The problem I am getting is that I am able to align one element to the center of the screen and then the rest of them are aligned regarding this first element, which implies that they are not aligned to the center as a group of elements but that they align among an element that is in the center.

Therefore, my question is: how can I align these group of three elements to the center in a ConstraintLayout?

<android.support.constraint.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"
    android:layout_gravity="center">

    <android.support.constraint.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="550dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/textinfo"
            android:layout_width="230dp"
            android:layout_height="wrap_content"
            android:ems="10"
            android:gravity="center_horizontal"
            android:inputType="textMultiLine"
            android:singleLine="false"
            android:text="InfoText"
            android:textAlignment="center"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf=""
            app:layout_constraintTop_toTopOf="parent" />

        <android.support.design.widget.TextInputLayout
            android:id="@+id/inputToken"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:hint="Token"
            app:counterEnabled="true"
            app:counterMaxLength="6"
            app:errorEnabled="true"
            app:hintEnabled="true"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textinfo">

            <android.support.design.widget.TextInputEditText
                android:layout_width="200dp"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal"
                android:gravity="center"
                android:inputType="textCapSentences"
                android:maxLength="6"
                android:textAlignment="center"
                android:textSize="32sp" />
        </android.support.design.widget.TextInputLayout>

        <Button
            android:id="@+id/btnSend"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Enviar"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/inputToken" />
    </android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

Answer 1

Sounds like you want to tell your 3 views to have no space between them, and as a group stick to the center of the screen.

You can do it like this:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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/textinfo"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:ems="10"
    android:layout_marginBottom="8dp"
    android:gravity="center_horizontal"
    android:inputType="textMultiLine"
    android:singleLine="false"
    android:text="InfoText"
    android:textAlignment="center"
    app:layout_constraintBottom_toTopOf="@+id/inputToken"
    app:layout_constraintEnd_toEndOf="@+id/inputToken"
    app:layout_constraintStart_toStartOf="@+id/inputToken" />

<TextView
    android:id="@+id/inputToken"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:hint="Token"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_percent="0.6" />

<Button
    android:id="@+id/btnSend"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Enviar"
    android:layout_marginTop="8dp"
    app:layout_constraintEnd_toEndOf="@+id/inputToken"
    app:layout_constraintStart_toStartOf="@+id/inputToken"
    app:layout_constraintTop_toBottomOf="@+id/inputToken" />

</android.support.constraint.ConstraintLayout>

What I did:

Constraint view A to the center of the screen, another view is constrained to the top of view A and another one constrained to the bottom of view A.