ConstraintLayout: Center two buttons horizontally

Question

Although it seems simple I couldn't make it, I would like the two buttons to touch each other from their sides and to be centered horizontally, like so:

I tried the answers in this thread: Center two buttons horizontally, but it only relates to RelativeLayout and not ContrainstLayout

I also tried to play with

app:layout_constraintHorizontal_chainStyle="spread"

But no success. My not-helpful xml:

<?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"
    android:background="@color/colorBackground"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        style="@style/btnStyle"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:background="@color/btnTrue"
        android:text="Button"
        android:textColor="#ffffff"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button2"
        style="@style/btnStyle"
        android:layout_height="wrap_content"
        android:layout_marginEnd="56dp"
        android:background="@color/btnFalse"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        tools:layout_editor_absoluteY="0dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

Is this possible to achieve with ConstraintLayout?

add the buttons in a horrizontal linearlayout and center the container on the screen. — Daniel, Nov 19 '19 at 08:55

score 22 · Accepted Answer · answered Nov 19 '19 at 08:58

This should do a job.

<androidx.constraintlayout.widget.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"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintEnd_toStartOf="@+id/button2"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_chainStyle="packed" />

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

</androidx.constraintlayout.widget.ConstraintLayout>

Key is removing not needed parameters and use

 app:layout_constraintHorizontal_chainStyle="packed"

score 6 · Answer 2 · answered Nov 19 '19 at 08:57

You have to create a horizontal chain for both buttons with chain style packed

Here is a sample

<?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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#000"
        android:text="Button"
        android:textColor="#ffffff"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHorizontal_chainStyle="packed"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ad11"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Output:

Eguti · Answer 3 · 2019-11-19T09:20:59.260

You can do it putting the buttons inside a horizontal LinearLayout

<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"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="@color/colorPrimary"
            android:text="Button"
            android:textColor="#ffffff" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="@color/colorAccent"
            android:text="Button" />
    </LinearLayout>


</androidx.constraintlayout.widget.ConstraintLayout>

enter image description here

This is much simpler. How can you set the width of the spacing between the components to 0? — A.W., Oct 28 '20 at 10:43
@August In this case, I was using the default style of a button, so,the there's some padding that you cant avoid with it (or I think so). The best way is creating a new button style where you can define the padding. Take a look about how to create a new style here: https://stackoverflow.com/questions/18507351/how-to-create-custom-button-in-android-using-xml-styles — Eguti, Oct 28 '20 at 11:04

score 2 · Answer 4 · answered Nov 19 '19 at 11:43

Try using "guidelines":

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/green"
    android:text="Button"
    app:layout_constraintEnd_toStartOf="@+id/guideline"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:color/holo_red_dark"
    android:text="Button"
    app:layout_constraintStart_toStartOf="@+id/guideline"
    app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

score 0 · Answer 5 · answered Nov 19 '19 at 08:55

0

For such construct your views width needs to be 0dp. Also for button2, make sure it is from button1 and till parent's end horizontally. You have not shown your style so there may be other issues.

answered Nov 19 '19 at 08:55

ror

3,295
1
19
27

ConstraintLayout: Center two buttons horizontally

5 Answers5