Develop Reference

Android studio AVD glitch

I am new to android studio. Literally its my first day on the software. I am having issue with AVD Screen
I have used the default pixel 3 avd to run the apk but here is the problem:-
SO here is the
Output and here is the
Input
. I am sorry if it has any silly mistake but please help me it will make my day ❤
<?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="#454545"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="385dp"
android:layout_height="41dp"
android:layout_marginTop="16dp"
android:fontFamily="#font/black_ops_one"
android:shadowColor="#70000000"
android:shadowDx="10"
android:shadowDy="5"
android:shadowRadius="1"
android:text=" Sumant Dusane"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#FFFFFF"
android:textSize="25sp"
android:textStyle="bold"
android:translationZ="5dp"
android:typeface="normal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="295dp"
android:layout_height="0dp"
android:layout_marginStart="3dp"
android:layout_marginLeft="3dp"
android:layout_marginTop="3dp"
android:layout_marginEnd="35dp"
android:layout_marginRight="35dp"
android:layout_marginBottom="435dp"
android:alpha="0.2"
android:background="#FFFFFF"
android:scaleX="15"
android:translationZ="4dp"
app:layout_constraintBottom_toTopOf="#+id/imageView5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/textView"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/marble_texture" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="447dp"
android:layout_height="799dp"
android:alpha="0.5"
android:scaleY="1.9"
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="1.0"
app:srcCompat="#drawable/matte_painitng_corrected__main" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="41dp"
android:layout_marginLeft="41dp"
android:layout_marginEnd="29dp"
android:layout_marginRight="29dp"
android:layout_marginBottom="18dp"
app:layout_constraintBottom_toTopOf="#+id/imageView6"
app:layout_constraintEnd_toStartOf="#+id/textView4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:srcCompat="#drawable/instagram" />
<TextView
android:id="#+id/textView4"
android:layout_width="219dp"
android:layout_height="42dp"
android:layout_marginEnd="18dp"
android:layout_marginRight="18dp"
android:fontFamily="#font/frank_ruhl_libre_medium"
android:text="#s.u.m.a.n.t_8282"
android:textColor="#FFFFFF"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="#+id/imageView5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView5"
app:layout_constraintTop_toTopOf="#+id/imageView5" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="49dp"
android:layout_marginLeft="49dp"
android:layout_marginEnd="29dp"
android:layout_marginRight="29dp"
android:layout_marginBottom="57dp"
app:layout_constraintBottom_toTopOf="#+id/textView6"
app:layout_constraintEnd_toStartOf="#+id/textView5"
app:layout_constraintHorizontal_bias="0.52"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView5"
app:srcCompat="#drawable/linkedin" />
<TextView
android:id="#+id/textView5"
android:layout_width="210dp"
android:layout_height="31dp"
android:layout_marginEnd="26dp"
android:layout_marginRight="26dp"
android:fontFamily="#font/frank_ruhl_libre_medium"
android:lineSpacingExtra="5sp"
android:text="Sumant Dusane"
android:textColor="#FFFFFF"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="#+id/imageView6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView6"
app:layout_constraintTop_toTopOf="#+id/imageView6" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="106dp"
android:text="Follow for more !!"
android:textColor="#FFFFFF"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView6" />
</android.support.constraint.ConstraintLayout>

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

Position of views in emulator is different from the layout

The position of widgets in my emulator is changing even though I change the margins it's still in different positions.
How can I fix it? My XML code doesn't seem to match with the UI, the other layouts seem to be okay and this is the only layout I have a problem with.
Thanks for your help :)
Here is my xml code:
<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="#drawable/bg"
tools:context=".LoadingScreen"
tools:layout_editor_absoluteY="25dp">
<TextView
android:id="#+id/scissors"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="172dp"
android:layout_marginEnd="30dp"
android:fontFamily="#font/bungee_inline"
android:text="#string/scissors"
android:textColor="#color/colorPrimary"
android:textSize="60sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:id="#+id/rock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="17dp"
android:layout_marginEnd="19dp"
android:fontFamily="#font/bungee_inline"
android:text="#string/rock"
android:textColor="#color/colorPrimaryDark"
android:textSize="60sp"
app:layout_constraintBottom_toTopOf="#+id/paper"
app:layout_constraintEnd_toEndOf="#+id/paper" />
<TextView
android:id="#+id/paper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="49dp"
android:fontFamily="#font/bungee_inline"
android:text="#string/paper"
android:textColor="#android:color/holo_red_light"
android:textSize="60sp"
[![enter image description here][1]][1]app:layout_constraintBottom_toTopOf="#+id/scissors"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="59dp"
android:text="#string/press_start"
android:textColor="#color/colorPrimary"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
and here is my layout and emulator images:

there is only little problem in your layout, which is you have used margin properties in inconsistent way. For Ex, layout_marginRight="19dp" will need some more space than some other device according to their device configurations and size.
so, you should have to use your layout like 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#001235">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="ROCK"
android:textColor="#android:color/white"
android:textSize="40sp"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="PAPER"
android:textColor="#android:color/white"
android:textSize="40sp"
app:layout_constraintBottom_toTopOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="SCISSOR"
android:textColor="#android:color/white"
android:textSize="40sp"
app:layout_constraintBottom_toTopOf="#+id/textView4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="<<Press to Start>>"
android:textColor="#android:color/white"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
</android.support.constraint.ConstraintLayout>
this will work nearly equal in almost all devices. always try to provide the attributes value dynamic instead of static as much as it is possible

