Develop Reference

ANDROID STUDIO: How do I fix my ScrollView?

Newbie in android studio here.
I am trying to make a list of local herbal plants a-z and also had a thought if I would just make another tab for each letter of the first letter of the plant. And then i realized that i can make a scrollview. so its quite late for me to insert the scrollview and i know it would make a problem at my code.
now that i have put it in my .xml file, my app is forced to close everytime I run it.
how do I fix this? Thanks!!
(heres the code):
<?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/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="vertical"
tools:context="com.mobprog.herbalite.MainActivity">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:id="#+id/abaniko_pic"
android:layout_width="180dp"
android:layout_height="145dp"
android:layout_marginStart="6dp"
android:layout_marginTop="6dp"
android:adjustViewBounds="true"
android:background="#drawable/stroke"
app:srcCompat="#drawable/kjadhskjadhsa"
app:layout_constrainedWidth="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_bias="0.022"
/>
<TextView
android:id="#+id/abanico_text"
android:layout_width="180dp"
android:layout_height="30dp"
android:layout_marginStart="8dp"
android:background="#drawable/stroke"
android:fontFamily="sans-serif-condensed-medium"
android:gravity="center"
android:text="Abaniko"
android:textAlignment="center"
android:textColor="#000000"
android:textSize="20dp"
app:layout_constrainedHeight="true"
app:layout_constrainedWidth="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/abaniko_pic"
app:layout_constraintHorizontal_bias="0.013"
/>
<ImageButton
android:id="#+id/alim_pic"
android:layout_width="180dp"
android:layout_height="145dp"
android:layout_marginTop="6dp"
android:layout_marginEnd="2dp"
android:adjustViewBounds="true"
android:background="#drawable/stroke"
android:padding="5dp"
app:layout_constrainedHeight="true"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.950"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/alim"
/>
<TextView
android:id="#+id/alim_text"
android:layout_width="180dp"
android:layout_height="30dp"
android:layout_marginStart="8dp"
android:background="#drawable/stroke"
android:fontFamily="sans-serif-condensed-medium"
android:gravity="center"
android:text="Alim"
android:textAlignment="center"
android:textColor="#000000"
android:textSize="20dp"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.941"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/alim_pic"
/>
<ImageButton
android:id="#+id/alinang_pic"
android:layout_width="180dp"
android:layout_height="145dp"
android:layout_marginStart="6dp"
android:layout_marginTop="195dp"
android:adjustViewBounds="true"
android:background="#drawable/stroke"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.022"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/alinang"
/>
<TextView
android:id="#+id/alinang_text"
android:layout_width="180dp"
android:layout_height="30dp"
android:layout_marginStart="8dp"
android:background="#drawable/stroke"
android:fontFamily="sans-serif-condensed-medium"
android:gravity="center"
android:text="Alinang"
android:textAlignment="center"
android:textColor="#000000"
android:textSize="20dp"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.013"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/alinang_pic"
/>
<ImageButton
android:id="#+id/ampalaya_pic"
android:layout_width="180dp"
android:layout_height="145dp"
android:layout_marginTop="195dp"
android:layout_marginEnd="2dp"
android:adjustViewBounds="true"
android:background="#drawable/stroke"
android:padding="5dp"
app:layout_constrainedHeight="true"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.938"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ampalaya" />
<TextView
android:id="#+id/ampalaya_text"
android:layout_width="180dp"
android:layout_height="30dp"
android:layout_marginStart="8dp"
android:background="#drawable/stroke"
android:fontFamily="sans-serif-condensed-medium"
android:gravity="center"
android:text="Ampalaya"
android:textAlignment="center"
android:textColor="#000000"
android:textSize="20dp"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.928"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ampalaya_pic"
/>
<ImageButton
android:id="#+id/ambal_pic"
android:layout_width="180dp"
android:layout_height="145dp"
android:layout_marginTop="385dp"
android:layout_marginEnd="2dp"
android:adjustViewBounds="true"
android:background="#drawable/stroke"
android:padding="5dp"
app:layout_constrainedHeight="true"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.048"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ambal" />
<TextView
android:id="#+id/ambal_text"
android:layout_width="180dp"
android:layout_height="30dp"
android:layout_marginStart="8dp"
android:background="#drawable/stroke"
android:fontFamily="sans-serif-condensed-medium"
android:gravity="center"
android:text="Ambal"
android:textAlignment="center"
android:textColor="#000000"
android:textSize="20dp"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.013"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ambal_pic" />
<ImageButton
android:id="#+id/anabo_pic"
android:layout_width="180dp"
android:layout_height="145dp"
android:layout_marginTop="385dp"
android:layout_marginEnd="2dp"
android:adjustViewBounds="true"
android:background="#drawable/stroke"
android:padding="5dp"
app:layout_constrainedHeight="true"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.938"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/anabo" />
<TextView
android:id="#+id/anabo_text"
android:layout_width="180dp"
android:layout_height="30dp"
android:layout_marginStart="8dp"
android:background="#drawable/stroke"
android:fontFamily="sans-serif-condensed-medium"
android:gravity="center"
android:text="Anabo"
android:textAlignment="center"
android:textColor="#000000"
android:textSize="20dp"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.928"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/anabo_pic" />
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

