Develop Reference

how can I put empty space between password and register button in my constrainlayout

I am developing android app and I have implemented constrainlayout but in real device password edit text and register button overlapping to each other I want to empty space between them how can achieve that
below my currentlayout
<?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:background="#color/white">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="100dp"
android:background="#drawable/circle_back"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_person">
<ImageView
android:id="#+id/person_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/empty"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_person" />
</androidx.constraintlayout.widget.ConstraintLayout>
<EditText
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="16dp"
android:hint="#string/firstname"
style="#style/textFieldStyle"
android:inputType="textEmailAddress"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout"
tools:ignore="RtlSymmetry"
android:autofillHints="" />
<EditText
android:id="#+id/email"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
style="#style/textFieldStyle"
android:hint="#string/email"
android:inputType="textEmailAddress"
app:layout_constraintEnd_toEndOf="#+id/name"
app:layout_constraintStart_toStartOf="#+id/name"
app:layout_constraintTop_toBottomOf="#+id/lastName"
tools:ignore="TextFields" />
<Button
android:id="#+id/registration"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginBottom="40dp"
android:backgroundTint="#color/gray"
android:fontFamily="#font/roboto_black"
android:padding="16dp"
android:text="#string/register"
app:layout_constraintBottom_toTopOf="#+id/already_have_account"
app:layout_constraintEnd_toEndOf="#+id/password"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/already_have_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:text="#string/already_have_an_account"
android:textColor="#color/primaryBlack"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.33"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:text="#string/login"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.73"
app:layout_constraintStart_toStartOf="parent" />
<EditText
android:id="#+id/password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:hint="#string/password"
android:inputType="textPassword"
style="#style/textFieldStyle"
app:layout_constraintEnd_toEndOf="#+id/email"
app:layout_constraintStart_toStartOf="#+id/email"
app:layout_constraintTop_toBottomOf="#+id/email" />
<EditText
android:id="#+id/lastName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
style="#style/textFieldStyle"
android:hint="#string/lastName"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="#+id/name"
app:layout_constraintStart_toStartOf="#+id/name"
app:layout_constraintTop_toBottomOf="#+id/name" />
</androidx.constraintlayout.widget.ConstraintLayout>
following screenshot in real device I want to know what I have to do in order to put space between password and register button
but I want to see in real device as if you see there space between password and register button

Add a constraint from the top of the register button to the bottom of the password field. Every element should have a top and bottom constraint to not overlap another element that is above or below it.

When you do something like android:layout_marginBottom="40dp", you will eventually get some views overlapping and that's because you are using hardcoded values, you want to adjust your views to the size of your screen in a responsive way.
You can do it using Guidelines, app:layout_constraintHeight_percent="0.xx" and chain verticly your views:
Inside you constarintLayout (I have used a single layout)
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/editTextTextPersonName"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintHeight_percent="0.25"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/guideline3"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/backgrounds/scenic" />
<EditText
android:id="#+id/editTextTextPersonName"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.07"
android:ems="10"
android:inputType="textPersonName"
android:text="FirstName"
app:layout_constraintBottom_toTopOf="#+id/editTextTextPersonName2"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintStart_toStartOf="#+id/guideline3"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<EditText
android:id="#+id/editTextTextPersonName2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.07"
android:ems="10"
android:inputType="textPersonName"
android:text="LastName"
app:layout_constraintBottom_toTopOf="#+id/editTextTextPersonName3"
app:layout_constraintEnd_toEndOf="#+id/editTextTextPersonName"
app:layout_constraintStart_toStartOf="#+id/editTextTextPersonName"
app:layout_constraintTop_toBottomOf="#+id/editTextTextPersonName" />
<EditText
android:id="#+id/editTextTextPersonName3"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.07"
android:ems="10"
android:inputType="textPersonName"
android:text="Email"
app:layout_constraintBottom_toTopOf="#+id/editTextTextPersonName4"
app:layout_constraintEnd_toEndOf="#+id/editTextTextPersonName"
app:layout_constraintStart_toStartOf="#+id/editTextTextPersonName"
app:layout_constraintTop_toBottomOf="#+id/editTextTextPersonName2" />
<EditText
android:id="#+id/editTextTextPersonName4"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.07"
android:ems="10"
android:inputType="textPersonName"
android:text="Password"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toEndOf="#+id/editTextTextPersonName"
app:layout_constraintStart_toStartOf="#+id/editTextTextPersonName"
app:layout_constraintTop_toBottomOf="#+id/editTextTextPersonName3" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.07"
android:text="Register"
app:layout_constraintBottom_toTopOf="#+id/guideline2"
app:layout_constraintEnd_toEndOf="#+id/editTextTextPersonName4"
app:layout_constraintStart_toStartOf="#+id/editTextTextPersonName4"
app:layout_constraintTop_toBottomOf="#+id/editTextTextPersonName4" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.85" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Already have account?"
app:layout_constraintBottom_toBottomOf="#+id/textView2"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView2" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Log in"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toTopOf="#+id/guideline2" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
app:layout_constraintGuide_percent="0.05"
android:layout_height="wrap_content"
android:orientation="vertical" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintGuide_percent="0.95"
android:orientation="vertical" />
It will look like this (arrows pointing to the guidelines):

