Develop Reference

Create layout using only constraint layout and text view

I am new to android and constraint layout, can you please help me create this layout using only Constraint Layout and Text Views? Don't bother with text/color, just the layout itself.
This is what I have so far, layout seems ok but not quite like in the picture. I don't know if just the different resolution or aspect ratio.
<?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">
<TextView
android:id="#+id/textView45"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#color/blackk"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView49"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView47"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#color/teal_200"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView46"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView45" />
<TextView
android:id="#+id/textView46"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#android:color/darker_gray"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView50" />
<TextView
android:id="#+id/textView48"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#color/Accent"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView46"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView45" />
<TextView
android:id="#+id/textView49"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#android:color/holo_green_dark"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView50"
app:layout_constraintEnd_toStartOf="#+id/textView48"
app:layout_constraintStart_toEndOf="#+id/textView47"
app:layout_constraintTop_toBottomOf="#+id/textView45" />
<TextView
android:id="#+id/textView50"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#android:color/holo_green_light"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView46"
app:layout_constraintEnd_toStartOf="#+id/textView48"
app:layout_constraintStart_toEndOf="#+id/textView47"
app:layout_constraintTop_toBottomOf="#+id/textView49" />
</androidx.constraintlayout.widget.ConstraintLayout>

Did some modifications in the margins of these two. Now, the layout is looking similar to the one in the image you showed:
<TextView
android:id="#+id/textView49"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:background="#android:color/holo_green_dark"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView50"
app:layout_constraintEnd_toStartOf="#+id/textView48"
app:layout_constraintStart_toEndOf="#+id/textView47"
app:layout_constraintTop_toBottomOf="#+id/textView45" />
<TextView
android:id="#+id/textView50"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:background="#android:color/holo_green_light"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView46"
app:layout_constraintEnd_toStartOf="#+id/textView48"
app:layout_constraintStart_toEndOf="#+id/textView47"
app:layout_constraintTop_toBottomOf="#+id/textView49" />
You can further increase the margins but that's upto you.
Edit: I would suggest you playing with layout_constraintHeight_percent attribute to solve those height irregularities.

How can I align Text next to an Image Button inside a vertical Scrollview

I want to align some text next to an Imagebutton inside of a vertically oriented Scrollview, but I am out of ideas.
This is an App for my Grandma, to help her understand her phone and the Symbols better.
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageButton
android:id="#+id/Button1"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/SrcBtn1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingTop="20dp"
android:text="Button 1"
android:textSize="40dp"/>
</LinearLayout>
</ScrollView>
I can't manage to get the Text next to the Imagebutton

<ScrollView android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:id="#+id/Button1"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/ic_menu_gallery"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingTop="20dp"
android:text="Button 1"
android:textSize="40dp"/>
</LinearLayout>
</LinearLayout>

I would suggest to replace LinearLayout with RelativeLayout which is made just for this!
here are all of its attributes:
link
look for the LEFT_OF and RIGHT_OF attributes.

You Can use ConstraintLayout to make this layout super fast.
Here us an example layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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/scrollView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layoutDirection="ltr"
android:orientation="vertical">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="some text"
app:layout_constraintBottom_toTopOf="#+id/button5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="200dp"
android:text="some text"
app:layout_constraintBottom_toTopOf="#+id/button7"
app:layout_constraintEnd_toEndOf="#+id/button6"
app:layout_constraintHeight_percent=".2"
app:layout_constraintStart_toStartOf="#+id/button6"
app:layout_constraintTop_toBottomOf="#+id/button6" />
<Button
android:id="#+id/button7"
android:layout_width="0dp"
android:layout_height="200dp"
android:text="some text"
app:layout_constraintBottom_toTopOf="#+id/button8"
app:layout_constraintEnd_toEndOf="#+id/button6"
app:layout_constraintHeight_percent=".2"
app:layout_constraintStart_toStartOf="#+id/button6"
app:layout_constraintTop_toBottomOf="#+id/button5" />
<Button
android:id="#+id/button8"
android:layout_width="0dp"
android:layout_height="200dp"
android:text="some text"
app:layout_constraintEnd_toEndOf="#+id/button6"
app:layout_constraintHeight_percent=".2"
app:layout_constraintStart_toStartOf="#+id/button6"
app:layout_constraintTop_toBottomOf="#+id/button7" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="20dp"
app:layout_constraintGuide_percent=".5" />
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/button5"
app:layout_constraintEnd_toStartOf="#+id/button6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button6"
android:src="#drawable/ic_launcher_background" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button8"
android:src="#drawable/wolverine"/>
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/button8"
app:layout_constraintEnd_toStartOf="#+id/button7"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button7"
app:layout_constraintVertical_bias="1.0"
android:src="#drawable/shadow" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/button7"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button5"
android:src="#drawable/rose" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
It will look like this:
This will work for your Grandmas phone, but please notice that If you want to make a responsive layout using ConstraintLayout you will have to avoid using fixed sizes on your views and that's because different phones got different screen size so using fixed size value will not look the same on all devices.
You can use ConstraintLayout with guidelines and Chains to support different screen sizes.

