Develop Reference

ListView , Is there a way to increase the height?

I don't know why when I put constraints on the text views and such it won't come out the exact position I want it to be, I'm thinking it may be the listview height issue that is pushing everything together
The image below is the problem showing:
This is my adapter:
#Override
public View getView(int position, View convertView, ViewGroup parent) {
//Put the food_list_layout in the convertView
if(convertView == null){
convertView = View.inflate(context, R.layout.preorder_list_layout_orders,null);
}
this is my XML file:
<?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">
<TextView
android:id="#+id/orderID"
android:layout_width="319dp"
android:layout_height="27dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Transaction ID"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.25"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.011" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.066"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.074"
app:srcCompat="#drawable/ic_launcher_background" />
<TextView
android:id="#+id/orderFoodName"
android:layout_width="168dp"
android:layout_height="29dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Food Name"
android:textSize="20dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.607"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.091" />
<TextView
android:id="#+id/textView4"
android:layout_width="59dp"
android:layout_height="25dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Quantity: "
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.146" />
<TextView
android:id="#+id/orderQuantity"
android:layout_width="70dp"
android:layout_height="22dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Quantity"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.698"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.145" />
<TextView
android:id="#+id/orderAN"
android:layout_width="371dp"
android:layout_height="28dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="addnotes"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.791"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.282" />
<TextView
android:id="#+id/textView6"
android:layout_width="124dp"
android:layout_height="29dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Collection Timing:"
android:textSize="15dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.07"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/orderAN"
app:layout_constraintVertical_bias="0.015" />
<TextView
android:id="#+id/orderCT2"
android:layout_width="124dp"
android:layout_height="29dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Collection Timing"
android:textSize="15dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/textView6"
app:layout_constraintTop_toBottomOf="#+id/orderAN"
app:layout_constraintVertical_bias="0.015" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="Additional Notes: "
android:textSize="15dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.068"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.237" />
</android.support.constraint.ConstraintLayout>

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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/orderID"
android:layout_width="319dp"
android:layout_height="0dp"
android:layout_marginStart="27dp"
android:layout_marginTop="13dp"
android:layout_marginBottom="9dp"
android:text="Transaction ID"
app:layout_constraintBottom_toTopOf="#+id/imageView2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginEnd="90dp"
android:layout_marginBottom="17dp"
android:src="#drawable/ic_image_black_24dp"
app:layout_constraintBottom_toTopOf="#+id/orderQuantity"
app:layout_constraintEnd_toStartOf="#+id/orderFoodName"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/orderID" />
<TextView
android:id="#+id/orderFoodName"
android:layout_width="0dp"
android:layout_height="29dp"
android:layout_marginTop="18dp"
android:layout_marginEnd="97dp"
android:layout_marginBottom="25dp"
android:text="Food Name"
android:textSize="20dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/orderQuantity"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView2"
app:layout_constraintTop_toBottomOf="#+id/orderID" />
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="25dp"
android:layout_marginStart="176dp"
android:text="Quantity: "
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/orderQuantity"
app:layout_constraintEnd_toStartOf="#+id/orderQuantity"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/orderQuantity"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="106dp"
android:layout_marginBottom="29dp"
android:text="Quantity"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/textView5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView4"
app:layout_constraintTop_toBottomOf="#+id/imageView2" />
<TextView
android:id="#+id/orderAN"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="13dp"
android:layout_marginEnd="13dp"
android:layout_marginBottom="14dp"
android:text="addnotes"
app:layout_constraintBottom_toTopOf="#+id/textView6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView5" />
<TextView
android:id="#+id/textView6"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="27dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="367dp"
android:text="Collection Timing:"
android:textSize="15dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/orderCT2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/orderAN" />
<TextView
android:id="#+id/orderCT2"
android:layout_width="0dp"
android:layout_height="29dp"
android:layout_marginEnd="128dp"
android:text="Collection Timing"
android:textSize="15dp"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/textView6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView6" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:text="Additional Notes: "
android:textSize="15dp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/orderAN"
app:layout_constraintStart_toStartOf="#+id/orderAN"
app:layout_constraintTop_toBottomOf="#+id/orderQuantity" />
</android.support.constraint.ConstraintLayout>

You are using fixed size for your views and this is making your screen non-responsive .
If you want to achieve a responsive layout don't use fixed size, You can use ConstraintLayout but with android:layout_width="0dp" , android:layout_width="wrap_content" attribute and some Guidelines.
Here is an example for your wanted layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layoutDirection="ltr"
android:orientation="vertical">
<TextView
android:id="#+id/orderID"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Transaction ID"
app:layout_constraintBottom_toTopOf="#+id/imageView2"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.011" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/textView5"
app:layout_constraintEnd_toStartOf="#+id/guideline3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/orderID"
app:layout_constraintTop_toBottomOf="#+id/orderID"
app:layout_constraintVertical_bias="1.0"
app:srcCompat="#drawable/ic_launcher_background" />
<TextView
android:id="#+id/orderFoodName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Food Name"
android:textSize="20dp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintHorizontal_bias="0.607"
app:layout_constraintStart_toEndOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="#+id/imageView2" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Quantity: "
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/imageView2"
app:layout_constraintStart_toStartOf="#+id/orderFoodName"
app:layout_constraintTop_toBottomOf="#+id/orderFoodName"
app:layout_constraintVertical_bias="0.146" />
<TextView
android:id="#+id/orderQuantity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginBottom="8dp"
android:text="Quantity"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/textView4"
app:layout_constraintStart_toEndOf="#+id/textView4"
app:layout_constraintTop_toTopOf="#+id/textView4"
app:layout_constraintVertical_bias="0.145" />
<TextView
android:id="#+id/orderAN"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="addnotes"
app:layout_constraintBottom_toTopOf="#+id/textView6"
app:layout_constraintEnd_toStartOf="#+id/guideline3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/orderID"
app:layout_constraintTop_toBottomOf="#+id/textView5" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Collection Timing:"
android:textSize="15dp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/guideline4"
app:layout_constraintEnd_toEndOf="#+id/imageView2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/orderID"
app:layout_constraintTop_toBottomOf="#+id/orderAN"
app:layout_constraintVertical_bias="0.015" />
<TextView
android:id="#+id/orderCT2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Collection Timing"
android:textSize="15dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/textView6"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toEndOf="#+id/textView6"
app:layout_constraintTop_toTopOf="#+id/textView6"
app:layout_constraintVertical_bias="0.015" />
<TextView
android:id="#+id/textView5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="Additional Notes: "
android:textSize="15dp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/orderAN"
app:layout_constraintEnd_toStartOf="#+id/guideline3"
app:layout_constraintStart_toStartOf="#+id/orderID"
app:layout_constraintTop_toBottomOf="#+id/imageView2" />
<androidx.constraintlayout.widget.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="0.05" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="385dp"
app:layout_constraintGuide_percent="0.95" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="144dp" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="392dp"
app:layout_constraintGuide_percent="0.4" />
</androidx.constraintlayout.widget.ConstraintLayout>
It will look like this:

Android Virtual Device detects wrong screen size?

When I fully edit GUI on android editor and run it. Android Virtual Device overlap it on the bottom corner.
I'm using android studio LATEST VERSION
Android Editor
Android Virtual Device(Nexus_5X_API_28)
<?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=".MainActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="h,640:371"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.046"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/header_bg" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="160dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintDimensionRatio="w,35:55"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:srcCompat="#drawable/book_cover" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:text="Buisness Advise for starting a small buisness"
android:textColor="#android:color/black"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView2"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<Button
android:id="#+id/buy"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="48dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:background="#drawable/buy_button"
android:padding="10dp"
android:text="5$"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="#+id/wishlist"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView2" />
<Button
android:id="#+id/wishlist"
android:layout_width="172dp"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginLeft="4dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:background="#drawable/buy_button"
android:padding="10dp"
android:text="WishList+"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/buy"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/buy" />
<ImageView
android:id="#+id/rating"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="44dp"
android:background="#drawable/rating"
app:layout_constraintEnd_toStartOf="#+id/comment"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/buy"
app:srcCompat="#drawable/ic_star"
tools:ignore="VectorDrawableCompat" />
<ImageView
android:id="#+id/comment"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/comment"
app:layout_constraintBottom_toBottomOf="#+id/rating"
app:layout_constraintEnd_toStartOf="#+id/style"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/rating"
app:layout_constraintTop_toTopOf="#+id/rating"
app:srcCompat="#drawable/ic_speaker"
tools:ignore="VectorDrawableCompat" />
<ImageView
android:id="#+id/style"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/style"
app:layout_constraintBottom_toBottomOf="#+id/comment"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/comment"
app:layout_constraintTop_toTopOf="#+id/comment"
app:srcCompat="#drawable/ic_style"
tools:ignore="VectorDrawableCompat" />
<TextView
android:id="#+id/ratinText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="11dp"
android:text="4.5+"
android:textColor="#android:color/black"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/rating"
app:layout_constraintStart_toStartOf="#+id/rating"
app:layout_constraintTop_toBottomOf="#+id/rating" />
<TextView
android:id="#+id/commentText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="11dp"
android:text="Advices"
android:textColor="#android:color/black"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/comment"
app:layout_constraintStart_toStartOf="#+id/comment"
app:layout_constraintTop_toBottomOf="#+id/comment" />
<TextView
android:id="#+id/similarText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="11dp"
android:text="Similar"
android:textColor="#android:color/black"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/style"
app:layout_constraintStart_toStartOf="#+id/style"
app:layout_constraintTop_toBottomOf="#+id/style" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="In this video, I am designing an Android App's Book Details/Buy Page UI(User Interface) with ConstraintLayout"
android:textColor="#android:color/black"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/commentText" />
</android.support.constraint.ConstraintLayout>
When I fully edit GUI on android editor and run it. Android Virtual Device overlap it on the bottom corner.
How can I fix this problem.

You can handle it by wrapping the xml layout with ScrollView, Please try this
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="h,640:371"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.046"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/ic_launcher_background" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="160dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintDimensionRatio="w,35:55"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:srcCompat="#drawable/ic_launcher_background" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:text="Buisness Advise for starting a small buisness"
android:textColor="#android:color/black"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView2"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<Button
android:id="#+id/buy"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="48dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:background="#drawable/ic_launcher_background"
android:padding="10dp"
android:text="5$"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="#+id/wishlist"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView2" />
<Button
android:id="#+id/wishlist"
android:layout_width="172dp"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginLeft="4dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:background="#drawable/ic_launcher_background"
android:padding="10dp"
android:text="WishList+"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/buy"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/buy" />
<ImageView
android:id="#+id/rating"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="44dp"
android:background="#drawable/ic_launcher_background"
app:layout_constraintEnd_toStartOf="#+id/comment"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/buy"
app:srcCompat="#drawable/ic_launcher_background"
tools:ignore="VectorDrawableCompat" />
<ImageView
android:id="#+id/comment"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="#+id/rating"
app:layout_constraintEnd_toStartOf="#+id/style"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/rating"
app:layout_constraintTop_toTopOf="#+id/rating"
app:srcCompat="#drawable/ic_launcher_background"
tools:ignore="VectorDrawableCompat" />
<ImageView
android:id="#+id/style"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="#+id/comment"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/comment"
app:layout_constraintTop_toTopOf="#+id/comment"
app:srcCompat="#drawable/ic_launcher_background"
tools:ignore="VectorDrawableCompat" />
<TextView
android:id="#+id/ratinText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="11dp"
android:text="4.5+"
android:textColor="#android:color/black"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/rating"
app:layout_constraintStart_toStartOf="#+id/rating"
app:layout_constraintTop_toBottomOf="#+id/rating" />
<TextView
android:id="#+id/commentText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="11dp"
android:text="Advices"
android:textColor="#android:color/black"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/comment"
app:layout_constraintStart_toStartOf="#+id/comment"
app:layout_constraintTop_toBottomOf="#+id/comment" />
<TextView
android:id="#+id/similarText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="11dp"
android:text="Similar"
android:textColor="#android:color/black"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/style"
app:layout_constraintStart_toStartOf="#+id/style"
app:layout_constraintTop_toBottomOf="#+id/style" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="In this video, I am designing an Android App's Book Details/Buy Page UI(User Interface) with ConstraintLayout"
android:textColor="#android:color/black"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/commentText" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

How do I make constraints match height of phone? (Android Studio)

Coming from iOS and Xcode I', confused about layout and constraints in android studio. My layout currently looks like this, which is fine for a small sized phone. But on a phone with a large height it leaves a big space at the bottom. I want the layout to follow and match the height of the phone.
My XML looks like 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:theme="#style/NoBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorWhite"
tools:context="com.sdc_nollvision_relative.myapp.MainActivity">
<ImageView
android:id="#+id/logo"
android:layout_width="80dp"
android:layout_height="70dp"
android:scaleType="centerCrop"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/logo" />
<TextView
android:id="#+id/main_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="3dp"
android:text="DEMENSVÅRD"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Title"
android:textColor="#android:color/black"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/logo" />
<TextView
android:id="#+id/subHeader"
android:typeface="monospace"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="UTAN TVÅNG"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/main_header" />
<TextView
android:id="#+id/chapter1Header"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:elevation="3dp"
android:text="Placeholder"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
android:typeface="serif"
app:layout_constraintBottom_toBottomOf="#+id/chapter1"
app:layout_constraintEnd_toEndOf="#+id/chapter1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/iconHolder1"
app:layout_constraintTop_toTopOf="#+id/chapter1" />
<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/iconHolder1"
android:layout_width="80dp"
android:layout_height="0dp"
android:elevation="3dp"
android:padding="8dp"
android:src="#drawable/icon1"
app:civ_border_color="#color/colorPrimary"
app:civ_border_width="0dp"
app:layout_constraintBottom_toBottomOf="#+id/chapter1"
app:layout_constraintStart_toStartOf="#+id/chapter1"
app:layout_constraintTop_toTopOf="#+id/chapter1" />
<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/iconHolder2"
android:layout_width="80dp"
android:layout_height="0dp"
android:elevation="3dp"
android:padding="8dp"
android:src="#drawable/icon2"
app:civ_border_color="#color/chapter1"
app:civ_border_width="0dp"
app:layout_constraintBottom_toBottomOf="#+id/chapter2"
app:layout_constraintStart_toStartOf="#+id/chapter2"
app:layout_constraintTop_toTopOf="#+id/chapter2" />
<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/iconHolder3"
android:layout_width="80dp"
android:layout_height="0dp"
android:elevation="3dp"
android:padding="8dp"
android:src="#drawable/icon3"
app:layout_constraintBottom_toBottomOf="#+id/chapter3"
app:layout_constraintStart_toStartOf="#+id/chapter3"
app:layout_constraintTop_toTopOf="#+id/chapter3" />
<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/iconHolder4"
android:layout_width="80dp"
android:layout_height="0dp"
android:elevation="3dp"
android:padding="8dp"
android:src="#drawable/icon4"
app:layout_constraintBottom_toBottomOf="#+id/chapter4"
app:layout_constraintStart_toStartOf="#+id/chapter4"
app:layout_constraintTop_toTopOf="#+id/chapter4" />
<Button
android:id="#+id/chapter1"
android:layout_width="0dp"
android:layout_height="75dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
android:layout_marginTop="8dp"
android:background="#drawable/backgroundview"
android:elevation="0dp"
android:text=""
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/subHeader" />
<TextView
android:id="#+id/chapter2Header"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:elevation="3dp"
android:text="Placeholder"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/chapter2"
app:layout_constraintEnd_toEndOf="#+id/chapter2"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/iconHolder2"
app:layout_constraintTop_toTopOf="#+id/chapter2" />
<Button
android:id="#+id/chapter2"
android:layout_width="0dp"
android:layout_height="75dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
android:layout_marginTop="8dp"
android:background="#drawable/backgroundview"
android:elevation="0dp"
android:text=""
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/chapter1" />
<TextView
android:id="#+id/chapter3Header"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:elevation="3dp"
android:text="Placeholder"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/chapter3"
app:layout_constraintEnd_toEndOf="#+id/chapter3"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/iconHolder3"
app:layout_constraintTop_toTopOf="#+id/chapter3" />
<Button
android:id="#+id/chapter3"
android:layout_width="0dp"
android:layout_height="75dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
android:layout_marginTop="8dp"
android:background="#drawable/backgroundview"
android:elevation="0dp"
android:text=""
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/chapter2" />
<TextView
android:id="#+id/chapter4Header"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:elevation="3dp"
android:text="Placeholder"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/chapter4"
app:layout_constraintEnd_toEndOf="#+id/chapter4"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/iconHolder4"
app:layout_constraintTop_toTopOf="#+id/chapter4" />
<Button
android:id="#+id/chapter4"
android:layout_width="0dp"
android:layout_height="75dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
android:layout_marginTop="8dp"
android:background="#drawable/backgroundview"
android:elevation="0dp"
android:text=""
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/chapter3" />
<ImageButton
android:id="#+id/about_button"
android:layout_width="15dp"
android:layout_height="35dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="24dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#0000"
android:scaleType="fitXY"
android:src="#drawable/about"
app:layout_constraintEnd_toStartOf="#+id/language_button"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="#+id/version_button"
app:layout_constraintTop_toBottomOf="#+id/chapter4" />
<Button
android:id="#+id/version_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="4dp"
android:background="#color/colorWhite"
android:text="version"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/chapter4" />
<Button
android:id="#+id/language_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="24dp"
android:layout_marginTop="4dp"
android:background="#color/colorWhite"
android:text="language"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/chapter4" />
And yes, I'm aware that I have a fixed size of the buttons. But I have no idea how to make them dynamically follow the height of the phone. Sorry for such a basic question, but I'm still learning the basics here :)