Adding app:layout_constraintTop_toBottomOf.
<Button
android:id="#+id/registration"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginBottom="40dp"
android:backgroundTint="#color/gray"
android:fontFamily="#font/roboto_black"
android:padding="16dp"
android:text="#string/register"
app:layout_constraintBottom_toTopOf="#+id/already_have_account"
app:layout_constraintEnd_toEndOf="#+id/password"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/password" />
Adding app:layout_constraintBottom_toTopOf="#id/registration"
<EditText
android:id="#+id/password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:hint="#string/password"
android:inputType="textPassword"
style="#style/textFieldStyle"
app:layout_constraintEnd_toEndOf="#+id/email"
app:layout_constraintStart_toStartOf="#+id/email"
app:layout_constraintTop_toBottomOf="#+id/email"
app:layout_constraintBottom_toTopOf="#id/registration" />
The above solution works only when all of your views are within a single screen. If height of the View is bigger than the screen, then you may need ScrollView or other method.
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white">
... your main content here ...
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</ScrollView>
Adding ScrollView and LinearLayout outside your main content ConstraintLayout solves the overlapping issue, and allow bigger view to scroll on smaller view.

Try increasing the margin_botton of the password field and also decreasing margin_botton of the Button.

The Problem is that your register button is bottom aligned, while the above elements are top aligned, which means they will overlap on smaller screens.
Try updating your Register button in the following way to enforce a minimum top margin with the password field if there is too little space (I just added a constraint to the password field, set constraintVerticalbias to 1.0 and set a topMargin):
<Button
android:id="#+id/registration"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="ENTER YOUR TOP MARGIN HERE"
android:layout_marginBottom="40dp"
android:backgroundTint="#color/gray"
android:fontFamily="#font/roboto_black"
android:padding="16dp"
android:text="#string/register"
app:layout_constraintBottom_toTopOf="#+id/already_have_account"
app:layout_constraintEnd_toEndOf="#+id/password"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/password"
app:layout_constraintVertical_bias="1.0" />
IMPORTANT: To make this work you need to wrap your screen in a Scrollview with android:fillViewport="true".
Here would be your whole layout reworked so that it should work (with registerbutton minimum top margin of 40dp):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/constraintLayout"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="100dp"
android:background="#drawable/circle_back"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_person">
<ImageView
android:id="#+id/person_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/empty"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_person" />
</LinearLayout>
<EditText
android:id="#+id/name"
style="#style/textFieldStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="16dp"
android:autofillHints=""
android:hint="#string/firstname"
android:inputType="textEmailAddress"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout"
tools:ignore="RtlSymmetry" />
<EditText
android:id="#+id/email"
style="#style/textFieldStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:hint="#string/email"
android:inputType="textEmailAddress"
app:layout_constraintEnd_toEndOf="#+id/name"
app:layout_constraintStart_toStartOf="#+id/name"
app:layout_constraintTop_toBottomOf="#+id/lastName"
tools:ignore="TextFields" />
<Button
android:id="#+id/registration"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="40dp"
android:layout_marginBottom="40dp"
android:backgroundTint="#color/gray"
android:fontFamily="#font/roboto_black"
android:padding="16dp"
android:text="#string/register"
app:layout_constraintBottom_toTopOf="#+id/already_have_account"
app:layout_constraintEnd_toEndOf="#+id/password"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/password"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/already_have_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:text="#string/already_have_an_account"
android:textColor="#color/primaryBlack"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.33"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:text="#string/login"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.73"
app:layout_constraintStart_toStartOf="parent" />
<EditText
android:id="#+id/password"
style="#style/textFieldStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:hint="#string/password"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="#+id/email"
app:layout_constraintStart_toStartOf="#+id/email"
app:layout_constraintTop_toBottomOf="#+id/email" />
<EditText
android:id="#+id/lastName"
style="#style/textFieldStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:hint="#string/lastName"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="#+id/name"
app:layout_constraintStart_toStartOf="#+id/name"
app:layout_constraintTop_toBottomOf="#+id/name" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</LinearLayout>