Your constraints are bad, here You have some example for Your view how to set them:
<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/rock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="rock"
app:layout_constraintBottom_toTopOf="#+id/paper"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed"
/>
<TextView
android:id="#+id/paper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="paper"
android:textColor="#android:color/holo_red_light"
app:layout_constraintBottom_toTopOf="#+id/scissors"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/rock"
app:layout_constraintVertical_chainStyle="packed"
/>
<TextView
android:id="#+id/scissors"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="scisors"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/paper"
app:layout_constraintVertical_chainStyle="packed"
/>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="60dp"
android:text="press_start"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>
</android.support.constraint.ConstraintLayout>
Then add some margins to fit your layout

Android Dialog keeps fidgeting - won't remain one size

I have a pop-up dialog that is prompted by a button. I recently added a few more categories to be displayed on the screen, and now the dialog is behaving strangely. After I click the prompt, the dialog pops up, but it doesn't remain still; instead, it repeatedly gets thinner then wider, and just moving quickly back and forth. Has anyone else encountered this? Here is the XML code for the pop-up:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/productName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:text="TEST"
android:gravity="center"
android:textSize="25sp"
android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="#+id/productImage" />
<TextView
android:id="#+id/category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Category"
android:textSize="20sp"
android:gravity="center"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="#+id/productName" />
<TextView
android:id="#+id/size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:text="size"
app:layout_constraintRight_toLeftOf="#+id/powerType"
android:layout_marginRight="8dp"
app:layout_constraintTop_toTopOf="#+id/powerType"
android:layout_marginTop="0dp" />
<TextView
android:id="#+id/horsepower"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="horsepower"
android:gravity="left"
app:layout_constraintLeft_toRightOf="#+id/voltage"
android:layout_marginLeft="8dp"
app:layout_constraintTop_toTopOf="#+id/voltage"
android:layout_marginTop="0dp" />
<TextView
android:id="#+id/powerType"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="power type"
android:gravity="left"
android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="#+id/category"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="#+id/category"
android:layout_marginRight="0dp"
app:layout_constraintRight_toRightOf="#+id/category"
app:layout_constraintHorizontal_bias="0.473" />
<TextView
android:id="#+id/expProof"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="exp Proof"
android:gravity="left"
app:layout_constraintLeft_toRightOf="#+id/powerType"
android:layout_marginLeft="8dp"
app:layout_constraintTop_toTopOf="#+id/powerType"
android:layout_marginTop="0dp" />
<TextView
android:id="#+id/psi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="PSI"
android:gravity="left"
app:layout_constraintRight_toLeftOf="#+id/gpm"
android:layout_marginRight="8dp"
android:layout_marginTop="0dp"
app:layout_constraintTop_toTopOf="#+id/gpm" />
<TextView
android:id="#+id/gpm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="GPM"
android:gravity="left"
android:layout_marginTop="24dp"
app:layout_constraintTop_toBottomOf="#+id/voltage"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="#+id/voltage"
android:layout_marginRight="0dp"
app:layout_constraintRight_toRightOf="#+id/voltage"
app:layout_constraintHorizontal_bias="0.0" />
<TextView
android:id="#+id/rpm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RPM"
android:gravity="left"
app:layout_constraintLeft_toRightOf="#+id/gpm"
android:layout_marginLeft="8dp"
app:layout_constraintTop_toTopOf="#+id/gpm"
android:layout_marginTop="0dp" />
<TextView
android:id="#+id/price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Price"
android:textSize="20sp"
android:gravity="center"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="24dp"
app:layout_constraintTop_toBottomOf="#+id/gpm" />
<Button
android:id="#+id/closeDetails"
android:layout_width="#dimen/popUpDetailSections"
android:layout_height="41dp"
android:text="#string/okayButton"
android:gravity="left"
android:textSize="15sp"
android:backgroundTint="#color/colorPrimary"
android:textColor="#color/white"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="32dp"
app:layout_constraintTop_toBottomOf="#+id/price" />
<ImageView
android:id="#+id/productImage"
android:layout_width="200dp"
android:layout_height="124dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:srcCompat="#drawable/exp_proof_pump_skid"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="16dp" />
<TextView
android:id="#+id/voltage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="voltage"
android:gravity="left"
android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="#+id/powerType"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="#+id/powerType"
android:layout_marginRight="0dp"
app:layout_constraintRight_toRightOf="#+id/powerType"
app:layout_constraintHorizontal_bias="0.0" />
<TextView
android:id="#+id/phase"
android:layout_width="wrap_content"
android:layout_height="16dp"
android:text="phase"
android:gravity="left"
app:layout_constraintRight_toLeftOf="#+id/voltage"
android:layout_marginRight="8dp"
app:layout_constraintTop_toTopOf="#+id/voltage"
android:layout_marginTop="0dp" />
</android.support.constraint.ConstraintLayout>
https://i.stack.imgur.com/3scVl.png <- this is a screenshot of the dialog. So the boundaries keep expanding and compressing, and the text keeps moving too.

try this
Window window = customDialog.getWindow();
window.setLayout(WindowManager.LayoutParams.MATCH_PARENT,WindowManager.LayoutParams.WRAP_CONTENT);