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.

Maciej Ciemięga · Accepted Answer · 2017-03-30T21:03:57.400

54

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:

edited Mar 30 '17 at 21:03

answered Mar 30 '17 at 20:42

Maciej Ciemięga

10,125
1
41
48

1

Very nice example showing the difference between this and the naive solution. – Lorne Laliberte Apr 07 '17 at 00:00
1

`app:layout_constraintVertical_chainStyle="packed"` which view does this property go on? – EpicPandaForce Apr 11 '18 at 14:19
1

How come I don't have a Chain icon i'm using the latest studio too. – JPM Aug 20 '18 at 21:58
@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. – Big McLargeHuge Apr 09 '19 at 14:54
What an intuitive, natural method of centering. – Jeffrey Blattman Jun 17 '19 at 18:45
If I set the `visibility` of last view to `View.GONE` at runtime, chains are no more centered. Any idea how to fix this? – Karthik Aug 12 '20 at 07:58
@Karthik Are they correctly centered if you make it `GONE` not in runtime, but in xml file? – Maciej Ciemięga Aug 12 '20 at 12:37
1

@EpicPandaForce I didn't get the icons to show but I was able to do the same thing by selecting the elements, right-clicking one and going to Chains > Create Vertical Chain, then right-clicking again and choosing Vertical Chain Style > Packed – dw1 Aug 07 '23 at 10:35

Darish · Answer 2 · 2017-03-31T07:31:24.710

By Android Studio's 'Layout Editor'

drag and drop three buttons into the Android Studio's 'Layout Editor'
Select those buttons together by dragging mouse
Pack them vertically using the 'pack' button in 'Layout Editor'
Align them center horizontally using 'Align-Center horizontally' button
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>

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, Mar 30 '17 at 21:31
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. — Maciej Ciemięga, Mar 30 '17 at 22:03

score 1 · Answer 3 · edited Sep 04 '17 at 20:03

1

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

edited Sep 04 '17 at 20:03

Floern

33,559
24
104
119

answered Sep 04 '17 at 07:11

dong sheng

266
3
10

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

3 Answers3

Proper solution

Naive solution

By Android Studio's 'Layout Editor'

By xml