Impossible to disable click on datepicker

I would like to disable the click on a datepicker in my layout but I can't find the attribute to edit to disable the click.
I tried to set clickable to false, focusable to false but nothing seems to work. I can always click on it and set a date.
I have an event on my fab button that enable and disable my edittext and checkedit and it's working perfectly.
I just can't get to disable the datepicker
Here is the xml of my activity :
<?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:background="#color/cardview_light_background"
tools:context=".ui.detail.DetailFoodActivity">
<EditText
android:id="#+id/detailFoodName"
style="#style/Base.Widget.MaterialComponents.TextInputEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:ems="10"
android:enabled="false"
android:focusable="true"
android:inputType="textPersonName"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textSize="28dp"
android:typeface="serif"
android:visibility="invisible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/detailTextDate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="18dp"
android:layout_marginTop="16dp"
android:text="TextView"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
app:layout_constraintEnd_toEndOf="#+id/detailFoodName"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/detailFoodName" />
<DatePicker
android:id="#+id/detailDatePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:clickable="false"
android:datePickerMode="calendar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/detailTextDate" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/action_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:clickable="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#drawable/ic_edit_white_24dp" />
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="18dp"
android:layout_marginTop="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/detailDatePicker">
<RadioButton
android:id="#+id/radioButtonEaten"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="false"
android:text="Eaten" />
<RadioButton
android:id="#+id/radioButtonBin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="false"
android:text="At the bin" />
</RadioGroup>
<TextView
android:id="#+id/detailTextViewName"
android:layout_width="0dp"
android:layout_height="70dp"
android:layout_marginTop="8dp"
android:lineSpacingExtra="0dp"
android:paddingStart="20dp"
android:paddingTop="16dp"
android:text="TextView"
android:textAlignment="viewStart"
android:textAllCaps="false"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textSize="28dp"
android:typeface="serif"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
If anyone knows how to disable it
Thank you

You can enable/disable it by using setEnabled() properties of DatePicker Control
setEnabled(true)
setEnabled(false)
Here's a link of android document for more reference

Why do the buttons goes up?