You need to create a vertical chain with its chainStyle as spread or spread_inside to achieve what you want with little bit of margin and padding customizations for your top-most and bottom-most view(s).
XML 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:theme="#android:style/Theme.NoTitleBar.Fullscreen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
tools:context="com.stackoverflow.MainActivity">
<ImageView
android:id="#+id/logo"
android:layout_width="80dp"
android:layout_height="70dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="#+id/main_header"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="spread"
app:srcCompat="#android:drawable/btn_star_big_on" />
<TextView
android:id="#+id/main_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="3dp"
android:text="DEMENSVÅRD"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Title"
android:textColor="#android:color/black"
app:layout_constraintBottom_toTopOf="#+id/subHeader"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/logo" />
<TextView
android:id="#+id/subHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="UTAN TVÅNG"
android:textAlignment="center"
android:typeface="monospace"
app:layout_constraintBottom_toTopOf="#+id/chapter1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/main_header" />
<TextView
android:id="#+id/chapter1Header"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:elevation="3dp"
android:text="Placeholder"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
android:typeface="serif"
app:layout_constraintBottom_toBottomOf="#+id/chapter1"
app:layout_constraintEnd_toEndOf="#+id/chapter1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/iconHolder1"
app:layout_constraintTop_toTopOf="#+id/chapter1" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/iconHolder1"
android:layout_width="80dp"
android:layout_height="0dp"
android:elevation="3dp"
android:padding="8dp"
android:src="#drawable/icon1"
app:civ_border_color="#color/colorPrimary"
app:civ_border_width="0dp"
app:layout_constraintBottom_toBottomOf="#+id/chapter1"
app:layout_constraintStart_toStartOf="#+id/chapter1"
app:layout_constraintTop_toTopOf="#+id/chapter1" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/iconHolder2"
android:layout_width="80dp"
android:layout_height="0dp"
android:elevation="3dp"
android:padding="8dp"
android:src="#drawable/icon2"
app:civ_border_color="#color/chapter1"
app:civ_border_width="0dp"
app:layout_constraintBottom_toBottomOf="#+id/chapter2"
app:layout_constraintStart_toStartOf="#+id/chapter2"
app:layout_constraintTop_toTopOf="#+id/chapter2" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/iconHolder3"
android:layout_width="80dp"
android:layout_height="0dp"
android:elevation="3dp"
android:padding="8dp"
android:src="#drawable/icon3"
app:layout_constraintBottom_toBottomOf="#+id/chapter3"
app:layout_constraintStart_toStartOf="#+id/chapter3"
app:layout_constraintTop_toTopOf="#+id/chapter3" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/iconHolder4"
android:layout_width="80dp"
android:layout_height="0dp"
android:elevation="3dp"
android:padding="8dp"
android:src="#drawable/icon4"
app:layout_constraintBottom_toBottomOf="#+id/chapter4"
app:layout_constraintStart_toStartOf="#+id/chapter4"
app:layout_constraintTop_toTopOf="#+id/chapter4" />
<Button
android:id="#+id/chapter1"
android:layout_width="0dp"
android:layout_height="75dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
android:layout_marginTop="8dp"
android:background="#android:drawable/spinner_background"
android:elevation="0dp"
android:text=""
app:layout_constraintBottom_toTopOf="#+id/chapter2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/subHeader" />
<TextView
android:id="#+id/chapter2Header"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:elevation="3dp"
android:text="Placeholder"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/chapter2"
app:layout_constraintEnd_toEndOf="#+id/chapter2"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/iconHolder2"
app:layout_constraintTop_toTopOf="#+id/chapter2" />
<Button
android:id="#+id/chapter2"
android:layout_width="0dp"
android:layout_height="75dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
android:layout_marginTop="8dp"
android:background="#android:drawable/spinner_background"
android:elevation="0dp"
android:text=""
app:layout_constraintBottom_toTopOf="#+id/chapter3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/chapter1" />
<TextView
android:id="#+id/chapter3Header"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:elevation="3dp"
android:text="Placeholder"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/chapter3"
app:layout_constraintEnd_toEndOf="#+id/chapter3"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/iconHolder3"
app:layout_constraintTop_toTopOf="#+id/chapter3" />
<Button
android:id="#+id/chapter3"
android:layout_width="0dp"
android:layout_height="75dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
android:layout_marginTop="8dp"
android:background="#android:drawable/spinner_background"
android:elevation="0dp"
android:text=""
app:layout_constraintBottom_toTopOf="#+id/chapter4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/chapter2" />
<TextView
android:id="#+id/chapter4Header"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:elevation="3dp"
android:text="Placeholder"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/chapter4"
app:layout_constraintEnd_toEndOf="#+id/chapter4"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/iconHolder4"
app:layout_constraintTop_toTopOf="#+id/chapter4" />
<Button
android:id="#+id/chapter4"
android:layout_width="0dp"
android:layout_height="75dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
android:layout_marginTop="8dp"
android:background="#android:drawable/spinner_background"
android:elevation="0dp"
android:text=""
app:layout_constraintBottom_toTopOf="#+id/about_button"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/chapter3" />
<ImageButton
android:id="#+id/about_button"
android:layout_width="15dp"
android:layout_height="35dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#0000"
android:scaleType="fitXY"
android:src="#android:drawable/btn_star_big_on"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/language_button"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="#+id/version_button"
app:layout_constraintTop_toBottomOf="#+id/chapter4"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/version_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="4dp"
android:background="#android:color/white"
android:text="version"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/chapter4" />
<Button
android:id="#+id/language_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="24dp"
android:layout_marginTop="4dp"
android:background="#android:color/white"
android:text="language"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/chapter4" />
</android.support.constraint.ConstraintLayout>
Screenshots (for the above code):
1] For screen size - 5.0 inch (1080 x 1920 pixels) [Device: Nexus 5]
2] For screen size - 7.0 inch (1200 x 1920 pixels) [Device: Nexus 7]
For more information on how to create a chain in ConstraintLayout, its proper usage and various chain styles please go through:
https://developer.android.com/reference/android/support/constraint/ConstraintLayout#Chains
I hope, this helps you.