First you have to set parent layout as linear layout in scrollview.
like this
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
//set here all you child widgets
</LinearLayout>
</ScrollView>

My app looking weird in small sized screen

I am an android studio beginner, and here is an app I made.
How it looks in the IDE:
How it looks on my Tablet (9 inch screen):
And how it looks on my Mom's phone (6 inch screen):
As you can see, the objects are getting squished to the bottom of the screen in the case of Mom's phone, whose screen is significantly smaller than my Tablet. I used Constraint Layout to make this app. I don't understand why this happens.
I'd be pleased to give any more information if required.
Edit: Here's my XML:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<EditText
android:id="#+id/textview_number_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:ems="10"
android:hint="Enter first fraction"
android:inputType="number|text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<EditText
android:id="#+id/textview_number_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:ems="10"
android:hint="Enter second fraction"
android:inputType="number|text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textview_number_1" />
<Button
android:id="#+id/button_add"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="24dp"
android:text="Add"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textview_number_2" />
<TextView
android:id="#+id/textView_result"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:text="0"
android:textColor="#323232"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<Switch
android:id="#+id/switch_simplify"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Simplify result "
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button_divide" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="32dp"
android:gravity="center"
android:text="Fractions Calculator"
android:textColor="#673AB7"
android:textSize="30sp"
android:textStyle="bold|italic"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button_subtract"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:text="Subtract"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button_add" />
<Button
android:id="#+id/button_multiply"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:text="Multiply"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button_subtract" />
<Button
android:id="#+id/button_divide"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:text="Divide"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button_multiply" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="24dp"
android:text="Result:"
android:textColor="#000000"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/switch_simplify" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="16dp"
android:gravity="center"
android:text="This calculator only calculates fractions, and does not calculate whole numbers. Please enter the numbers only in the form a/b"
android:textColor="#323232"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView_result" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginBottom="8dp"
android:text="DK Apps"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Build v1.0.0"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Your mom's phone has a small screen so you should wrap your content in a ScrollView in order for all of it do be displayed.
<?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"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
...
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

Textview over Imageview in a fixed position

I would like to put some textviews over an image in a fixed position.
I tried using relative, contraint and frame layout but what I see in preview does not match on my device.
I tried to use px, sp and dp but it did not help.
Textviews must stay exactly in their position on every device.
Thanks
screen device and android studio layout
xml CODE ADDED:
<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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context=".b_command">
<RadioGroup
android:id="#+id/radioGroup_conn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:orientation="horizontal"
app:layout_constraintBottom_toTopOf="#+id/plancia_img"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<RadioButton
android:id="#+id/radioButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="USB" />
<RadioButton
android:id="#+id/radioButton2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Ethernet" />
</RadioGroup>
<RadioGroup
android:id="#+id/Radiogroup_cmd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/radioGroup_conn">
<RadioButton
android:id="#+id/radioButton3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Note on/off" />
<RadioButton
android:id="#+id/radioButton4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Prog Change" />
<RadioButton
android:id="#+id/radioButton5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Ctrl Change" />
</RadioGroup>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/plancia_layout"
android:layout_width="363dp"
android:layout_height="225dp"
android:layout_marginTop="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Radiogroup_cmd">
<ImageView
android:id="#+id/plancia_img"
android:layout_width="363dp"
android:layout_height="225dp"
android:contentDescription="TODO"
android:scaleType="centerCrop"
android:src="#drawable/plancia"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/val_prev"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginTop="50dp"
android:background="#FFFFFF"
android:backgroundTint="#F8F5F5"
android:gravity="center"
android:padding="2dp"
android:text="#string/basic_value"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/val_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="100dp"
android:layout_marginTop="50dp"
android:background="#FFFFFF"
android:backgroundTint="#F8F5F5"
android:gravity="center"
android:padding="2dp"
android:text="#string/basic_value"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/val_red"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="17dp"
android:layout_marginTop="160dp"
android:background="#FFFFFF"
android:backgroundTint="#F8F5F5"
android:gravity="center"
android:padding="2dp"
android:text="#string/basic_value"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/val_yellow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="102dp"
android:layout_marginTop="160dp"
android:background="#FFFFFF"
android:backgroundTint="#F8F5F5"
android:gravity="center"
android:padding="2dp"
android:text="#string/basic_value"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/val_play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="265dp"
android:layout_marginTop="160dp"
android:background="#FFFFFF"
android:backgroundTint="#F8F5F5"
android:gravity="center"
android:padding="2dp"
android:text="#string/basic_value"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/val_f1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="165dp"
android:layout_marginTop="75dp"
android:background="#FFFFFF"
android:backgroundTint="#F8F5F5"
android:gravity="center"
android:padding="2dp"
android:text="#string/basic_value"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/val_f2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="215dp"
android:layout_marginTop="75dp"
android:background="#FFFFFF"
android:backgroundTint="#F8F5F5"
android:gravity="center"
android:padding="2dp"
android:text="#string/basic_value"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/val_f3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="265dp"
android:layout_marginTop="75dp"
android:background="#FFFFFF"
android:backgroundTint="#F8F5F5"
android:gravity="center"
android:padding="2dp"
android:text="#string/basic_value"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/val_f4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="315dp"
android:layout_marginTop="75dp"
android:background="#FFFFFF"
android:backgroundTint="#F8F5F5"
android:gravity="center"
android:padding="2dp"
android:text="#string/basic_value"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

