How to bring all the content of the layout at centre in ConstraintLayout

Question

I am making a login screen where I have 2 EditText and 2 Buttons. I have placed them in vertical way one below each other. But I want to bring all the content at centre in my layout.

Below is my activity_login.xml:

<?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"
    android:id="@+id/loginLayout"
    android:orientation="vertical">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/emailLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="@+id/passwordLayout"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/loginEmail"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableEnd="@drawable/ic_action_user"
            android:hint="@string/email"
            android:textAppearance="@style/TextLabel" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/passwordLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/emailLayout"
        app:layout_constraintBottom_toBottomOf="@+id/logi">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/loginPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableEnd="@drawable/ic_action_password"
            android:hint="@string/password"
            android:textAppearance="@style/TextLabel" />
    </android.support.design.widget.TextInputLayout>

    <Button
        android:id="@+id/loginSubmit"
        style="@style/Widget.AppCompat.Button.Colored"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/login"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/passwordLayout" />

    <Button
        android:id="@+id/registerText"
        style="@style/Widget.AppCompat.Button.Colored"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/register"
        android:theme="@style/RegistrationButton"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/loginSubmit" />
</android.support.constraint.ConstraintLayout>

Here is the image of the layout:

I am not able to bring those views at the centre.

Actually they seem to be "centered". But I guess you want them to be of smaller width centered? Or do you mean vertically centered? — Michael Troger, Aug 05 '17 at 10:24
put all view in one parent layout and set gravity of parent layout to center. — nivesh shastri, Aug 05 '17 at 10:26
But in ConstraintLayout we should avoid adding depth to views right ? @niveshshastri — sagar suri, Aug 05 '17 at 10:27
Possible duplicate of [How to center the elements in ConstraintLayout](https://stackoverflow.com/questions/43143468/how-to-center-the-elements-in-constraintlayout) — Yogesh Mane, Aug 05 '17 at 10:30
**I think u should follow below link:** https://stackoverflow.com/questions/38747040/constraint-layout-button-text-center-alignment — komal akhani, Aug 05 '17 at 10:38

Michael Troger · Answer 1 · 2017-08-05T11:19:32.907

First make sure you use an up to date version of the ConstraintLayout (at the time of writing 1.0.2). You can achieve vertical centering by giving the top most element (emailLayout) the app:layout_constraintVertical_chainStyle="packed" attribute.

Besides that you need to make sure that all elements are connected like a chain in the code. I.e. the upper most view (emailLayout) is under constraint of the parent on top and under constraint of the next sibling (passwordLayout) on the bottom.

The second view (passwordLayout) needs to be under constraint of the sibling before it at the top (emailLayout) and under constraint of the next sibling (loginSubmit) at the bottom and so on...

The last view (registerText) has a top constraint to the sibling before as well but has a bottom constraint to the bottom of the parent.

Hint: android:orientation="vertical" is useless in a ConstraintLayout. You can leave this out.

EDIT: Here a minimum code example of vertical centering with the ConstraintLayout:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <View
        android:id="@+id/view1"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#ff0000"
        app:layout_constraintVertical_chainStyle="packed"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/view2"/>
    <View
        android:id="@+id/view2"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#00ff00"
        app:layout_constraintTop_toBottomOf="@+id/view1"
        app:layout_constraintBottom_toTopOf="@+id/view3"/>
    <View
        android:id="@+id/view3"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#0000ff"
        app:layout_constraintTop_toBottomOf="@+id/view2"
        app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>

Resulting in:

Mehmed · Accepted Answer · 2017-08-05T11:23:58.530

I am using packed chaining in my ConstraintLayout. So, yours should be 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"
    android:id="@+id/loginLayout"
    android:orientation="vertical">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/emailLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/passwordLayout"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintVertical_chainStyle="packed">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/loginEmail"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableEnd="@drawable/ic_action_user"
            android:hint="@string/email"
            android:textAppearance="@style/TextLabel" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/passwordLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/emailLayout"
        app:layout_constraintBottom_toTopOf="@+id/loginSubmit"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/loginPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableEnd="@drawable/ic_action_password"
            android:hint="@string/password"
            android:textAppearance="@style/TextLabel" />
    </android.support.design.widget.TextInputLayout>

    <Button
        android:id="@+id/loginSubmit"
        style="@style/Widget.AppCompat.Button.Colored"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/login"
        app:layout_constraintTop_toBottomOf="@+id/passwordLayout"
        app:layout_constraintBottom_toTopOf="@+id/registerText"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent" />

    <Button
        android:id="@+id/registerText"
        style="@style/Widget.AppCompat.Button.Colored"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/register"
        android:theme="@style/RegistrationButton"
        app:layout_constraintTop_toBottomOf="@+id/loginSubmit"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent" />
</android.support.constraint.ConstraintLayout>

The resultant layout should be as follows:

How to bring all the content of the layout at centre in ConstraintLayout

2 Answers2