Develop Reference

android - button is making the page background change to gray

Solved
I have a scroll view that has a Constraint Layout layout inside of it. I Have a button that is constraint to the bottom of the table but it seems to change the background below the table to gray. all other widgets that I have added do not have the same problem.
Screenshot of problem
I removed the inner code of the table as its not need
<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:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/gaapic" />
<androidx.cardview.widget.CardView
android:id="#+id/homecard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="5dp"
app:cardBackgroundColor="#color/white"
app:cardCornerRadius="15dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.8"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="12dp"
android:padding="12dp"
android:text="#string/recent_news"
android:textColor="#color/black"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/tvhomePageDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="9"
android:gravity="center"
android:text="#string/publish_date"
android:textColor="#color/black"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:lineSpacingMultiplier="1.5"
android:padding="12dp"
android:text="#string/in_news"
android:textSize="13sp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<TableLayout
android:id="#+id/tableLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="#android:color/white"
android:elevation="90dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/homecard">
<!-- Table Heading -->
<TableRow android:background="#color/teal_200">
</TableLayout>
<TextView
android:id="#+id/tvTimeCheck"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.092"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tableLayout"
app:layout_constraintVertical_bias="0.589" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Live"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tableLayout"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

Try adding the following to either your ScrollView or ConstraintLayout:
android:background="#android:color/white"

Solved:
I solved my problem by putting the table inside of another Constraint Layout. I don't know if that is best practice but it works for now. Thank you #Shn_Android_Dev

Have you tryed to add .setBackgroundDrawable(null) to you button inside your class?
Example:
yourButton.setBackgroundDrawable(null);

Why my layout look like this ? Here is my XML file

Here Is my
and XML code first i use a Linear Layout then card View and other views so why my view overwrite where is the problem please watch the AVD picture and tell me where is the error.Sorry for bad english.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/item_linerLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardElevation="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<TextView
android:id="#+id/item_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="36sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
app:layout_constraintStart_toEndOf="#+id/item_id"
app:layout_constraintTop_toTopOf="#+id/item_id" />
<TextView
android:id="#+id/item_AuthorName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Author"
app:layout_constraintStart_toStartOf="#+id/item_title"
app:layout_constraintTop_toBottomOf="#+id/item_title" />
<TextView
android:id="#+id/item_pages"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="3dp"
android:text="100"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>

Try to use android:fitsSystemWindows="true" in your root layout(In your case LinearLayout). I recommend you to read this article to understand system overlapping. I hope it helps)

I have removed redundant LinearLayout parent and made CardView parent. Also your TextView with id item_pages is not overlapping.
<androidx.cardview.widget.CardView
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="wrap_content"
android:layout_margin="5dp"
app:cardElevation="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<TextView
android:id="#+id/item_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="36sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Title"
app:layout_constraintBottom_toTopOf="#id/item_AuthorName"
app:layout_constraintStart_toEndOf="#+id/item_id" />
<TextView
android:id="#+id/item_AuthorName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:text="Author"
app:layout_constraintBottom_toBottomOf="#id/item_id"
app:layout_constraintStart_toStartOf="#+id/item_title" />
<TextView
android:id="#+id/item_pages"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="3dp"
android:text="100"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

Can I put a Button to bottom of a ConstraintLayout inside ScrollView?

I have a ScrollView contains a ConstraintLayout. Inside the ConstraintLayout, I put many views with an attribute layout_constraintTop_toBottomOf to make a relation between the view and the view top of it, and I used layout_marginTop to put spaces between the views.
In my design, I have a Button that should be in the bottom of the layout and it cannot happen with the layout_marginTop because it should have a relation with the bottom of the ConstraintLayout.
Here's my code:
<ScrollView 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">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp">
<TextView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="120dp"
android:text="Logo"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/un_et"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="28dp"
android:layout_marginTop="25dp"
android:layout_marginRight="28dp"
android:gravity="center"
android:hint="User name"
android:textColor="#bebebe"
android:textCursorDrawable="#null"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/logo" />
<EditText
android:id="#+id/pw_et"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="28dp"
android:layout_marginTop="13dp"
android:layout_marginRight="28dp"
android:gravity="center"
android:hint="Password"
android:inputType="textPassword"
android:textColor="#bebebe"
android:textCursorDrawable="#null"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/un_et" />
<RelativeLayout
android:id="#+id/save_pw"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:paddingLeft="28dp"
android:paddingRight="28dp"
app:layout_constraintTop_toBottomOf="#id/pw_et">
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:buttonTint="#bebebe"
android:text="Save account"
android:textColor="#bebebe" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="Forget password?"
android:textColor="#a40000" />
</RelativeLayout>
<Button
android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="28dp"
android:layout_marginTop="17dp"
android:layout_marginRight="28dp"
android:text="Login"
android:textAllCaps="false"
android:textColor="#FFFFFF"
app:layout_constraintTop_toBottomOf="#id/save_pw" />
<Button
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="Sign up"
android:textAllCaps="false"
android:textColor="#FFFFFF"
app:layout_constraintTop_toBottomOf="#id/btn" />
</android.support.constraint.ConstraintLayout>
</ScrollView>