you can try screen height programmatic to your textview according to your requirement for more detailing answer elaborate your question first.

If I were you, I would use a custom view in which I would simply calculate the necessary coordinates.
https://www.vogella.com/tutorials/AndroidCustomViews/article.html

Why does Gridlayout move view out of sight at a certain point

I played around with GridView in Android a bit and there was something strange I noticed, that I could not explain.
In my XML I have an ImageView and underneath a GridView with 4 buttons:
https://s17.directupload.net/images/191020/kho7sds4.png
The code of the XML looks like this:
<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/constView"
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="550dp"
android:layout_marginStart="24dp"
android:layout_marginLeft="24dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="24dp"
android:layout_marginRight="24dp"
android:scaleType="fitCenter"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_launcher_foreground" />
<androidx.gridlayout.widget.GridLayout
android:layout_width="0dp"
android:layout_height="0dp"
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:columnCount="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:rowCount="4">
<Button
android:id="#+id/buttonChoice1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="fill"
android:text="Button"
android:textAlignment="center"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_row="0"
app:layout_rowWeight="1" />
<Button
android:id="#+id/buttonChoice2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="fill"
android:text="Button"
android:textAlignment="center"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_column="0"
app:layout_row="1"/>
<Button
android:id="#+id/buttonChoice3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="fill"
android:text="Button"
android:textAlignment="center"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_column="0"
app:layout_row="2"/>
<Button
android:id="#+id/buttonChoice4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="fill"
android:text="Button"
android:textAlignment="center"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_column="0"
app:layout_row="3"/>
</androidx.gridlayout.widget.GridLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Now when I increase the size of the picture (height:550dp), it looks like this:
https://s17.directupload.net/images/191020/qarbb8g8.png
I guess that the buttons don't have place anymore to display their text correctly, but why would Android then display the GridLayout that way? Is there any way to make this View "failsafe"?

I came up with this solution.You should change the button height property to zero then they would be scale to fit into your grid view.
<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/constView"
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="550dp"
android:layout_marginStart="24dp"
android:layout_marginLeft="24dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="24dp"
android:layout_marginRight="24dp"
android:scaleType="fitCenter"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_launcher_foreground" />
<androidx.gridlayout.widget.GridLayout
android:layout_width="0dp"
android:layout_height="0dp"
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:columnCount="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:rowCount="4">
<Button
android:id="#+id/buttonChoice1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:gravity="fill"
android:text="Button"
android:textAlignment="center"
app:layout_column="0"
app:layout_columnWeight="1"
app:layout_row="0"
app:layout_rowWeight="1" />
<Button
android:id="#+id/buttonChoice2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:gravity="fill"
android:text="Button"
android:textAlignment="center"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_column="0"
app:layout_row="1"/>
<Button
android:id="#+id/buttonChoice3"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:gravity="fill"
android:text="Button"
android:textAlignment="center"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_column="0"
app:layout_row="2"/>
<Button
android:id="#+id/buttonChoice4"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:gravity="fill"
android:text="Button"
android:textAlignment="center"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_column="0"
app:layout_row="3"/>
</androidx.gridlayout.widget.GridLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

My items are all messed up when I run the app on my phone