To align some text next to an Imagebutton inside of a vertically oriented Scrollview. we can use linear layout with horizontal orientation
Like This
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:id="#+id/Button1"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/srcbtn1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingTop="20dp"
android:text="Button 1"
android:textSize="40dp" />
</LinearLayout>
</LinearLayout>
</ScrollView>

converting linear layout to constraint layout results in view too left

I had this nested linear layouts
<LinearLayout
android:id="#+id/has_selected_account"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/account_menu_header_signed_in_vertical_margin"
android:layout_marginBottom="#dimen/account_menu_header_signed_in_vertical_margin"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/close_and_recents"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.myImage
android:id="#+id/account_avatar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/account_menu_header_signed_in_avatar_margin_start"
android:layout_marginEnd="#dimen/account_menu_header_signed_in_avatar_margin_end"
android:layout_marginLeft="#dimen/account_menu_header_signed_in_avatar_margin_start"
android:layout_marginRight="#dimen/account_menu_header_signed_in_avatar_margin_end"
android:contentDescription="#null"
app:imageViewSize="#dimen/account_menu_header_signed_in_disc_size"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="#dimen/account_menu_name_and_display_vertical_padding"
android:paddingBottom="#dimen/account_menu_name_and_display_vertical_padding"
android:orientation="vertical">
<TextView
android:id="#+id/account_display_name"
style="#style/AccountDataDisplayName"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical"
tools:text="DisplayNameIsLongSoItShouldBeTruncatedAtSomePoint"/>
<TextView
android:id="#+id/account_name"
style="#style/AccountDataAccountName"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical|start"
android:includeFontPadding="false"
tools:text="emailisverylongaswellwewantittogettruncated#gmail.longdomain.com"/>
</LinearLayout>
</LinearLayout>
and i wanted to convert it to one constraint layout:
<merge>
<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/has_selected_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/google_blue100">
<com.myView
android:id="#+id/account_avatar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/account_menu_header_signed_in_avatar_margin_start"
android:layout_marginEnd="#dimen/account_menu_header_signed_in_avatar_margin_end"
android:layout_marginLeft="#dimen/account_menu_header_signed_in_avatar_margin_start"
android:layout_marginRight="#dimen/account_menu_header_signed_in_avatar_margin_end"
android:contentDescription="#null"
app:imageViewSize="#dimen/account_menu_header_signed_in_disc_size"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<View
android:id="#+id/account_display_name_top_padding"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="#dimen/account_menu_name_and_display_vertical_padding"
android:background="#color/google_red50"
app:layout_constraintBottom_toTopOf="#id/account_display_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/account_avatar"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/account_display_name"
style="#style/AccountDataDisplayName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/google_red100"
android:gravity="center_vertical"
android:includeFontPadding="false"
app:layout_constraintBottom_toTopOf="#+id/account_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="#+id/account_avatar"
app:layout_constraintTop_toTopOf="#+id/account_display_name_top_padding"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintWidth_default="wrap"
tools:text="DisplayNameIssLongSoItShouldBeTruncatedAtSomePoint"/>
<TextView
android:id="#+id/account_name"
style="#style/AccountDataAccountName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/google_green100"
android:gravity="center_vertical"
android:includeFontPadding="false"
app:layout_constraintBottom_toBottomOf="#+id/account_name_bottom_padding"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="#+id/account_avatar"
app:layout_constraintTop_toBottomOf="#+id/account_display_name"
app:layout_constraintWidth_default="wrap"
tools:text="emailisverylongaswellwewantittogettruncated#gmail.longdomain.com"/>
<View
android:id="#+id/account_name_bottom_padding"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="#dimen/account_menu_name_and_display_vertical_padding"
android:background="#color/google_red50"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/account_avatar"
app:layout_constraintTop_toBottomOf="#id/account_name"/>
</android.support.constraint.ConstraintLayout>
</merge>
The result was almost OK, but the textViews are going too up and too close to the Image view.
here is the new result overlapping the old ui:
Does anyone have an idea why? or how to solve this?
I have added margin left to the imageView but it didn't seem to change anything.