Replace ScrollView with NestedScrollView & also add android:fillViewport="true" like this
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
// rest of code
<Button
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="Sign up"
android:textAllCaps="false"
android:textColor="#FFFFFF"
app:layout_constraintVertical_bias="1"
app:layout_constraintTop_toBottomOf="#id/btn"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>

Just set this property to your button:
app:layout_constraintBottom_toBottomOf="parent"
Then add this to your last view this property:
app:layout_constraintBottom_toTopOf="#+id/button"
Also, add to your last view:
android:layout_marginBottom="height_of_button"
However, if you are adding a lot of views it would be better to populate them inside a RecyclerView using an Adapter. Decide what you want to do. Also, tell me if I understood your question correctly, it was a bit confusing.

I found one solution to keep the button at the bottom, doesn't matter is your text is dynamic, read about app:layout_constraintVertical_bias https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout#Bias
<?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">
<TextView
android:id="#+id/text_gallery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:textAlignment="center"
android:textSize="20sp"
android:text="Title"
app:layout_constraintTop_toTopOf="parent"/>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:fillViewport="true"
app:layout_constraintTop_toBottomOf="#id/text_gallery"
app:layout_constraintBottom_toBottomOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:isScrollContainer="true">
<androidx.appcompat.widget.AppCompatTextView
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/texto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text=" Text \n Text" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Buton1"
app:layout_constraintVertical_bias="1"
app:layout_constraintTop_toBottomOf="#+id/texto"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

RecyclerView Last Element Not Showing or getting cut off

For those who believe this is a duplicate question I have already consulted the current solutions available on stack overflow Such as:
Last Item in recyclerview is cut off
RecyclerView cutting off last item
However, no matter what I try I am unable to completely see, on in some cases see at all the last element. I have already checked my adapter to make sure the last item is being rendered.
Here are the screenshots and xml. Thanks
// This is the card view that I render using the adapter
<?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="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#drawable/card_border_background">
<ImageView
android:layout_width="100dp"
android:layout_height="90dp"
tools:srcCompat="#tools:sample/avatars"
android:id="#+id/collectionImage"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:text="collectionName"
android:layout_width="142dp"
android:layout_height="49dp"
android:id="#+id/collectionName"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#+id/collectionImage"
/>
<TextView
android:text="productName"
android:layout_width="141dp"
android:layout_height="35dp"
android:id="#+id/productName"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#+id/collectionImage" android:layout_marginTop="56dp"
/>
<TextView
android:layout_width="107dp"
android:layout_height="25dp"
android:id="#+id/productName2"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#+id/productName"
android:text="# available :"
/>
<TextView
android:layout_width="32dp"
android:layout_height="24dp"
android:id="#+id/numberOfInventoryItems"
android:text="123"
app:layout_constraintTop_toBottomOf="#+id/productName2" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"/>
</android.support.constraint.ConstraintLayout>
This is the main layout that contains the recylerview that is inside a
nested scrollview. Like I said I tried this solution by reading other threads.
<?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:id="#+id/main_constraint"
tools:context=".CollectionDetailsPage">
<android.support.constraint.ConstraintLayout
android:id="#+id/top_card"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
android:background="#drawable/card_border_background"
android:layout_marginTop="8dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/collection_image_card"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:srcCompat="#tools:sample/avatars"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription"/>
<TextView
android:id="#+id/collection_title_card"
android:text="Collection Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAlignment="center"
app:layout_constraintStart_toEndOf="#+id/collection_image_card"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="8dp"
android:textStyle="bold" android:textSize="18sp" android:textColor="#android:color/black"
tools:ignore="HardcodedText"/>
<TextView
android:id="#+id/collection_html_card"
android:text="sample body html"
android:layout_width="200dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#+id/collection_image_card"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
app:layout_constraintTop_toBottomOf="#+id/collection_title_card"
tools:ignore="HardcodedText"/>
</android.support.constraint.ConstraintLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
app:layout_constraintTop_toBottomOf="#+id/top_card"
android:id="#+id/nestedScrollView"
android:scrollbars="vertical" app:layout_constraintStart_toStartOf="parent"
>
<android.support.v7.widget.RecyclerView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/recyclerView_Collections_Data"
tools:ignore="MissingConstraints"/>
</android.support.v4.widget.NestedScrollView>
<TextView
android:text="Loading..."
android:layout_width="125dp"
android:layout_height="40dp"
android:id="#+id/loading_title"
android:textStyle="bold"
android:textColor="#color/colorPrimaryDark"
android:textSize="24sp"
android:layout_marginStart="16dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="12dp"
app:layout_constraintTop_toBottomOf="#+id/top_card"
tools:ignore="HardcodedText"/>
<View
android:layout_width="match_parent"
android:layout_height="25dp"
android:background="#color/colorPrimary"
android:id="#+id/view"
tools:ignore="MissingConstraints"
app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>