When I design the app in android studio everything is where it belongs. Why when I view it on my phone everything is messed up?
Studio
On phone
I use Constraint layout. I tried changing API version to an older one, but nothing happened. Does it have something to do with resolutions? I can't use emulators I need it on my phone.
Activity 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="393dp"
android:layout_height="76dp"
android:layout_marginEnd="16dp"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<Button
android:id="#+id/button8"
android:layout_width="65dp"
android:layout_height="55dp"
android:layout_marginTop="348dp"
android:layout_marginEnd="12dp"
android:layout_marginRight="12dp"
android:text="#string/button_open"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<Button
android:id="#+id/button9"
android:layout_width="65dp"
android:layout_height="55dp"
android:layout_marginTop="412dp"
android:layout_marginEnd="12dp"
android:layout_marginRight="12dp"
android:text="#string/button_open"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<View
android:id="#+id/view9"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="184dp"
android:background="#android:color/darker_gray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<View
android:id="#+id/view8"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="480dp"
android:background="#android:color/darker_gray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<View
android:id="#+id/view4"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="408dp"
android:layout_marginEnd="12dp"
android:layout_marginRight="12dp"
android:background="#android:color/darker_gray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<View
android:id="#+id/view6"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="260dp"
android:background="#android:color/darker_gray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<View
android:id="#+id/view7"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="336dp"
android:background="#android:color/darker_gray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<View
android:id="#+id/view5"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="104dp"
android:background="#android:color/darker_gray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<TextView
android:id="#+id/textView30"
android:layout_width="wrap_content"
android:layout_height="14dp"
android:layout_marginTop="448dp"
android:layout_marginEnd="244dp"
android:layout_marginRight="244dp"
android:text="#string/inbox_text6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<TextView
android:id="#+id/textView29"
android:layout_width="wrap_content"
android:layout_height="14dp"
android:layout_marginTop="156dp"
android:layout_marginEnd="188dp"
android:layout_marginRight="188dp"
android:text="#string/inbox_text2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<TextView
android:id="#+id/textView28"
android:layout_width="wrap_content"
android:layout_height="14dp"
android:layout_marginTop="376dp"
android:layout_marginEnd="244dp"
android:layout_marginRight="244dp"
android:text="#string/inbox_text5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<TextView
android:id="#+id/textView22"
android:layout_width="75dp"
android:layout_height="27dp"
android:layout_marginTop="352dp"
android:layout_marginEnd="324dp"
android:layout_marginRight="324dp"
android:text="#string/inbox_title5"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<TextView
android:id="#+id/textView23"
android:layout_width="75dp"
android:layout_height="27dp"
android:layout_marginTop="416dp"
android:layout_marginEnd="324dp"
android:layout_marginRight="324dp"
android:text="#string/inbox_title6"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<TextView
android:id="#+id/textView18"
android:layout_width="75dp"
android:layout_height="27dp"
android:layout_marginTop="272dp"
android:layout_marginEnd="324dp"
android:layout_marginRight="324dp"
android:text="#string/inbox_title4"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<TextView
android:id="#+id/textView19"
android:layout_width="173dp"
android:layout_height="34dp"
android:layout_marginTop="120dp"
android:layout_marginEnd="228dp"
android:layout_marginRight="228dp"
android:text="#string/inbox_title2"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<TextView
android:id="#+id/textView20"
android:layout_width="75dp"
android:layout_height="27dp"
android:layout_marginTop="208dp"
android:layout_marginEnd="324dp"
android:layout_marginRight="324dp"
android:text="#string/inbox_title3"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<TextView
android:id="#+id/textView21"
android:layout_width="137dp"
android:layout_height="30dp"
android:layout_marginTop="48dp"
android:layout_marginEnd="264dp"
android:layout_marginRight="264dp"
android:text="#string/inbox_title1"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<TextView
android:id="#+id/textView24"
android:layout_width="wrap_content"
android:layout_height="14dp"
android:layout_marginTop="300dp"
android:layout_marginEnd="256dp"
android:layout_marginRight="256dp"
android:text="#string/inbox_text4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<TextView
android:id="#+id/textView27"
android:layout_width="wrap_content"
android:layout_height="14dp"
android:layout_marginTop="232dp"
android:layout_marginEnd="260dp"
android:layout_marginRight="260dp"
android:text="#string/inbox_text3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<TextView
android:id="#+id/textView26"
android:layout_width="wrap_content"
android:layout_height="14dp"
android:layout_marginTop="80dp"
android:layout_marginEnd="216dp"
android:layout_marginRight="216dp"
android:text="#string/inbox_text1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<Button
android:id="#+id/button5"
android:layout_width="65dp"
android:layout_height="55dp"
android:layout_marginTop="196dp"
android:layout_marginEnd="12dp"
android:layout_marginRight="12dp"
android:text="#string/button_open"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<Button
android:id="#+id/button6"
android:layout_width="65dp"
android:layout_height="55dp"
android:layout_marginTop="268dp"
android:layout_marginEnd="12dp"
android:layout_marginRight="12dp"
android:text="#string/button_open"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar" />
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:weightSum="4">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Search" />
<Button
android:layout_width="52dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Refresh" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="goToAnActivity"
android:text="Send" />
</LinearLayout>
</RelativeLayout>
</android.support.constraint.ConstraintLayout>