You have to build a vertical chain of elements.
Check the detailed explanation here: https://medium.com/#nomanr/constraintlayout-chains-4f3b58ea15bb

Problem in using NestedScrollView in Constraint layout

I am using Constraint layout inside the NestestScrollView as shown below.
<?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:id="#+id/clProfileFragment"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/appCompatImageView8"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.7"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/bg_nature" />
<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/ivProfileFragment"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:src="#drawable/ic_profile"
android:visibility="visible"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvUserName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:fontFamily="#font/raleway_medium"
android:letterSpacing="0.2"
android:textAlignment="center"
android:textColor="#color/darkBlue"
app:layout_constraintBottom_toBottomOf="#+id/ivProfileFragment"
app:layout_constraintStart_toEndOf="#+id/ivProfileFragment"
app:layout_constraintTop_toTopOf="#+id/ivProfileFragment"
tools:text="Mehul Kanzriya" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/ivCloseProfileFragment"
style="#style/VectorImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_close" />
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:fillViewport="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ivProfileFragment"
app:layout_constraintBottom_toTopOf="#id/button">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/raleway_semibold"
android:letterSpacing="0.3"
android:text="#string/text_subscribe"
android:textColor="#color/darkBlue"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:letterSpacing="0.3"
android:text="#string/text_subscription_feature_1"
android:textAlignment="center"
android:textColor="#color/subscriptionFeaturesColor"
android:textSize="#dimen/subscriptionFeaturesSize"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:letterSpacing="0.3"
android:text="#string/text_subscription_feature_2"
android:textAlignment="center"
android:textColor="#color/subscriptionFeaturesColor"
android:textSize="#dimen/subscriptionFeaturesSize"
app:layout_constraintEnd_toEndOf="#+id/textView2"
app:layout_constraintStart_toStartOf="#+id/textView2"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<TextView
android:id="#+id/textView5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:letterSpacing="0.3"
android:text="#string/text_subscription_feature_3"
android:textAlignment="center"
android:textColor="#color/subscriptionFeaturesColor"
android:textSize="#dimen/subscriptionFeaturesSize"
app:layout_constraintEnd_toEndOf="#+id/textView4"
app:layout_constraintStart_toStartOf="#+id/textView4"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/appCompatImageView2"
android:layout_width="350dp"
android:layout_height="168dp"
android:layout_marginTop="32dp"
app:layout_constraintEnd_toEndOf="#+id/textView5"
app:layout_constraintStart_toStartOf="#+id/textView5"
app:layout_constraintTop_toBottomOf="#+id/textView5"
app:srcCompat="#mipmap/bg_pdf_resting" />
<com.google.android.material.card.MaterialCardView
android:id="#+id/cvAnnualPlan"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:cardBackgroundColor="#android:color/transparent"
app:cardCornerRadius="14dp"
app:cardElevation="0dp"
app:layout_constraintEnd_toStartOf="#+id/cvMonthlyPlan"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/appCompatImageView2"
app:strokeColor="#color/darkBlue"
app:strokeWidth="3dp">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
app:cardBackgroundColor="#color/subscriptionCardBackgroundColor"
app:cardCornerRadius="12dp"
app:cardElevation="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/darkBlue"
android:fontFamily="#font/raleway_medium"
android:letterSpacing="0.1"
android:padding="8dp"
android:text="#string/text_subscription_most_popular"
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/raleway_semibold"
android:letterSpacing="0.3"
android:text="ANNUAL"
android:textColor="#color/lightYellow"
android:textSize="#dimen/subscriptionPlanTitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView7" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/roboto_bold"
android:text="Rs 60.00"
android:textColor="#android:color/white"
android:textSize="#dimen/subscriptionPlanPrice"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="32dp"
android:fontFamily="#font/raleway_semibold"
android:letterSpacing="0.3"
android:text="#string/text_per_month"
android:textColor="#android:color/white"
android:textSize="#dimen/subscriptionPlanMonthly"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView6" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</com.google.android.material.card.MaterialCardView>
<com.google.android.material.card.MaterialCardView
android:id="#+id/cvMonthlyPlan"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:cardBackgroundColor="#android:color/transparent"
app:cardCornerRadius="14dp"
app:cardElevation="0dp"
app:layout_constraintBottom_toBottomOf="#+id/cvAnnualPlan"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/cvAnnualPlan"
app:layout_constraintTop_toTopOf="#+id/cvAnnualPlan"
app:strokeColor="#color/darkBlue"
app:strokeWidth="3dp">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
app:cardBackgroundColor="#color/subscriptionCardBackgroundColor"
app:cardCornerRadius="12dp"
app:cardElevation="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="8dp"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView44"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/raleway_semibold"
android:letterSpacing="0.3"
android:text="MONTHLY"
android:textColor="#color/lightYellow"
android:textSize="#dimen/subscriptionPlanTitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView8" />
<TextView
android:id="#+id/textView66"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/roboto_bold"
android:text="Rs 70.00"
android:textColor="#android:color/white"
android:textSize="#dimen/subscriptionPlanPrice"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView44" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="32dp"
android:fontFamily="#font/raleway_semibold"
android:letterSpacing="0.3"
android:text="#string/text_per_month"
android:textColor="#android:color/white"
android:textSize="#dimen/subscriptionPlanMonthly"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView66" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</com.google.android.material.card.MaterialCardView>
<TextView
android:id="#+id/textView9"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:letterSpacing="0.3"
android:text="#string/text_subscription_feature_4"
android:textAlignment="center"
android:textColor="#color/subscriptionFeaturesColor"
android:textSize="#dimen/subscriptionFeaturesSize"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cvAnnualPlan" />
<TextView
android:id="#+id/textView10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:letterSpacing="0.3"
android:text="#string/text_subscription_feature_5"
android:textAlignment="center"
android:textColor="#color/subscriptionFeaturesColor"
android:textSize="#dimen/subscriptionFeaturesSize"
app:layout_constraintEnd_toEndOf="#+id/textView9"
app:layout_constraintStart_toStartOf="#+id/textView9"
app:layout_constraintTop_toBottomOf="#+id/textView9" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
android:fontFamily="#font/raleway_semibold"
android:letterSpacing="0.3"
android:text="#string/button_logout"
android:textAlignment="center"
android:textColor="#color/logoutButtonColor"
android:textSize="#dimen/subscriptionFeaturesSize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/textView10"
app:layout_constraintStart_toStartOf="#+id/textView10"
app:layout_constraintTop_toBottomOf="#+id/textView10" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
<Button
android:id="#+id/button"
style="#style/UnelevatedButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/button_subscribe"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
The problem is that the first two TextViews are getting cropped and an unnecessary padding is added at the bottom of the NestedScrollView.
A similar bug was filed a few months before but I think it's not solved yet.
Similar questions have been asked before, but I can't find the proper solution to it.

