How to center the elements in ConstraintLayout How to center the elements in ConstraintLayout android android

How to center the elements in ConstraintLayout


There is a simpler way. If you set layout constraints as follows and your EditText is fixed sized, it will get centered in the ConstraintLayout:

app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent"app:layout_constraintBottom_toBottomOf="parent"

The left/right pair centers the view horizontally and top/bottom pair centers it vertically. This is because when you set the left, right or top,bottom constraints bigger than the view it self, the view gets centered between the two constraints i.e the bias is set to 50%. You can also move view up/down or right/left by setting the bias your self. Play with it a bit and you will see how it affects the views position.


Update:

Chain

You can now use the chain feature in packed mode as describe in Eugene's answer.


Guideline

You can use a horizontal guideline at 50% position and add bottom and top (8dp) constraints to edittext and button:

<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:paddingLeft="16dp"    android:paddingRight="16dp">    <android.support.design.widget.TextInputLayout        android:id="@+id/client_id_input_layout"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:layout_marginBottom="8dp"        app:layout_constraintBottom_toTopOf="@+id/guideline"        android:layout_marginRight="8dp"        app:layout_constraintRight_toRightOf="parent"        android:layout_marginLeft="8dp"        app:layout_constraintLeft_toLeftOf="parent">        <android.support.design.widget.TextInputEditText            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:hint="@string/login_client_id"            android:inputType="textEmailAddress"/>    </android.support.design.widget.TextInputLayout>    <android.support.v7.widget.AppCompatButton        android:id="@+id/authenticate"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:text="@string/login_auth"        app:layout_constraintTop_toTopOf="@+id/guideline"        android:layout_marginTop="8dp"        android:layout_marginRight="8dp"        app:layout_constraintRight_toRightOf="parent"        android:layout_marginLeft="8dp"        app:layout_constraintLeft_toLeftOf="parent"/>    <android.support.constraint.Guideline        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:id="@+id/guideline"        android:orientation="horizontal"        app:layout_constraintGuide_percent="0.5"/></android.support.constraint.ConstraintLayout>

Layout Editor


The solution with guideline works only for this particular case with single line EditText. To make it work for multiline EditText you should use layout_constraintVertical_chainStyle="packed".

<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"    android:paddingLeft="16dp"    android:paddingRight="16dp">    <android.support.design.widget.TextInputLayout        android:id="@+id/client_id_input_layout"        android:layout_width="0dp"        android:layout_height="wrap_content"        app:layout_constraintBottom_toTopOf="@+id/authenticate"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_chainStyle="packed">        <android.support.design.widget.TextInputEditText            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:hint="@string/login_client_id"            android:inputType="textEmailAddress" />    </android.support.design.widget.TextInputLayout>    <android.support.v7.widget.AppCompatButton        android:id="@+id/authenticate"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:layout_marginTop="16dp"        android:text="@string/login_auth"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintLeft_toLeftOf="@id/client_id_input_layout"        app:layout_constraintRight_toRightOf="@id/client_id_input_layout"        app:layout_constraintTop_toBottomOf="@id/client_id_input_layout" /></android.support.constraint.ConstraintLayout>

Here's how it looks:

View on Nexus 5

You can read more about using chains in following posts: