Develop Reference

How to fix equal spacing in a horizontal ConstraintLayout?

I am having trouble using a ConstraintLayout within a ConstraintLayout to equally space out 5 buttons at the bottom of my app. Currently, I am able to space all buttons equally except for the leftmost button:
shown here. I understand a LinearLayout would also function for this purpose, but I would like to use a ConstraintLayout if possible. My activity XML is shown below:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_alignParentBottom="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/linear1">
<ImageButton
android:id="#+id/back_arrow"
style="#style/Base.Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/back_arrow"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#id/forward_arrow"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintVertical_chainStyle="spread" />
<ImageButton
android:id="#+id/forward_arrow"
style="#style/Base.Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/forward_arrow"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#id/refresh"
app:layout_constraintStart_toEndOf="#id/back_arrow"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintVertical_chainStyle="spread" />
<ImageButton
android:id="#+id/refresh"
style="#style/Base.Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/refresh_icon"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#id/stop"
app:layout_constraintStart_toEndOf="#id/forward_arrow"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintVertical_chainStyle="spread" />
<ImageButton
android:id="#+id/stop"
style="#style/Base.Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/stop_icon"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#id/home"
app:layout_constraintStart_toEndOf="#id/refresh"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintVertical_chainStyle="spread" />
<ImageButton
android:id="#+id/home"
style="#style/Base.Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/home_icon"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/stop"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintVertical_chainStyle="spread" />
</androidx.constraintlayout.widget.ConstraintLayout>
<LinearLayout
android:id="#+id/linear1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:orientation="vertical"
android:weightSum="2"
app:layout_constraintBottom_toTopOf="#+id/layout2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme">
<RelativeLayout
android:id="#+id/url_go_progressbar_relLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/web_address_edit_text"
android:layout_width="200dp"
android:layout_height="48dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:layout_toLeftOf="#+id/go_button"
android:focusable="true"
android:focusableInTouchMode="true"
android:hint="Enter URL"
android:importantForAutofill="noExcludeDescendants"
android:inputType="textWebEditText"
android:textSize="13sp" />
<Button
android:id="#+id/go_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/web_address_edit_text"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginTop="4dp"
android:text="#string/go_button" />
<ProgressBar
android:id="#+id/progress_bar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/web_address_edit_text" />
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="#+id/swipe"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.4">
<WebView
android:id="#+id/web_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
</WebView>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I am new to Android Development so I don't have much experience, if there are any other bad practices you notice while looking at my XML, please let me know.
(Also if possible, I am interested in knowing if there is a way to make the navbar use a specific percent of the screen rather than a static dp as I have assigned it.)
Thank you!

I notice you're already using chains.
Hence, all you need to do is to change all your ImageButton's width to 0dp. This seems counter-intuitive but it will cause all buttons to match the constraints set, hence all buttons would have equal width.
e.g.
android:layout_width="wrap_content"
must be changed to
android:layout_width="0dp"
Thanks!

Here is your answer with more clarification using a ConstraintLayout
https://constraintlayout.com/basics/create_chains.html

use guidelines at equal distance and constraint your button to it you will need to add 3 vertical guidelines for equal spacing of your button
know more about it
https://developer.android.com/reference/androidx/constraintlayout/widget/Guideline
<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">
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
app:layout_constraintGuide_begin="100dp"
android:orientation="vertical"/>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button"
app:layout_constraintLeft_toLeftOf="#+id/guideline"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Convert children to proper way in parent constraint layout Android

Hey I am working in android Constraint layout. In my xml I used constraint layout with linear layout. I want to know is there in any way, I can use only constraint layout remove other children layout like linear layout.
item_layout.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="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:orientation="vertical">
<LinearLayout
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#drawable/item_selector_background"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
tools:text="25mg" />
<TextView
android:id="#+id/subtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="8dp"
tools:text="from $1.65" />
</LinearLayout>
<LinearLayout
android:id="#+id/tagContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/item_tag_background"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:visibility="visible">
<TextView
android:id="#+id/tagText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingStart="10dp"
android:paddingEnd="10dp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
My view look like this
I only want to achieve this through constraint layout.

There is definitely a way to do it. Something like this may work for you:
<ConstraintLayout>
<TextView
android:id="#+id/text
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="25mg" />
<TextView
android:id="#+id/subtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="8dp"
app:layout_constraintTop_toBottomOf="#id/text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#id/tagText"
tools:text="from $1.65" />
<TextView
android:id="#+id/tagText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingStart="10dp"
android:paddingEnd="10dp"
app:layout_constraintTop_toBottomOf="#id/subtext"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</ConstraintLayout>
Just pull the child layouts out and constrain the views the way that you want them.
Note: This is not exact. You may have to play with the constraints to get them the way you want it.

You can use View behind them to set background for the first two TextViews like,
<ConstraintLayout
...>
<View
android:id="#+id/backgroundView"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/item_selector_background"
app:layout_constraintTop_toTopOf="#id/text"
app:layout_constraintEnd_toEndOf="#id/subtext"
app:layout_constraintStart_toStartOf="#id/subtext"
app:layout_constraintBottom_toBottomOf="#id/subtext"/>
<TextView
android:id="#+id/text"
...
/>
<TextView
android:id="#+id/subtext"
...
/>
<TextView
android:id="#+id/tagText"
...
/>
...
</ConstraintLayout>
the height and width of the backgroundView can be constrained to match the first two TextViews

ConstraintLayout: Center two buttons horizontally

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?

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"

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:

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>

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>

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.

Issues with XML Layout and Software Buttons

So basically I have an activity with 4 buttons that in Android Studio look out of the way of the software buttons at the bottom of the screen but when I run it on my phone they are not. I'm not sure if I have the right constraints on the bottom button or not?
<?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:context=".NewMainMenu"
tools:layout_editor_absoluteY="25dp">
<Button
android:id="#+id/button"
android:layout_width="411dp"
android:layout_height="100dp"
android:layout_marginTop="258dp"
android:background="#android:color/holo_blue_light"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button4"
android:layout_width="411dp"
android:layout_height="100dp"
android:background="#android:color/holo_red_light"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button" />
<Button
android:id="#+id/button3"
android:layout_width="411dp"
android:layout_height="100dp"
android:background="#android:color/holo_green_light"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button4" />
<Button
android:id="#+id/button2"
android:layout_width="411dp"
android:layout_height="100dp"
android:background="#android:color/holo_orange_light"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button3" />
</android.support.constraint.ConstraintLayout>

if you use from ConstraintLayout, you can add this attribute:
app:layout_constraintBottom_toBottomOf="parent"
by this code, your view sticks on bottom of layout.
and for other views you can use from this code:
app:layout_constraintBottom_toBottomOf="#+id/{bottom View}"

The problem is that you are explicitly setting the button heights and the top button's top margin to fixed values. On your device, the total sum of all the heights and the padding exceed the height of the device.
An easy fix is to not constrain the top of the topmost button to the parent and remove the top margin. Then it will lay above the button below it but won't push down from the top of the parent.
Generally speaking, you should avoid fixed-size widths and height for this exact reason. You can leverage things like weighted chains in ConstraintLayout to size things proportionally instead of explicitly.
See the ConstraintLayout docs for more.
Hope that helps!

Your constraints are wrong. You have used both app:layout_constraintTop_toBottomOf and app:layout_constraintBottom_toTopOf constraints which is wrong. Use only app:layout_constraintBottom_toTopOf constraint to stack one above other.
Use this 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".NewMainMenu"
tools:layout_editor_absoluteY="25dp">
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="100dp"
android:background="#android:color/holo_blue_light"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.494"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="100dp"
android:background="#android:color/holo_red_light"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="100dp"
android:background="#android:color/holo_green_light"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="100dp"
android:background="#android:color/holo_orange_light"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>
</android.support.constraint.ConstraintLayout>

some codes is not right
please write below codes:
<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/button3"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#android:color/holo_green_light"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#android:color/holo_blue_light"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent" />
<Button
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#android:color/holo_orange_dark"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent" />

Android constraint layout divide in horizontal

I'm working with an Android project and I used ConstraintLayout.
I want to design the layout as two blocks which stay in horizontal line. Each block will get 50% of the width:
How can I do this with ConstraintLayout?

There are Two ways you can do this.
Using Chain Constraint
Using Guideline Constraint
1st : Using Chain Constraint
<?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/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
2nd : Using Guideline Constraint
<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"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="#id/guideline1"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintLeft_toLeftOf="#id/guideline1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="#+id/guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
</android.support.constraint.ConstraintLayout>
Output : Both gives same output.