Try this Result https://www.youtube.com/watch?v=PTnbzCbgBTE
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/clProfileFragment"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/appCompatImageView8"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
android:adjustViewBounds="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.7"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#color/colorAccent" />
<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/ivProfileFragment"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:src="#drawable/ic_launcher_nilesh"
android:visibility="visible"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvUserName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:letterSpacing="0.2"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="#+id/ivProfileFragment"
app:layout_constraintStart_toEndOf="#+id/ivProfileFragment"
app:layout_constraintTop_toTopOf="#+id/ivProfileFragment"
android:text="Mehul Kanzriya" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/ivCloseProfileFragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_drawer" />
<androidx.core.widget.NestedScrollView
android:layout_width="0dp"
android:layout_height="0dp"
android:clipToPadding="true"
android:fillViewport="true"
android:fitsSystemWindows="true"
app:layout_constraintBottom_toTopOf="#id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ivProfileFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:letterSpacing="0.3"
android:text="text_subscribe"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:letterSpacing="0.3"
android:text="text_subscription_feature_1"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:letterSpacing="0.3"
android:text="text_subscription_feature_2"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="#+id/textView2"
app:layout_constraintStart_toStartOf="#+id/textView2"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<TextView
android:id="#+id/textView5"
android:layout_width="0dp"
android:layout_height="16dp"
android:layout_marginTop="8dp"
android:letterSpacing="0.3"
android:text="text_subscription_feature_3"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="#+id/textView4"
app:layout_constraintStart_toStartOf="#+id/textView4"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/appCompatImageView2"
android:layout_width="350dp"
android:layout_height="168dp"
android:layout_marginTop="32dp"
app:layout_constraintEnd_toEndOf="#+id/textView5"
app:layout_constraintStart_toStartOf="#+id/textView5"
app:layout_constraintTop_toBottomOf="#+id/textView5"
app:srcCompat="#mipmap/ic_launcher_round" />
<com.google.android.material.card.MaterialCardView
android:id="#+id/cvAnnualPlan"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:cardBackgroundColor="#android:color/transparent"
app:cardCornerRadius="14dp"
app:cardElevation="0dp"
app:layout_constraintEnd_toStartOf="#+id/cvMonthlyPlan"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/appCompatImageView2"
app:strokeWidth="3dp">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
app:cardCornerRadius="12dp"
app:cardElevation="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:letterSpacing="0.1"
android:padding="8dp"
android:text="text_subscription_most_popular"
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:letterSpacing="0.3"
android:text="ANNUAL"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView7" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="Rs 60.00"
android:textColor="#android:color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="32dp"
android:letterSpacing="0.3"
android:text="text_per_month"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView6" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</com.google.android.material.card.MaterialCardView>
<com.google.android.material.card.MaterialCardView
android:id="#+id/cvMonthlyPlan"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:cardBackgroundColor="#android:color/transparent"
app:cardCornerRadius="14dp"
app:cardElevation="0dp"
app:layout_constraintBottom_toBottomOf="#+id/cvAnnualPlan"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/cvAnnualPlan"
app:layout_constraintTop_toTopOf="#+id/cvAnnualPlan"
app:strokeWidth="3dp">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
app:cardCornerRadius="12dp"
app:cardElevation="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="8dp"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView44"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:letterSpacing="0.3"
android:text="MONTHLY"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView8" />
<TextView
android:id="#+id/textView66"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="Rs 70.00"
android:textColor="#android:color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView44" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="32dp"
android:letterSpacing="0.3"
android:text="text_per_month"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView66" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</com.google.android.material.card.MaterialCardView>
<TextView
android:id="#+id/textView9"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:letterSpacing="0.3"
android:text="text_subscription_feature_4"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cvAnnualPlan" />
<TextView
android:id="#+id/textView10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:letterSpacing="0.3"
android:text="text_subscription_feature_5"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="#+id/textView9"
app:layout_constraintStart_toStartOf="#+id/textView9"
app:layout_constraintTop_toBottomOf="#+id/textView9" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
android:letterSpacing="0.3"
android:text="button_logout"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/textView10"
app:layout_constraintStart_toStartOf="#+id/textView10"
app:layout_constraintTop_toBottomOf="#+id/textView10" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="button_subscribe"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Take a look at android:layout_gravity="center" on the ConstraintLayout nested within the NestedScrollView. Try to either remove this attribute or set it to android:layout_gravity="center_horizonal". I am not quite sure what it means to center a View vertically in a NestedScrollView.