this obviously is because of:
<View
android:layout_width="match_parent"
android:layout_height="25dp"
android:background="#color/colorPrimary"
android:id="#+id/view"
tools:ignore="MissingConstraints"
app:layout_constraintBottom_toBottomOf="parent"/>
have you ever had a closer look at the first one CardView ??
android:fillViewport="true" and tools:ignore="MissingConstraints" look suspicious;
replace these ConstraintLayout with LinearLayoutCompat, because these are linear layouts.
that NestedScrollView just would need weight 1.00 and height 0dp, to fill the space.

Constraint layout with wrap_content clips it's content

Recently I've bumped into a strange ConstraintLayout behavior. What I tried to do was a simple layout with ImageView, Button and a TextView. Here's the code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#null"
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_marginTop="10dp"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:text="TEST TEXT"
android:paddingTop="20dp"
app:layout_constraintStart_toStartOf="#id/image"
app:layout_constraintTop_toBottomOf="#+id/button" />
<android.support.v4.widget.Space
android:id="#+id/marginSpacer"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="10dp"
app:layout_constraintBottom_toBottomOf="#id/image" />
<Button
android:id="#id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:background="#drawable/button_bg"
android:text="BUTTON"
app:layout_constraintTop_toBottomOf="#id/marginSpacer" />
</android.support.constraint.ConstraintLayout>
The ImageView content is loaded using Glide like this:
Glide.with(this).load("https://homepages.cae.wisc.edu/~ece533/images/monarch.png").into(imageView);
Here is how I wanted it to look like:
And here's what I actually got:
My intent was to make the text align relative to the button, not the image, how do I make this happen? Why did the ConstraintLayout clip itself to the ImageView? On the other hand, if I align the text relative to the image everything works great and nothing is clipped.
The full source is available here:
https://github.com/satorikomeiji/ConstraintLayoutBug

Use this for your Button:
#+id/button
instead of
android:id="#id/button"
You'll be able to design urself.
I would suggest you to add loading image:
.placeholder(R.drawable.ic_error_black_48px)
My Layout:
<?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/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteY="81dp">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#null" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="8dp"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:paddingTop="20dp"
android:text="TEST TEXT"
app:layout_constraintStart_toStartOf="#+id/ButtonLayout"
app:layout_constraintTop_toBottomOf="#+id/ButtonLayout" />
<android.support.constraint.ConstraintLayout
android:id="#+id/ButtonLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/image"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image">
<View
android:id="#+id/dummyView"
android:layout_width="match_parent"
android:layout_height="15dp" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:background="#drawable/button_bg"
android:text="BUTTON"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dummyView" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
Preview:

You need to align something to the bottom of the parent
Align TEST TEXT TextView bottom to the bottom of parent like this:
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:text="TEST TEXT"
android:paddingTop="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#id/image"
app:layout_constraintTop_toBottomOf="#+id/button" />
And add plus sign in button id
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:background="#drawable/button_bg"
android:text="BUTTON"
app:layout_constraintTop_toBottomOf="#id/marginSpacer" />

Try 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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteY="81dp">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher_background"
android:adjustViewBounds="true"
android:contentDescription="#null" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="8dp"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:paddingTop="20dp"
android:text="TEST TEXT"
app:layout_constraintStart_toStartOf="#+id/ButtonLayout"
app:layout_constraintTop_toBottomOf="#+id/ButtonLayout" />
<android.support.constraint.ConstraintLayout
android:id="#+id/ButtonLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/image"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image">
<View
android:id="#+id/dummyView"
android:layout_width="match_parent"
android:layout_height="15dp" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:text="BUTTON"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dummyView" />
</android.support.constraint.ConstraintLayout>