So I programmed a simple app with android studio and the layout that is shown in the app when I run it is different than the xml file I designed.
Here is a link of an image of the problem.
https://imgur.com/6JIHSQ7
<?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">
<Button
android:id="#+id/subBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/subBtn"
android:textSize="30sp"
app:layout_constraintBaseline_toBaselineOf="#+id/addBtn"
app:layout_constraintStart_toStartOf="#+id/divBtn" />
<Button
android:id="#+id/addBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="36dp"
android:layout_marginLeft="36dp"
android:layout_marginBottom="42dp"
android:text="#string/addBtn"
android:textSize="30sp"
app:layout_constraintBottom_toTopOf="#+id/multBtn"
app:layout_constraintStart_toEndOf="#+id/subBtn" />
<EditText
android:id="#+id/n1EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="56dp"
android:ems="10"
android:hint="#string/number1"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.444"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/n2EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="39dp"
android:ems="10"
android:hint="#string/number2"
android:inputType="textPersonName"
app:layout_constraintStart_toStartOf="#+id/n1EditText"
app:layout_constraintTop_toBottomOf="#+id/n1EditText" />
<Button
android:id="#+id/multBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="108dp"
android:layout_marginRight="108dp"
android:layout_marginBottom="336dp"
android:text="#string/multBtn"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<Button
android:id="#+id/divBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="88dp"
android:layout_marginLeft="88dp"
android:layout_marginBottom="336dp"
android:text="#string/divBtn"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/resultTextView"
android:layout_width="174dp"
android:layout_height="73dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#color/colorPrimaryDark"
android:text="#string/resultView"
android:textColor="#color/colorPrimary"
android:textSize="50sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.455"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/n2EditText"
app:layout_constraintVertical_bias="0.637" />
</androidx.constraintlayout.widget.ConstraintLayout>
I think it might be related to the virtual device i'm using but I don't know if that's the problem.

The problem is, your addBtn and subBtn are not aware of the n2EditText. The addBtn depends on the divBtn and the divBtn is placed 336dp above the bottom edge of the screen.
If you need the addBtn to appear below the n2EditText then you need to add a vertical constraint connecting to the n2EditText. Once your buttons are connected to their immediate top elements, you don't need to add the bottom constraint to the bottom edge of the screen.
Imagine a ConstraintLayout as a collection of widgets hanging down from the top of the screen, each tied to the immediately top elements with the chains called "constraints". You don't need to tie the bottom widget to the ground unless it is required by design.
Here is the modified 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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/subBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-"
android:textSize="30sp"
android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="#+id/n2EditText"
app:layout_constraintStart_toStartOf="#+id/n2EditText"/>
<Button
android:id="#+id/addBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+"
android:textSize="30sp"
app:layout_constraintStart_toEndOf="#+id/subBtn"
app:layout_constraintTop_toTopOf="#+id/subBtn"
android:layout_marginStart="16dp"/>
<EditText
android:id="#+id/n1EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="56dp"
android:ems="10"
android:hint="n1"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/n2EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:ems="10"
android:hint="n2"
android:inputType="textPersonName"
app:layout_constraintStart_toStartOf="#+id/n1EditText"
app:layout_constraintTop_toBottomOf="#+id/n1EditText"/>
<Button
android:id="#+id/multBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="*"
android:textSize="30sp"
app:layout_constraintStart_toEndOf="#+id/divBtn"
android:layout_marginStart="16dp"
app:layout_constraintTop_toTopOf="#+id/divBtn"/>
<Button
android:id="#+id/divBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="/"
android:textSize="30sp"
app:layout_constraintStart_toStartOf="#+id/subBtn"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/subBtn"/>
<TextView
android:id="#+id/resultTextView"
android:layout_width="174dp"
android:layout_height="73dp"
android:layout_marginBottom="8dp"
android:background="#color/colorPrimaryDark"
android:text="res"
android:textColor="#color/colorPrimary"
android:textSize="50sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="8dp" app:layout_constraintTop_toBottomOf="#+id/divBtn"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Anyway, when you have a lot of widgets, you may have to use a ScrollView to accommodate them all.