In my situation, there is a app:layout_constraintBottom_toBottomOf="parent" in the child view of ConstraintLayout.
<TextView
android:id="#+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/choose_position"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.061"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/chip_group_time"
app:layout_constraintVertical_bias="0.027" />
Delete the layout_constrainBottom_toBottomOf. My NestedScrollView work!!!!
<TextView
android:id="#+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/choose_position"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.061"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/chip_group_time"
app:layout_constraintVertical_bias="0.027" />
Be careful to use app:layout_constraintBottom_toBottomOf="parent" in NestedScrollView > ConstraintLayout . Because it make the layout fixed

How to put 'spinner' on top of button

Is there a way I can make my spinner be put on top of my button? (There will be various things on top of my button and when you press the button everything thats on it including the button will disappear)(the button spans the width of the screen) Now it's my spinner under my button. I tried looking at different RelativeLayout settings but it didn't work. Here's the xml code below
<?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:background="#color/colorBackground"
android:minHeight="170dp"
tools:context=".create"
tools:layout_editor_absoluteY="81dp">
<View
android:id="#+id/view"
android:layout_width="320dp"
android:layout_height="1dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="76dp"
android:background="#color/colorText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Spinner
android:id="#+id/spinner"
android:layout_width="296dp"
android:layout_height="49dp"
android:layout_marginEnd="56dp"
android:layout_marginRight="56dp"
app:layout_constraintEnd_toEndOf="parent"
tools:layout_editor_absoluteY="95dp" />
<Button
android:id="#+id/button"
android:layout_width="330dp"
android:layout_height="wrap_content"
android:layout_marginBottom="312dp"
android:background="#drawable/button_shadow"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<View
android:id="#+id/view2"
android:layout_width="320dp"
android:layout_height="1dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="28dp"
android:background="#color/colorText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/droid_sans"
android:text="#string/done_label"
android:textColor="#color/colorText"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView4"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="128dp"
android:layout_marginRight="128dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/droid_sans"
android:text="#string/aisle_label"
android:textColor="#color/colorText"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginEnd="44dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="44dp"
android:layout_marginStart="8dp"
android:layout_marginTop="5dp"
android:fontFamily="#font/droid_sans"
android:text="#string/qty_label"
android:textColor="#color/colorText"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toStartOf="#+id/textView4"
app:layout_constraintHorizontal_bias="0.973"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="0.7" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/droid_sans"
android:text="#string/item_label"
android:textColor="#color/colorText"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toStartOf="#+id/textView3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="1.0" />
</android.support.constraint.ConstraintLayout>
Edit: I put my button and spinner into a frame layout, and when I tested it on my phone it works. However I tested it on a phone of a bigger size (and a newer android version) and the spinner doesn't show up (probably hidden again?) No idea why it would work on one phone but not the other,
<FrameLayout
android:layout_width="327dp"
android:layout_height="63dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.195"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view">
<Button
android:id="#+id/buttontest"
android:layout_width="313dp"
android:layout_height="63dp"
android:layout_marginEnd="24dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="24dp"
android:layout_marginStart="8dp"
android:background="#drawable/button_shadow"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.863"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="102dp" />
<Spinner
android:id="#+id/spinner"
android:layout_width="249dp"
android:layout_height="58dp"
android:layout_marginBottom="344dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.237"
app:layout_constraintStart_toStartOf="parent" />
</FrameLayout>

