How to center the elements in ConstraintLayout

Question

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>

score 485 · Answer 1 · edited Aug 08 '21 at 16:57

485

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.

edited Aug 08 '21 at 16:57

Aldan

674
9
23

answered Jul 25 '17 at 22:10

binW

13,220
11
56
69

5

This is a much better approach than using guidelines. – ssand Nov 17 '17 at 15:21
1

This is More appropriate and also I have seen this in many talks and examples from officials. – TapanHP Sep 18 '18 at 07:32
2

Guidelines are better because once you have a complex layout, which will happen once marketing gets a hold of it then simplistic centering no longer works. Better to have guidelines and center to the guideline for top and bottom – Nick Turner Jan 18 '19 at 14:34
1

this is ony useful if the textview you want to center isn't use for ajusting position of other view objects... – Bénédicte Lagouge Mar 13 '20 at 11:04
@Gojir4 iOS has this exact feature. Why Android doesn't is a mystery. – El Sushiboi Jun 30 '20 at 22:22
Nice answer! A note is that I think the latest is that you should try to use: `app:layout_constraintStart_toStartOf="parent"` and `app:layout_constraintEnd_toEndOf="parent"` instead of Left_toLeftOf and Right_toRightOf. – Ola Ström Jan 30 '22 at 10:14

score 174 · Accepted Answer · edited Jun 20 '20 at 09:12

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>

`Guideline` is just an invisible item on which you can anchor your views. `layout_constraintGuide_percent` is the percentage in the parent. Here 0.5 is 50 % height — Pycpik, Mar 31 '17 at 15:15
Thanks. Gotcha. I have now two `TextInputEditText` and one `Button`. I want to place them in a center of screen. But as of now it is not https://pastebin.com/iXYtuXHg here is the screenshot https://www.dropbox.com/s/k7997q2buvw76cp/q.png?dl=0 — N Sharma, Mar 31 '17 at 15:38
You can center the middle one and add one above and one below or put them in a `LinearLayout` and center it. — Pycpik, Mar 31 '17 at 15:42
LinearLayout defeats the whole purpose of Constraints. Just make the first one top and bottom to the guide then constrain the second one to the top edit box — Nick Turner, Jan 18 '19 at 14:30

score 81 · Answer 3 · edited Aug 09 '21 at 05:22

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:

You can read more about using chains in following posts:

This is certainly the best answer. Other answers only work for one or two views. This one is more scalable, as it works for one, two and as many views as you want. — mdelolmo, Mar 06 '19 at 16:07
why with plain Button it also works for `android:layout_width="wrap_content"` — CodeToLife, Apr 23 '22 at 06:22

live-love · Answer 4 · 2019-03-18T17:46:59.220

You can center a view as a percentage of the screen size.

This example uses 50% of width and height:

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

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FF0000"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_percent=".5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent=".5"></LinearLayout>

</android.support.constraint.ConstraintLayout>

This was done using ConstraintLayout version 1.1.3. Don't forget to add it to your dependencies in the gradle, and increase the version if there is a new version out there:

dependencies {
...
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
}

score 21 · Answer 5 · answered Nov 01 '19 at 09:54

add these tag in your view

    app:layout_constraintCircleRadius="0dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"

and you can right click in design mode and choose center.

score 14 · Answer 6 · edited Aug 08 '21 at 17:08

You can use layout_constraintCircle for center view inside 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:id="@+id/mparent"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageButton
            android:id="@+id/btn_settings"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/ic_home_black_24dp"
            app:layout_constraintCircle="@id/mparent"
            app:layout_constraintCircleRadius="0dp" />

</android.support.constraint.ConstraintLayout>

with constraintCircle to parent and zero radius you can make your view be center of parent.

best.solution.ever. Just like a "app:layout_constraintCenter_in="parent"" (which doesn't exist) — Bénédicte Lagouge, Mar 13 '20 at 11:03
This view is not constrained. It only has designtime positions, so it will jump to (0,0) at runtime unless you add the constraints — Min2, Mar 16 '21 at 02:05

score 5 · Answer 7 · edited Aug 08 '21 at 16:56

5

Just add android:gravity="center" in your layout and done :)

edited Aug 08 '21 at 16:56

Aldan

674
9
23

answered Feb 19 '21 at 11:02

Vanya Rachel

1,329
1
18
20

Aldan · Answer 8 · 2021-07-29T23:17:11.107

Use

app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"

Example

<ImageView
    android:id="@+id/ivIcon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher_background"
    android:contentDescription="@string/app_name"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

score 0 · Answer 9 · answered May 20 '23 at 20:36

Below would center the image on the screen

<?xml version="1.0" encoding="utf-8"?><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">

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:src="@drawable/logo" />
</androidx.constraintlayout.widget.ConstraintLayout>

How to center the elements in ConstraintLayout

9 Answers9

Update:

Linked