Android ConstraintLayout : Three buttons equally distribute across the width

Question

I have a ConstraintLayout that contains 3 buttons horizontally. I want the 3 buttons to have a fixed width and be evenly distributed across the width of the layout.

score 80 · Accepted Answer · answered Oct 09 '17 at 07:01

80

Here is a visual example.

Select the views
Right click and choose Chain > Create Horizontal Chain

See also

ConstraintLayout: pack vs chain

answered Oct 09 '17 at 07:01

Suragch

484,302
314
1,365
1,393

3

This does not work if the buttons are different widths – gjsalot Nov 07 '17 at 17:45
Just to add to the answer, pls make sure to remove all the margins in the direction in which you want to create the chain. For e.g. if you want to create a vertical chain, then ensure that all the concerned views do not have top and bottom margins else the vertical chain option will not even appear. – Uncaught Exception Mar 04 '20 at 10:30

Linh · Answer 2 · 2018-10-19T06:46:41.717

To make 3 view equally distribute across the width just need to set constraint start/end of each view must define correct

Code

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintStart_toStartOf="parent"
        />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"
        app:layout_constraintEnd_toStartOf="@+id/button3"
        app:layout_constraintStart_toEndOf="@+id/button1"
        />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button2"
        />

</android.support.constraint.ConstraintLayout>

Output

MORE
If you need 3 views full width, just need to change android:layout_width="wrap_content" to android:layout_width="0dp"

Output

Does not work if you have more than 3 try it with six icons and the view is large and icons are small. — JPM, Jun 18 '21 at 19:47

score 2 · Answer 3 · answered Feb 26 '17 at 13:06

Try the below code

<?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:id="@+id/activity_main_inference"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_editor_absoluteX="0dp"
    app:layout_editor_absoluteY="80dp"
    tools:layout_editor_absoluteX="0dp"
    tools:layout_editor_absoluteY="80dp">


    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button7"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="16dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintLeft_creator="1" />

    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button8"
        app:layout_constraintTop_toTopOf="@+id/button7"
        tools:layout_constraintLeft_creator="1"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginStart="8dp"
        app:layout_constraintRight_toLeftOf="@+id/button7"
        android:layout_marginEnd="8dp" />

    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button9"
        app:layout_constraintBaseline_toBaselineOf="@+id/button7"
        tools:layout_constraintRight_creator="1"
        android:layout_marginEnd="7dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginStart="8dp"
        app:layout_constraintLeft_toRightOf="@+id/button7" />
</android.support.constraint.ConstraintLayout>

this one is the real answer from the question. – Android Enthusiast Jul 06 '17 at 19:34 — Android Enthusiast, Jul 06 '17 at 19:34

score 1 · Answer 4 · answered Feb 13 '17 at 14:25

Try this it works for me...

    <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/button_save"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/button_save_text"
    android:layout_marginStart="8dp"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="4dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/button_share"
    app:layout_constraintHorizontal_chainStyle="spread" />

<Button
    android:id="@+id/button_share"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/button_share_text"
    android:layout_marginStart="4dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintLeft_toRightOf="@+id/button_save"
    app:layout_constraintRight_toLeftOf="parent"
    app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

Please refer this link to know more about this http://stackoverflow.com/questions/37518745/evenly-spacing-views-using-constraintlayout — Prabha Karan, Feb 13 '17 at 14:26

score 1 · Answer 5 · edited Jun 27 '18 at 09:17

You can use guideline with the percentage tag please check below xml and replace with image or button anything you want

<android.support.constraint.ConstraintLayout
    android:id="@+id/layoutMyProperty"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_marginTop="@dimen/margin12"
    android:visibility="visible"
   >
    <android.support.constraint.Guideline
        app:layout_constraintGuide_percent="0.33"
        android:id="@+id/Guideline1"
        android:orientation="vertical"
        android:layout_width="1dp"
        android:layout_height="0dp"/>
    <android.support.constraint.Guideline
        app:layout_constraintGuide_percent="0.66"
        android:id="@+id/Guideline2"
        android:orientation="vertical"
        android:layout_width="1dp"
        android:layout_height="0dp"/>


    <ImageView
        android:id="@+id/myPropertyImage1"
        android:layout_width="0dp"
        android:layout_height="@dimen/homeImageH"
        android:scaleType="centerCrop"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="@+id/Guideline1"
        app:layout_constraintEnd_toStartOf="@+id/Guideline1"
        tools:src="@drawable/placeholder" />

    <ImageView
        android:id="@+id/myPropertyImage2"
        android:layout_width="0dp"
        android:layout_height="@dimen/homeImageH"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/Guideline1"
        app:layout_constraintRight_toLeftOf="@+id/Guideline2"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@drawable/placeholder" />

    <ImageView
        android:id="@+id/myPropertyImage3"
        android:layout_width="0dp"
        android:layout_height="@dimen/homeImageH"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/Guideline2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@drawable/placeholder" />

</android.support.constraint.ConstraintLayout>

What if i need all button of different width then? – AMIT Sep 16 '22 at 17:41 — AMIT, Sep 16 '22 at 17:41

score 1 · Answer 6 · answered Jan 09 '20 at 12:33

1

Just set android:layout_width="wrap_content" to android:layout_width="0dp" in all the 3 buttons

answered Jan 09 '20 at 12:33

Nadeem Shaikh

1,160
9
17

Lovekush Vishwakarma · Answer 7 · 2018-04-30T17:32:53.553

try to use this.

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

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        tools:layout_editor_absoluteX="148dp"
        tools:layout_editor_absoluteY="92dp" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="44dp"
        android:layout_marginStart="8dp"
        android:text="Button"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="92dp" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button2"
        tools:layout_editor_absoluteY="92dp" />
</android.support.constraint.ConstraintLayout>

i know the solution using linear layout. Can you help me using constraint layout ?? — Atif Amin, Feb 13 '17 at 13:48

Android ConstraintLayout : Three buttons equally distribute across the width

7 Answers7

Linked