In Android, you need to consider the number of different screen sizes when developing an android application.
Different phones got different screen size, in your layout you are using fixed size on your view (fixed size is 50dp for example) and the result is that what may look good on one screen (your android studio preview screen) will not look good on another screen (your actual phone).
So what can you do to support different screen sizes?
You can fix this by creating a single layout for every screen size but that's a lot of work.
You can also define Relative Layout with android:weightSum and layout_weight
But there is an even better option:
Use ConstraintLayout with guidelines and Chains to support different screen sizes.
From the documentation:
The best way to create a responsive layout for different screen sizes is to use ConstraintLayout as the base layout in your UI. ConstraintLayout allows you to specify the position and size for each view according to spatial relationships with other views in the layout. This way, all the views can move and stretch together as the screen size changes.
And here is an example of a similar layout like you want to achieve:
<?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/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline7" />
<TextView
android:id="#+id/textView4"
android:layout_width="62dp"
android:layout_height="19dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView9"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<TextView
android:id="#+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView10"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<TextView
android:id="#+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView11"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView9" />
<TextView
android:id="#+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView12"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView10" />
<TextView
android:id="#+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView13"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView11" />
<TextView
android:id="#+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView14"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView12" />
<TextView
android:id="#+id/textView14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView15"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView13" />
<TextView
android:id="#+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView16"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView14" />
<TextView
android:id="#+id/textView16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView18"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView15" />
<TextView
android:id="#+id/textView17"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView18" />
<TextView
android:id="#+id/textView18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView17"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView16" />
<android.support.constraint.Guideline
android:id="#+id/guideline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.8" />
<android.support.constraint.Guideline
android:id="#+id/guideline7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.1" />
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="search"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button10"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline6" />
<Button
android:id="#+id/button10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="rfreshe"
app:layout_constraintBottom_toBottomOf="#+id/button9"
app:layout_constraintEnd_toStartOf="#+id/button11"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/button9"
app:layout_constraintTop_toTopOf="#+id/button9" />
<Button
android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="send"
app:layout_constraintBottom_toBottomOf="#+id/button10"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/button10"
app:layout_constraintTop_toTopOf="#+id/button10" />
<Button
android:id="#+id/button12"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="open"
app:layout_constraintBottom_toBottomOf="#+id/textView17"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView18" />
<Button
android:id="#+id/button13"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="open"
app:layout_constraintBottom_toBottomOf="#+id/textView16"
app:layout_constraintEnd_toEndOf="#+id/button12"
app:layout_constraintTop_toTopOf="#+id/textView15" />
<Button
android:id="#+id/button14"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="open"
app:layout_constraintBottom_toBottomOf="#+id/textView14"
app:layout_constraintEnd_toEndOf="#+id/button12"
app:layout_constraintTop_toTopOf="#+id/textView13" />
<Button
android:id="#+id/button15"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="open"
app:layout_constraintBottom_toBottomOf="#+id/textView12"
app:layout_constraintEnd_toEndOf="#+id/button14"
app:layout_constraintTop_toBottomOf="#+id/textView11" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/textView9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/textView18"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView16" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/textView11"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView10" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/textView13"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView12" />
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/textView15"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView14" />
<Button
android:id="#+id/button7"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView17" />
<Button
android:id="#+id/button8"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView17" />
<Button
android:id="#+id/button16"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/guideline6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView17" />
</android.support.constraint.ConstraintLayout>
The result will look like this in the preview and on a real device:
And if you survived reading that long answer (I know, its long, who would read all of this?)
Here is something extra
Now, I know that at first look this may look like a lot of work and some may wonder if this is really worth the effort but here is why I believe ConstraintLayout is the proper way to build your UI:
It's really user-friendly.
ConstraintLayout is very easy and simple to learn.
once you have learned it you will see that you are saving a lot of development time because making your UI is simply fast.
Constraint layout is meant to support different screen sizes so no need to build a layout for every screen size (this also connect to the previous advantage- saving development time).
So happy coding, I hope that I could help with my answer.