Try calling
findViewById(R.id.spinner).bringToFront();

You can 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"
android:background="#color/browser_actions_bg_grey"
android:minHeight="170dp"
tools:layout_editor_absoluteY="81dp">
<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"
android:layout_marginTop="25dp"
>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Done"
android:textSize="20sp"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=" aisle_label"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=" qty_label"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toStartOf="#+id/textView4"
app:layout_constraintHorizontal_bias="0.973"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="0.7" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text=" item_label"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toStartOf="#+id/textView3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintVertical_bias="1.0" />
</LinearLayout>
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_margin="10dp"
android:background="#a4a4a4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Spinner
android:id="#+id/spinner"
android:layout_width="match_parent"
android:layout_height="49dp"
android:layout_gravity="center"
android:layout_margin="10dp"
/>
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Button"
app:layout_constraintStart_toStartOf="parent" />
<View
android:id="#+id/view2"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_margin="10dp"
android:background="#a4a4a4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>

I think I managed to sort something out - I created a 'FrameLayout' and put both my spinner & button in there.
Should do the job, unless I find an issue, in which I'll come back here,this should be solved. :) Thank you

In case anyone was wondering:
I put my 'button' into a FrameLayout then put the elements I want 'ontop' of it, under it (as in the code under it) like so:
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="357dp"
android:layout_height="58dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.195"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view"
app:layout_constraintVertical_bias="0.016">
<Button
android:id="#+id/buttontest"
android:layout_width="393dp"
android:layout_height="63dp"
android:layout_marginEnd="24dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="24dp"
android:layout_marginStart="8dp"
android:background="#drawable/button_shadow"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.863"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="102dp" />
</FrameLayout>
<EditText
android:id="#+id/editText"
android:layout_width="44dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="184dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="184dp"
android:layout_marginStart="8dp"
android:ems="10"
android:hint="qty"
android:inputType="number"
app:layout_constraintBottom_toBottomOf="#+id/frameLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/spinner"
app:layout_constraintTop_toTopOf="#+id/frameLayout"
app:layout_constraintVertical_bias="1.0" />
<Spinner
android:id="#+id/spinner"
android:layout_width="85dp"
android:layout_height="45dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/frameLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.06"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/editText" />