Search code examples
androidandroid-layoutandroid-constraintlayout

How to center the elements in ConstraintLayout


I am using ConstraintLayout in my application to make applications layout. I am trying to a create a screen wheren one EditText and Button should be in center and Button should be below of EditText with a marginTop only 16dp.

Here is my layout and screenshot how it is looking right now.

activity_authenticate_content.xml

<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"
    tools:context="com.icici.iciciappathon.login.AuthenticationActivity">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/client_id_input_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="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: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_toTopOf="@id/client_id_input_layout" />

</android.support.constraint.ConstraintLayout>

enter image description here


Solution

  • 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