Try building a more parallel structure between the TextViews in the LinearLayout and the ones in the ConstraintLayout something like the following. Here I have used a FrameLayout to show the overlay better and took some liberties with sizes, but the concept holds for your layout. As you can see from the image, the TextViews line up precisely except for the final character which is different between the two sets of TextViews to give a visual of the overlay.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="250dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="16dp"
android:paddingBottom="16dp">
<TextView
android:id="#+id/account_display_name"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="DisplayName1" />
<TextView
android:id="#+id/account_name"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:layout_weight="1"
android:gravity="center_vertical|start"
android:includeFontPadding="false"
android:text="emailisvery1" />
</LinearLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="500dp"
android:layout_height="match_parent">
<TextView
android:id="#+id/account_display_name2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:gravity="center_vertical"
android:paddingTop="16dp"
android:text="DisplayName2"
app:layout_constraintBottom_toTopOf="#id/account_name2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_weight="1" />
<TextView
android:id="#+id/account_name2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:gravity="center_vertical|start"
android:includeFontPadding="false"
android:paddingBottom="16dp"
android:text="emailisvery2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/account_display_name2"
app:layout_constraintVertical_weight="1" />
</android.support.constraint.ConstraintLayout>
</FrameLayout>t>

ConstraintLayout button in centre and size as 1/3 of ViewPager

I'm using the ConstraintLayout and I want to display button in the centre of ViewPager but with width and height of 1/3 of this pager.I used horizontal and vertical chain. And got the next:
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="96dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="96dp"
app:layout_constraintBottom_toTopOf="#+id/send_button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="#id/view_pager"
app:layout_constraintRight_toLeftOf="#+id/button2" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintVertical_weight="1"
app:layout_constraintBottom_toBottomOf="#id/view_pager"
app:layout_constraintTop_toBottomOf="#id/button2"/>
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintVertical_weight="1"
app:layout_constraintTop_toTopOf="#id/view_pager"
app:layout_constraintBottom_toTopOf="#id/button2"/>
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintVertical_weight="1"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintTop_toBottomOf="#id/button4"
app:layout_constraintBottom_toTopOf="#id/button5"
app:layout_constraintLeft_toRightOf="#+id/button1"
app:layout_constraintRight_toLeftOf="#+id/button3" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="#+id/button2"
app:layout_constraintRight_toRightOf="#id/view_pager" />
<android.support.constraint.Guideline
android:id="#+id/vertical_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<Button
android:id="#+id/send_button"
android:layout_width="0dp"
android:layout_height="56dp"
android:layout_marginBottom="#dimen/basic_keyline"
android:layout_marginEnd="#dimen/basic_keyline"
android:layout_marginLeft="8dp"
android:layout_marginRight="#dimen/basic_keyline"
android:layout_marginStart="8dp"
android:background="#color/colorAccent"
android:text="#string/send"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/vertical_guideline"
app:layout_constraintRight_toRightOf="parent" />
But I think this approach is so scary. Maybe somebody know better solution, please help me. I want to use only xml without using the code.
UPDATE
Buttons were added to easy understand what I want.

Here's what you can do without adding so many buttons and also without guidelines.
Here's the 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"
android:fitsSystemWindows="true"
android:orientation="vertical"
android:id="#+id/apbLay1"
tools:context="studios.brilliant.com.commutech.Home">
<android.support.constraint.ConstraintLayout
android:layout_marginBottom="152dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="96dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_height="0dp"
android:layout_width="0dp"
>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<Button
android:id="#+id/button2"
android:layout_width="0dp"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent=".333"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".333"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
This will give you the exact output you need and you're getting as in the screenshot provided.
.333 is 33.3% of the parent which is almost equal to 1/3.
That extra layout is to add a container for the viewpager and button as using viewpager as the container can cause the button to hide when the fragment will be visible.

You can insert a ConstraintLayout into your PageViewer so that you can use GuideLines to constraint the Button.
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="96dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="96dp"
app:layout_constraintBottom_toTopOf="#+id/send_button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.constraint.Guideline
android:id="#+id/left_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.33" />
<android.support.constraint.Guideline
android:id="#+id/right_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.67" />
<android.support.constraint.Guideline
android:id="#+id/top_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.33" />
<android.support.constraint.Guideline
android:id="#+id/bottom_guideline"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.67" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintTop_toBottomOf="#id/top_guideline"
app:layout_constraintBottom_toTopOf="#id/bottom_guideline"
app:layout_constraintLeft_toRightOf="#+id/left_guideline"
app:layout_constraintRight_toLeftOf="#+id/right_guideline" />
</android.support.constraint.ConstraintLayout>

Android ConstraintLayout : Three buttons equally distribute across the width

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.

Here is a visual example.
Select the views
Right click and choose Chain > Create Horizontal Chain
See also
ConstraintLayout: pack vs chain

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

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>

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>

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>

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

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>