Centering two views horizontally under another view in ConstraintLayout

Question

I have 3 buttons, one full width button on top of two buttons of half width of the screen. Here is the layout:

<?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">
    <Button
        android:id="@+id/btn_save"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Save"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/btn_delete"
        app:layout_constraintVertical_chainStyle="packed"/>
    <Button
        android:id="@+id/btn_delete"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Delete"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn_cancel"
        app:layout_constraintTop_toBottomOf="@+id/btn_save" />
    <Button
        android:id="@+id/btn_cancel"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Cancel"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/btn_delete"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn_save"/>
</android.support.constraint.ConstraintLayout>

The outcome is that the cancel button is getting pushed down instead of aligning on the line horizontally with the delete button.

After playing around it a little bit, in order to make the cancel button to align horizontally with the delete button, I had to add either of the of following to the cancel button.

app:layout_constraintBaseline_toBaselineOf="@+id/btn_delete"

or

app:layout_constraintVertical_bias="0.0"

Questions:

1. Why did the ConstraintLayout pushed down the cancel button instead of aligning it with the delete button? Why do I have to use the baseline or bias on the cancel button in order to make it aligned on the same line?

2. Besides using the baseline and the bias, are there any other ways to make the cancel button align with the delete button?

Answer 1

Why did the ConstraintLayout pushed down the cancel button instead of aligning it with the delete button? Why do I have to use the baseline or bias on the cancel button in order to make it aligned on the same line?

cancel button is pushed down because when you set following 2 constraints on the cancel button

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@+id/btn_save"

the cancel button is vertically centered between save button and the bottom of the parent layout.

Now you might ask that delete button also has same two constraints, then why did it not get pushed down like cancel button did?. Reason is, that you have set following constraint on save button

app:layout_constraintBottom_toTopOf="@+id/btn_delete"

If you change it to

app:layout_constraintBottom_toTopOf="@+id/btn_cancel"

delete button will be pushed down and cancel button will be aligned with save button.

If you change it to

app:layout_constraintBottom_toBottomOf="parent"

you will get the following layout

Notice that, delete and cancel button now are aligned in same way. Reason is that now both delete and cancel button have following constraints

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@+id/btn_save"

Both buttons are centered vertically between the save button and bottom of the parent layout.

Besides using the baseline and the bias, are there any other ways to make the cancel button align with the delete button?

There are multiple ways to achieve your desired layout

One way to do it is to remove the

app:layout_constraintBottom_toBottomOf="parent" 

from both cancel and delete button and change

app:layout_constraintBottom_toTopOf="@+id/btn_delete"

to

app:layout_constraintBottom_toBottomOf="parent"

in save button layout.

This will give you following layout

This method works because removing bottom constraint makes both cancel and delete button to not align vertically centered in the space between save button and the bottom of the parent layout.

Answer 2

Remove app:layout_constraintBottom_toBottomOf="parent" from btn_cancel

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

        <Button
            android:id="@+id/btn_save"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Save"
            app:layout_constraintBottom_toTopOf="@+id/btn_delete"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_chainStyle="packed" />

        <Button
            android:id="@+id/btn_delete"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Delete"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/btn_cancel"
            app:layout_constraintTop_toBottomOf="@+id/btn_save" />

        <Button
            android:id="@+id/btn_cancel"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Cancel"
            app:layout_constraintLeft_toRightOf="@+id/btn_delete"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/btn_save" />
    </android.support.constraint.ConstraintLayout>

OR

Remove app:layout_constraintVertical_chainStyle="packed" for more details check chainStyle https://developer.android.com/training/constraint-layout/index.html#constrain-chain