Develop Reference

How can I make a ScrollView fill the rest of its parent's remaining space?

I have two TextViews and a ScrollView nested in a ConstraintLayout. Inside the ScrollView there is a TableLayout. The ScrollView's left, right and bottom constraints are set to "parent". The top constraint is set to the TextView just before it. Here is the XML:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textSize="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView6">
<TableLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
android:layout_marginBottom="32dp"
android:gravity="center"
android:stretchColumns="0,1,2,3,4">
<TableRow
android:layout_width="fill_parent"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="1" />
... 4 more TextViews
</TableRow>
... many more TableRows
</TableLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
The problem is that the ScrollView's width does not match its constraints. Instead, when more rows are added such that the ScrollView is taller than the its parent's remaining height, it overlaps the TextView just before it. The two screenshots below illustrate the problem:
No overlap:
Overlap:
When I set the ScrollView height to "0dp" (match constraints) it renders literally as 0dp (The ScrollView shrinks and none of its contents are shown).
What should I change to make the ScrollView expand and fill the remaining height of its parent container?

I would suggest several points (I couldn't figure out which one is critical):
1. You shouldn't use match_parent for child views of a ConstraintLayout. Instead, use '0dp'.
Official training:
Note: You cannot use match_parent for any view in a ConstraintLayout. Instead use "match constraints" (0dp).
2. You should not use #+id/xxx but use #id/xxx to specify other views. The former is for creating a new id.
Change ConstraintLayout's layout_height to match_parent.
Change TableLayout's layout_height to wrap_content.
My result:
layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textSize="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/textView2" />
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/textView6">
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
android:layout_marginBottom="32dp"
android:gravity="center"
android:stretchColumns="0,1,2,3,4">
<TableRow
android:layout_width="fill_parent"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="1" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="2" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="3" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="4" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="5" />
</TableRow>
<!-- plenty of TableRows... -->
</TableLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>

You need to correctly constrain your widgets for ConstraintLayout to be able to correctly measure and laid out your views.
In short:
The Top TextView needs to be the head of the vertical chain (app:layout_constraintVertical_chainStyle="packed"), and must have a bottom constraint (bottom_to_Topof...):
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:text="TextView"
app:layout_constrainedHeight="true"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/textView6" />
The textView is constrainedHeight = true because you want it to wrap_content, and widgets that have text, can have some problems when wrapped in constraint layouts (see this other answer for more info about why that may be needed).
The Second TextView, needs to be pinned as well to some bottom, in this case the scrollView...
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constrainedHeight="true"
android:text="TextView"
android:textSize="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2"
app:layout_constraintBottom_toTopOf="#id/scrollView" />
Now they are chained together, but the ScrollView needs some action...
Simply pin the scrollview to the bottom, so it can pull from somewhere, and give it the 0dp you need, so it can calculate its size/position based on the constrains.
<ScrollView
android:id="#+id/scrollView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView6">
(also give it a name/id...)
This causes CL to calculate space/sizing correctly and to avoid the overlaps you complain about, since it now has clear rules about what can go where.
When you omit a constrain (like bottom), especially when there are stupid widgets around like ScrollViews, you can have unpredictable behavior based on the contents, something that is hard to anticipate and fix. Always, when in doubt, try to give all widgets all the constrains you can.

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

How to place views vertically or horizontally in ConstraintLayout?

Here is the Constraintlayout with 3 views:
<?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">
<ImageView
android:id="#+id/iv_profile_image"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintBottom_toTopOf="#+id/tv_name"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/iv_profile_image" />
<TextView
android:id="#+id/tv_headline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/tv_name" />
</android.support.constraint.ConstraintLayout>
The result:
As you can see, there is a big gap between each view. How can I remove those gaps and have them centered on the screen. I can achieve this easily using RelativeLayout or LinearLayout, but how can I do it in this ConstraintLayout? Is ConstraintLayout suppose to be a replacement for RelativeLayout?

When a view has two opposing constraints, ConstraintLayout will center the view between those constraints. This is what is happening in your layout.
If you want the views stacked one on top of another in the center of the screen, one way to do it is to used a packed chain.
Here is your layout using a vertical packed chain:
Here is the XML. Notice how the views are vertically constrained.
<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">
<ImageView
android:id="#+id/iv_profile_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toTopOf="#+id/tv_name"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tv_name"
app:layout_constraintBottom_toTopOf="#+id/tv_headline"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/iv_profile_image" />
<TextView
android:id="#+id/tv_headline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tv_headline"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_name" />
</android.support.constraint.ConstraintLayout>

ConstraintLayouts are said to give a flatter view hierarchy and better performance than normal RelativeLayouts.
I see some things that might cause wierd behaviour. For example in this view:
<TextView
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/iv_profile_image" />
You say that the top of this view should be aligned with the top of the #+id/iv_profile_image-view. Are you sure you don't mean that the top of this view should be aligned with the bottom of the #+id/iv_profile_image-view? And so on for the other views...

Try this it was helpful for you
we,ve to used all four constraints like left,right,top and bottom
you can implement like this also
I don'nt think you always prefer Drag and Drop you may go with the programmatic approarch also
<?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">
<ImageView
android:id="#+id/iv_profile_image"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintBottom_toTopOf="#+id/tv_name"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
app:layout_constraintTop_toBottomOf="#+id/iv_profile_image"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#+id/tv_headline" />
<TextView
android:id="#+id/tv_headline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_name" />
</android.support.constraint.ConstraintLayout>
Happy to help you

Constraint Layout display another screen on preview and on practice

I use the follow code to display buttons and ViewPager. I want to display ViewPager above of buttons but that it have wrap_content height and width.
<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/linearLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/transparent_hd_image_scrim">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<LinearLayout
android:id="#+id/buttons_bottom_layout"
android:layout_width="0dp"
android:layout_height="#dimen/hd_preview_buttons_height"
android:layout_marginEnd="#dimen/basic_keyline"
android:layout_marginRight="#dimen/basic_keyline"
android:orientation="horizontal"
android:layout_marginBottom="16dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/view_pager"
app:layout_constraintBottom_toBottomOf="parent">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:visibility="invisible" />
<View
android:id="#+id/stubBottom"
android:layout_width="#dimen/basic_keyline"
android:layout_height="wrap_content" />
<Button
android:id="#+id/send_button"
style="#style/HDPreviewButtonStyle"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/colorAccent"
android:text="#string/send"
android:textAllCaps="true" />
</LinearLayout>
What I see on preview.
But on practice on emulator I get this screen.
What I do incorrect?

From the XML code you posted there are several issues that ConstraintLayout might have problem with.
Also ConstraintLayout can help you with nesting layout, which you also mentioned in comments you want to avoid.
I am not sure you want the view pager to behave as wrap rather than match it's constraints.
I created what I think is what you want using what ConstraintLayout has to offer to ease pain of previous layouts.
<android.support.constraint.ConstraintLayout android:id="#+id/linearLayout"
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/transparent_hd_image_scrim">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/barrier"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/send_button"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view_pager" />
<Button
android:id="#+id/send_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="8dp"
android:background="#color/colorAccent"
android:textAllCaps="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/view_pager"
tools:text="Send" />
<android.support.constraint.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="top"
app:constraint_referenced_ids="send_button, button"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
Bottom buttons are chained horizontally together - this is basically replacement of the previous LinearLayout and the weight usage.
Also added barrier for height of the bottom buttons - this will make sure the height of the view pager will always accomodate to the height of any of them.
If you will actually want to the view pager to have wrap content add these
app:layout_constraintWidth_max="wrap"
app:layout_constraintHeight_max="wrap"

How to fill the screen with two view in ConstraintLayout?

I'm trying to put a Button at the top of the screen and under it an ImageView which need to fill the screen (all screen sizes).
In RelativeLayout it's seems to be easy to do, but in the ConstraintLayout I don't succeed to get it done.
Here is an example of what it's look like in RelativeLayout:
and the XML Code:
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Download Image"
android:id="#+id/button"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:onClick="downloadImage" />
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/imageView"
android:layout_below="#+id/button"
android:layout_alignParentStart="true" />
Thanks for your help,
Shay.

Maybe I've not understod your question completely but this is what I did to recreate the image you gave as example:
<?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="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView27"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.59"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button2"
app:srcCompat="#drawable/common_google_signin_btn_icon_dark" />
</android.support.constraint.ConstraintLayout>
and the result:

Actually fill_parent property is deprecated. so use 0dp to fill available space of the ConstraintLayout
For your question use following code to show Button at the top of the screen and under it an ImageView which will definitely fill the screen (for all screen sizes).
<?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:onClick="downloadImage"
android:text="Download Image"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button" />
</android.support.constraint.ConstraintLayout>
Note: If you want to add margin/padding then apply to the layout or any view as per your requirement. but when you are adding any margin to the view inside to the ConstraintLayout, that view need to have Constraint for that particulate side.

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Download Image"
android:id="#+id/button"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:onClick="downloadImage"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/imageView"
android:layout_below="#+id/button"
android:layout_alignParentStart="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button"
app:layout_constraintBottom_toBottomOf="parent"/>
Button needs to have left, right and top constraints with parent.
And ImageView needs to have left, right , bottom constraints with parent and top constraint with button's bottom.