ConstraintLayout - centering views with next to each other vertically or horizontally

Question

How to center align 3 buttons with next to each other vertically using ConstraintLayout?

To be clear, i want to convert this simple layout structure into flat UI using ConstraintLayout

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:orientation="vertical">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
</LinearLayout>
</FrameLayout>

I have obtained a nearest solution as follows

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


<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toTopOf="@+id/button2"
    />

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    tools:layout_conversion_absoluteHeight="48dp"
    tools:layout_conversion_absoluteWidth="88dp"
    tools:layout_conversion_absoluteX="148dp"
    tools:layout_conversion_absoluteY="259dp"
    app:layout_constraintBottom_toTopOf="@+id/button3"
    app:layout_constraintTop_toBottomOf="@+id/button"
    app:layout_constraintRight_toRightOf="parent"/>

<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    app:layout_constraintLeft_toLeftOf="parent"
    tools:layout_conversion_absoluteHeight="48dp"
    tools:layout_conversion_absoluteWidth="88dp"
    tools:layout_conversion_absoluteX="148dp"
    tools:layout_conversion_absoluteY="307dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button2"
    app:layout_constraintRight_toRightOf="parent"/>

 </android.support.constraint.ConstraintLayout>

But clearly, you can see that the obtained output does not match to the required one. i don't want any margin or space in between the 3 buttons, all i want is to center align those 3 buttons next to each other vertically just like they are in a LinearLayout which has a vertical orientation.

Solution 1

Proper solution

It is good that you have created the chain between those 3 views. Having a chain you can specify the chain "style" and it will affect how views are distributed along the chain axis. The chain style can be controlled by "chain" button right below the view:

Click on it few times to toggle between all 3 modes:

spread (the default one)

spread_inside

packed

As you can see - packed is the one that you want.
Setting the chain style will result in adding following attribute to the first child in the chain, so you can do it also from XML:

app:layout_constraintVertical_chainStyle="packed"

Naive solution

Solution proposed in the other answer may look like it works, but in reality it is not a proper solution for your problem. Consider the case when you have views with different heights, lets say the bottom one is larger. That solution will lock the middle view in center and position other views above and below. It will not result in a "centered group" (only the middle view would be centered). You can see the comparison in the image below:

Solution 2

By Android Studio's 'Layout Editor'

1. drag and drop three buttons into the Android Studio's 'Layout Editor'

   

2. Select those buttons together by dragging mouse

   

3. Pack them vertically using the 'pack' button in 'Layout Editor'

   

4. Align them center horizontally using 'Align-Center horizontally' button

   

5. Align them center vertically using the 'Align-Center vertically' button

   

By xml

• pack all those three buttons into a vertically packed chain using

   app:layout_constraintVertical_chainStyle="packed"
  

• add left and right constraints for all those three buttons as parent

---

<?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"
tools:layout_editor_absoluteY="25dp"
tools:layout_editor_absoluteX="0dp">


<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintVertical_chainStyle="packed"
    app:layout_constraintBottom_toTopOf="@+id/button2"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"/>

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:layout_conversion_absoluteHeight="48dp"
    tools:layout_conversion_absoluteWidth="88dp"
    tools:layout_conversion_absoluteX="148dp"
    tools:layout_conversion_absoluteY="259dp"
    app:layout_constraintVertical_chainStyle="packed"
    app:layout_constraintBottom_toTopOf="@+id/button3"
    app:layout_constraintTop_toBottomOf="@+id/button1"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"/>

<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:layout_conversion_absoluteHeight="48dp"
    tools:layout_conversion_absoluteWidth="88dp"
    tools:layout_conversion_absoluteX="148dp"
    tools:layout_conversion_absoluteY="307dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button2"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"/>
</android.support.constraint.ConstraintLayout>

Solution 3

app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"

Comments

[Maciej Ciemięga]

Keep in mind that this first solution is a naive solution and not a valid one. It will only fool other developers, please do not propose it... the same goes with as the accepted answer. Only the second solution, which was described in more details in my answer is a correct approach to center the group of views in ConstraintLayout properly.

[Maciej Ciemięga]

In ConstraintLayout you should only use the chainStyle attribute, the other solution is really more like a hack to achieve "centering a group", that only appears to be solving problem from question. If there is a proper solution vs wrong one, why would anyone would ever want to use the incorrect one...? Chains are specifically designed to solve the "grouping" problem. Yet you still promote the incorrect solution as an accepted answer as well as a part of your answer. It will only fool other developers that will try to solve this problem in the future, this is really not nice.

[Lorne Laliberte]

Very nice example showing the difference between this and the naive solution.

[EpicPandaForce]

app:layout_constraintVertical_chainStyle="packed" which view does this property go on?

[JPM]

How come I don't have a Chain icon i'm using the latest studio too.

[Big McLargeHuge]

@JPM I believe in order to see the chain icon over the view in the editor, a constraint has to exist between both elements already. e.g., when stacking them vertically, the top one needs an app:layout_constraintBottom_toTopOf="@id/view2" attritbute and the bottom one needs app:layout_constraintTop_toBottomOf="@id/view1". You can add these with the visual editor instead of in the XML. Alternatively you can select multiple views in the view heirarchy, right click and add the chain there.

[Jeffrey Blattman]

What an intuitive, natural method of centering.

[Karthik]

If I set the visibility of last view to View.GONE at runtime, chains are no more centered. Any idea how to fix this?

[Maciej Ciemięga]

@Karthik Are they correctly centered if you make it GONE not in runtime, but in xml file?