Try this
<?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">
<Button
android:id="#+id/subBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="52dp"
android:layout_marginEnd="25dp"
android:layout_marginRight="25dp"
android:text="submit"
android:textSize="30sp"
app:layout_constraintEnd_toStartOf="#+id/addBtn"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/n2EditText" />
<Button
android:id="#+id/addBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="52dp"
android:text="add"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/subBtn"
app:layout_constraintTop_toBottomOf="#+id/n2EditText" />
<EditText
android:id="#+id/n1EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="52dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:ems="10"
android:hint="1"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.439"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/n2EditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="2dp"
android:layout_marginLeft="2dp"
android:layout_marginTop="36dp"
android:ems="10"
android:hint="2"
android:inputType="textPersonName"
app:layout_constraintStart_toStartOf="#+id/n1EditText"
app:layout_constraintTop_toBottomOf="#+id/n1EditText" />
<Button
android:id="#+id/multBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="44dp"
android:text="mult"
android:textSize="30sp"
app:layout_constraintStart_toEndOf="#+id/subBtn"
app:layout_constraintTop_toBottomOf="#+id/addBtn" />
<Button
android:id="#+id/divBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="44dp"
android:layout_marginEnd="48dp"
android:layout_marginRight="48dp"
android:text="div"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="#+id/subBtn"
app:layout_constraintTop_toBottomOf="#+id/subBtn" />
<TextView
android:id="#+id/resultTextView"
android:layout_width="174dp"
android:layout_height="73dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="48dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:background="#color/colorPrimaryDark"
android:text="resultView"
android:textColor="#color/colorPrimary"
android:textSize="50sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.547"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/divBtn" />
</androidx.constraintlayout.widget.ConstraintLayout>

Probably on your layout editor and phone screen sizes are different. Use ConstraintLayout or some other add constraints to views

I cannot say definitly just looking at image but i think you are using facing problem because of your layout. Use LinearLayout to fix it.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical" />
<!-- EditText: number1 -->
<!-- EditText Number2 -->
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- 2 Buttons here -->
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- 2 Buttons here -->
</LinearLayout>
</LinearLayout>

Some general tips that can help:
Check the constraints if you're using ConstraintLayout or relatives between view if you're using RelativeLayout;
Check the values and the units of views;
Check the screen resolution of your "Preview" pane and Emulator.
If it's possible to provide some additional information about the layout that is used, if these tips didn't help.
In preview pane you can find info about resolutions here:
In the emulator pane you can simple see the sizes in the column:

All items in constraint layout move to top left

In my emulator on Android Studio the layout looks as it should. However, when I run it on my device, everything moves to the Top Left. This fragment launches as the login screen when a user is not signed in.
Thank you for any help.
The xml is below:
<TextView
android:id="#+id/LoginTitle"
style="#style/LoginTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="#string/app_name"
android:textAllCaps="true"
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.15" />
<android.support.design.widget.TextInputLayout
android:id="#+id/emailET"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="40dp"
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.4">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:hint="...."
android:inputType="textEmailAddress" />
</android.support.design.widget.TextInputLayout>
....
<Button
android:id="#+id/Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_rectangle_button"
android:text="...."
android:textColor="#color/colorPrimary"
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.75" />

Unable to make a ScrollView that contains other layouts and widgets

I am simply trying to make a scrollable layout with no luck...
I have no idea why it isn't working, it seems to be exactly as I read online.
The problem here is that the bottom of the included layout is cut of to fit exactly the screen size.
this is my layout xml:
<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=""
tools:layout_editor_absoluteY="81dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="opening game"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<NumberPicker
android:id="#+id/numberPicker2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="14dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toTopOf="#+id/GameTitleET"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<EditText
android:id="#+id/GameTitleET"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="153dp"
android:ems="10"
android:hint="Game's name"
android:inputType="textPersonName"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/GameContentET"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="מהלך המשחק"
android:inputType="textMultiLine"
android:maxLines="8"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/DeleteAndMakeYOurOwnButton" />
<Button
android:id="#+id/DeleteAndMakeYOurOwnButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
android:text="Write your own game"
app:layout_constraintStart_toStartOf="#+id/GameContentET"
app:layout_constraintTop_toBottomOf="#+id/numberPicker2" />
<Switch
android:id="#+id/SendToReviewSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="7dp"
android:layout_marginStart="16dp"
android:text="הגש משחק להגשה"
app:layout_constraintBottom_toTopOf="#+id/DeleteAndMakeYOurOwnButton"
app:layout_constraintStart_toStartOf="parent" />
<include
android:id="#+id/include5"
layout="#layout/activity_create_post_methods"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/GameContentET" />
</android.support.constraint.ConstraintLayout></ScrollView>
Do you have any suggestion of what should i do? I also plan to add many more layouts to this main layout and I need it to scroll and show everything flawlessly.
Thank you a lot!