We Keep Coding

What am I doing wrong: Constraintlayout inside ScrollView in Android Studio not scrolling to the end

I am not sure what I am doing wrong. I have read most of the samples I could find on YouTube and other places and tried the solutions they gave, but have not been able to resolve my issue.
The issue is that I am using ConstraintLayout inside ScrollView. I try to scroll, it does not really scroll at all. Therefore, some elements at the bottom are not shown. Below is my code. What am I doing wrong?
The below code is edited to include the corrections given and it is still not working. I really appreciate you suggestions and your intentions to help.
<?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:id="#+id/scrolvw"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:fitsSystemWindows="false"
android:scrollbars="vertical"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constLay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".RegisterActivity">
<ImageView
android:id="#+id/regAppLogo"
android:layout_width="0dp"
android:layout_height="0dp"
android:contentDescription="#string/fambuk_logo"
app:layout_constraintBottom_toTopOf="#+id/firstNameInputLayout"
app:layout_constraintDimensionRatio="3:0.45"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/fambuklogo"
tools:ignore="ImageContrastCheck" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/firstNameInputLayout"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="280dp"
android:layout_height="48dp"
android:layout_marginStart="1dp"
android:layout_marginLeft="1dp"
android:layout_marginEnd="1dp"
android:layout_marginRight="1dp"
android:hint="First name"
app:layout_constraintBottom_toTopOf="#+id/lastnameInputLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/regAppLogo">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/firstNameEditText"
style="#style/Widget.Design.TextInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:height="48dp"
app:layout_constraintDimensionRatio="5:1"
tools:ignore="TextContrastCheck" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/lastnameInputLayout"
style="#style/Theme.AppCompat.Light.NoActionBar"
android:layout_width="280dp"
android:layout_height="48dp"
android:layout_marginTop="14dp"
android:hint="Last name"
app:layout_constraintBottom_toTopOf="#+id/userNameInputLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/firstNameInputLayout">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/lastNameEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:ignore="TextContrastCheck" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/userNameInputLayout"
style="#style/Theme.AppCompat.Light.NoActionBar"
android:layout_width="280dp"
android:layout_height="48dp"
android:layout_marginStart="1dp"
android:layout_marginLeft="1dp"
android:layout_marginTop="14dp"
android:layout_marginEnd="1dp"
android:layout_marginRight="1dp"
android:hint="Username"
app:layout_constraintBottom_toTopOf="#+id/emailLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/lastnameInputLayout">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/userNameEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:ignore="TextContrastCheck" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/emailLayout"
android:layout_width="280dp"
android:layout_height="48dp"
android:layout_marginStart="1dp"
android:layout_marginLeft="1dp"
android:layout_marginTop="14dp"
android:layout_marginEnd="1dp"
android:layout_marginRight="1dp"
android:hint="Email"
app:layout_constraintBottom_toTopOf="#+id/passInputLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/userNameInputLayout">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/emailEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:ignore="TextContrastCheck" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/passInputLayout"
android:layout_width="280dp"
android:layout_height="48dp"
android:layout_marginStart="1dp"
android:layout_marginLeft="1dp"
android:layout_marginTop="14dp"
android:layout_marginEnd="1dp"
android:layout_marginRight="1dp"
android:hint="Password"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/emailLayout">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/passEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="36dp"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/passInputLayout"
tools:ignore="TextContrastCheck"
tools:layout_editor_absoluteX="-2dp" />
</com.google.android.material.textfield.TextInputLayout>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_marginTop="14dp"
android:text="Sign up"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/passInputLayout"
tools:ignore="TextContrastCheck" />
<TextView
android:id="#+id/textView2"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Already have an account ?"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button"
tools:ignore="TextContrastCheck" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Sign in"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.473"
app:layout_constraintStart_toEndOf="#+id/textView2"
app:layout_constraintTop_toBottomOf="#+id/button"
tools:ignore="TextContrastCheck" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="20dp" />
<TextView
android:id="#+id/textView4"
android:layout_width="255dp"
android:layout_height="23dp"
android:layout_marginTop="8dp"
android:orientation="horizontal"
android:text="By signing up you agree with our terms and conditions"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2"
tools:ignore="TextContrastCheck" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

The TextViews "textView2", "textView3" and "textView4" do not have vertical constraints. They probably look OK in the Android Studio designer because they have tools:layout_editor_absoluteY="420dp" set. That setting only has value in the designer and has no effect when the app is run. Without a vertical contraint, the view will shift to the top.
Make sure all of your view have horizontal and vertical constraints set.

Why Fragment/Activity layout looks bad when changing device language to RTL languge?

I built an application (for practice Android), and i use start, end in order to support both LTR and RTL languages. I also set android:supportsRtl="true" in manifest file.
When device is set to LTR language all text looks great, and alignment great to the left. But, when changing device language to RTL language, all text seems bad and isn't alignment to the right (maybe some of the TextView are alignment and some aren't). In addition it seems that the Spinner view is totally Wrong. I have attached two screen shot (for both languages). I'm asking for your help, because i don't understand what i'm doing wrong.
Also attached 3 code snipping (one for all the layout, the second for the item inside the RecyclerView and the third the item for the Spinner:
<?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/backgroundColor">
<Spinner
android:id="#+id/spinner"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginStart="3dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="3dp"
android:background="#null"
android:dropDownWidth="120dp"
android:dropDownVerticalOffset="96dp"
android:gravity="center"
android:visibility="invisible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.example.currencyconvertor.MultiButton
android:id="#+id/multiButton"
android:layout_width="300dp"
android:layout_height="50dp"
android:layout_marginTop="15dp"
app:activeButtonIndex="0"
app:backgroundSelector="#drawable/multi_button_background_selector"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/spinner"
app:numOfButtons="2"
app:reversedOrder="false"
android:visibility="gone"
app:textColorSelector="#drawable/multi_button_text_color" />
<TextView
android:id="#+id/textView1"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginStart="3dp"
android:layout_marginTop="22dp"
android:textColor="#color/titleTextColor"
android:textSize="13sp"
app:layout_constraintEnd_toStartOf="#id/textView2"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/multiButton"
tools:text="TextView1" />
<TextView
android:id="#+id/textView2"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:text="Symbol"
android:textColor="#color/titleTextColor"
android:textSize="13sp"
app:layout_constraintEnd_toStartOf="#id/textView3"
app:layout_constraintStart_toEndOf="#id/textView1"
app:layout_constraintTop_toTopOf="#id/textView1"
tools:text="TextView2" />
<TextView
android:id="#+id/textView3"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:textColor="#color/titleTextColor"
android:textSize="13sp"
app:layout_constraintEnd_toStartOf="#id/textView4"
app:layout_constraintStart_toEndOf="#id/textView2"
app:layout_constraintTop_toTopOf="#id/textView1"
app:layout_goneMarginEnd="3dp"
tools:text="TextView3" />
<TextView
android:id="#+id/textView4"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginEnd="3dp"
android:textColor="#color/titleTextColor"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/textView3"
app:layout_constraintTop_toTopOf="#id/textView1"
android:visibility="gone"
tools:text="TextView4" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="3dp"
android:layout_marginTop="7dp"
android:layout_marginEnd="3dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/textView1"
tools:listitem="#layout/relative_currency_rate_row" />
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxHeight="200dp"
android:maxWidth="200dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/textView1" />
</androidx.constraintlayout.widget.ConstraintLayout>
Code for RecyclerView item:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginBottom="1dp"
android:background="#color/rowColor"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/container"
android:layout_width="80dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/targetCountryTextView"
app:layout_constraintHorizontal_chainStyle="spread_inside"
tools:ignore="MissingConstraints">
<ImageView android:id="#+id/countryFlagImageView"
android:layout_width="32dp"
android:layout_height="32dp"
app:layout_constraintStart_toStartOf="#id/container"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:src="#drawable/ic_launcher_background"
android:paddingEnd="4dp" />
<TextView
android:id="#+id/currencyTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#id/countryFlagImageView"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginStart="2dp"
android:layout_marginTop="13dp"
android:layout_marginBottom="12dp"
android:textSize="13sp"
android:text="USA"
android:textColor="#color/currencyRowTextColor"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/targetCountryTextView"
android:layout_width="80dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#id/container"
app:layout_constraintEnd_toStartOf="#id/rateTextView"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginTop="13dp"
android:layout_marginBottom="12dp"
android:textSize="13sp"
android:text="Dollar"
android:textColor="#color/currencyRowTextColor" />
<TextView
android:id="#+id/rateTextView"
android:layout_width="80dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#id/targetCountryTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginTop="13dp"
android:layout_marginBottom="12dp"
android:textSize="13sp"
android:text="0.417"
android:textColor="#color/currencyRowTextColor" />
</androidx.constraintlayout.widget.ConstraintLayout>
Code for Spinner item:
<?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"
android:background="#color/rowColor">
<ImageView
android:id="#+id/flagImageView"
android:layout_width="48dp"
android:layout_height="48dp"
app:layout_constraintEnd_toStartOf="#+id/countryTextView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:padding="4dp"
app:srcCompat="#drawable/default_glag"
android:textColor="#color/currencyRowTextColor"/>
<TextView
android:id="#+id/countryTextView"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/flagImageView"
android:layout_marginStart="30dp"
android:gravity="center"
android:textSize="17sp"
android:textColor="#color/currencyRowTextColor"/>
<TextView
android:id="#+id/currencyTextView"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/countryTextView"
android:layout_marginStart="5dp"
android:gravity="center"
android:text="countryCurrencyTextView"
android:textSize="17sp"
android:textColor="#color/currencyRowTextColor"/>
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="4dp"
android:src="#mipmap/ic_arrow_drop_down"/>
</androidx.constraintlayout.widget.ConstraintLayout>[![enter image description here][1]][1]

disable supports RTL on your manifest file:
<application
...
android:supportsRtl="false">
I hope to be useful ;)

ScrollView Not Working in android studio , desired output not coming

The output of the below code is not coming as the output required . Full Screen is not been covered in the scrollview .I am trying to use Constraint Layout inside the scroll view.Please help.......
The contents of the constraint layout are getting overlaped and the full screen is not covered by constraint layout....
<?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"
xmlns:fancy="http://schemas.android.com/apk/res-auto"
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">
<com.libizo.CustomEditText
android:id="#+id/Email"
android:layout_width="285dp"
android:layout_height="69dp"
android:ems="10"
android:hint="Email"
android:inputType="textPersonName"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.873"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.111"
app:libIZO_clearIconTint="#8f1f15"
app:libIZO_setBorderColor="#8f1f15"
app:libIZO_setBorderView="true"
app:libIZO_setClearIconVisible="true"
app:libIZO_setCornerRadius="4dp"
app:libIZO_setStrokeWidth="2dp" />
<ImageView
android:id="#+id/icon_mail"
android:layout_width="75dp"
android:layout_height="66dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.047"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.115"
app:srcCompat="#drawable/ic_email"
tools:ignore="ContentDescription,UnusedAttribute,VectorDrawableCompat" />
<mehdi.sakout.fancybuttons.FancyButton
android:id="#+id/Login"
android:layout_width="204dp"
android:layout_height="75dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.417"
fancy:fb_borderColor="#FFFFFF"
fancy:fb_borderWidth="1dp"
fancy:fb_defaultColor="#7ab800"
fancy:fb_focusColor="#9bd823"
fancy:fb_iconPosition="left"
fancy:fb_radius="30dp"
fancy:fb_text="Login / Register"
fancy:fb_textColor="#FFFFFF"
fancy:fb_textSize="25dp" />
<ImageView
android:id="#+id/icon_lock"
android:layout_width="80dp"
android:layout_height="68dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.048"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.268"
app:srcCompat="#drawable/ic_lock"
tools:ignore="ContentDescription,UnusedAttribute,VectorDrawableCompat" />
<com.libizo.CustomEditText
android:id="#+id/Password"
android:layout_width="285dp"
android:layout_height="69dp"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.873"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.268"
app:libIZO_clearIconTint="#8f1f15"
app:libIZO_setBorderColor="#8f1f15"
app:libIZO_setBorderView="true"
app:libIZO_setClearIconVisible="true"
app:libIZO_setCornerRadius="4dp"
app:libIZO_setStrokeWidth="2dp" />
<TextView
android:id="#+id/Forgot_Password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Forgot Password ?"
android:textSize="30dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.496"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.527" />
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:visibility="gone"/>
<Button
android:id="#+id/Google"
android:layout_width="168dp"
android:layout_height="145dp"
android:background="#drawable/ic_google"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.884"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.725" />
<Button
android:id="#+id/Phone"
android:layout_width="168dp"
android:layout_height="145dp"
android:background="#drawable/ic_phone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.148"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.725" />
<Button
android:id="#+id/Facebook"
android:layout_width="208dp"
android:layout_height="156dp"
android:background="#drawable/ic_facebook"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.541"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.991" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
The Output for the following code is shown here

You set wrong Constraint to view. Try like below. It will give you some idea and change it according your need.
<?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"
xmlns:fancy="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:padding="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/icon_mail"
android:layout_width="75dp"
android:layout_height="66dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_email"
tools:ignore="ContentDescription,UnusedAttribute,VectorDrawableCompat" />
<com.libizo.CustomEditText
android:id="#+id/Email"
android:layout_width="285dp"
android:layout_height="69dp"
android:ems="10"
android:hint="Email"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:libIZO_clearIconTint="#8f1f15"
app:libIZO_setBorderColor="#8f1f15"
app:libIZO_setBorderView="true"
app:libIZO_setClearIconVisible="true"
app:libIZO_setCornerRadius="4dp"
app:libIZO_setStrokeWidth="2dp" />
<ImageView
android:id="#+id/icon_lock"
android:layout_width="80dp"
android:layout_height="68dp"
android:layout_marginTop="20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/icon_mail"
app:srcCompat="#drawable/ic_lock"
tools:ignore="ContentDescription,UnusedAttribute,VectorDrawableCompat" />
<com.libizo.CustomEditText
android:id="#+id/Password"
android:layout_width="285dp"
android:layout_height="69dp"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
android:textSize="20sp"
android:layout_marginTop="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Email"
app:libIZO_clearIconTint="#8f1f15"
app:libIZO_setBorderColor="#8f1f15"
app:libIZO_setBorderView="true"
app:libIZO_setClearIconVisible="true"
app:libIZO_setCornerRadius="4dp"
app:libIZO_setStrokeWidth="2dp" />
<mehdi.sakout.fancybuttons.FancyButton
android:id="#+id/Login"
android:layout_width="204dp"
android:layout_height="75dp"
android:layout_marginTop="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Password"
fancy:fb_borderColor="#FFFFFF"
fancy:fb_borderWidth="1dp"
fancy:fb_defaultColor="#7ab800"
fancy:fb_focusColor="#9bd823"
fancy:fb_iconPosition="left"
fancy:fb_radius="30dp"
fancy:fb_text="Login / Register"
fancy:fb_textColor="#FFFFFF"
fancy:fb_textSize="25dp" />
<TextView
android:id="#+id/Forgot_Password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Forgot Password ?"
android:textSize="30dp"
android:layout_marginTop="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Login" />
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:visibility="gone"/>
<Button
android:id="#+id/Google"
android:layout_width="168dp"
android:layout_height="145dp"
android:layout_marginTop="20dp"
android:background="#drawable/ic_google"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Forgot_Password" />
<Button
android:id="#+id/Phone"
android:layout_width="168dp"
android:layout_height="145dp"
android:background="#drawable/ic_phone"
android:layout_marginTop="20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Forgot_Password" />
<Button
android:id="#+id/Facebook"
android:layout_width="208dp"
android:layout_height="156dp"
android:background="#drawable/ic_facebook"
android:layout_marginTop="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Google"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

Constraint layout in practice look different than in Android Studio

I'm trying to place my views into ConstraintLayout, but every views like button/textview look different in real device than in AndroidStudio.
Check how its look:
in Android Studio
in real Device
It's looks horrible ! How I can fix that ? What I should do ?
I thought it was the easiest way to arrange views.
and my xml:
<?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=".activity.LoginActivity">
<Button
android:id="#+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="228dp"
android:text="Login"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.275"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.599" />
<EditText
android:id="#+id/etLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:hint="User"
android:inputType="textPersonName"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.498" />
<EditText
android:id="#+id/etPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.63" />
<Button
android:id="#+id/btnDefault"
android:layout_width="129dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="184dp"
android:layout_marginTop="364dp"
android:text="default user"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
</android.support.constraint.ConstraintLayout>

The idea of ConstraintLayout is to use constraints to position views relative to each other. In your case you try to constrain each view in relation to the parent and then use bias to position the view which is the reason everything seems out of order.
Here is the simple example XML that will give you a basic idea how to position these views using constraints:
<?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=".activity.LoginActivity">
<EditText
android:id="#+id/etLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="User"
android:inputType="textPersonName"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/etPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="#id/etLogin"
app:layout_constraintStart_toStartOf="#id/etLogin"
app:layout_constraintTop_toBottomOf="#id/etLogin" />
<Button
android:id="#+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
app:layout_constraintEnd_toStartOf="#id/btnDefault"
app:layout_constraintStart_toStartOf="#id/etLogin"
app:layout_constraintTop_toBottomOf="#id/etPassword" />
<Button
android:id="#+id/btnDefault"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="default user"
app:layout_constraintEnd_toEndOf="#id/etLogin"
app:layout_constraintStart_toEndOf="#id/btnLogin"
app:layout_constraintTop_toBottomOf="#id/etPassword" />
</android.support.constraint.ConstraintLayout>
The result:
If you want to add some spacing between the views you can experiment with adding some margins between them.

I haven't checked this for syntax, but something like this might work better (tying things to each other, rather than to the screen edges).
<?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=".activity.LoginActivity">
<Button
android:id="#+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="228dp"
android:text="Login"
app:layout_constraintEnd_toEndOf="#+id/etPassword"
app:layout_constraintStart_toEndOf="#+id/btnDefault"
app:layout_constraintTop_toBottomOf="#+id/etPassword"/>
<EditText
android:id="#+id/etLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="64dp"
android:ems="10"
android:hint="User"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/etPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="#+id/etLogin"
app:layout_constraintStart_toStartOf="#+id/etLogin"
app:layout_constraintTop_toBottomOf="#+id/etLogin" />
<Button
android:id="#+id/btnDefault"
android:layout_width="129dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="184dp"
android:layout_marginTop="364dp"
android:text="default user"
app:layout_constraintStart_toStartOf="#+id/etPassword"
app:layout_constraintEnd_toStartOf="#+id/btnLogin"
app:layout_constraintTop_toBottomOf="#+id/etPassword" />
</android.support.constraint.ConstraintLayout>

How to modify chain length in constraint layout?

Here is my 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"
android:background="#color/nav_and_action_bar_color"
>
<ImageView
android:id="#+id/some_person"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/some_person"
app:layout_constraintBottom_toTopOf="#+id/et_username"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/et_username"
android:layout_width="#dimen/login_page_text_fields_width"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#android:color/white"
android:hint="#string/email_hint"
android:padding="10dp"
app:layout_constraintBottom_toTopOf="#+id/et_password"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/some_person" />
<EditText
android:id="#+id/et_password"
android:layout_width="#dimen/login_page_text_fields_width"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#android:color/white"
android:hint="#string/password_hint"
android:inputType="textPassword"
android:padding="10dp"
app:layout_constraintBottom_toTopOf="#+id/login_button"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/et_username" />
<Button
android:id="#+id/login_button"
android:layout_width="#dimen/login_button_width"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#color/colorAccent"
android:elevation="5dp"
android:onClick="clickedOnLogin"
android:text="#string/login_button"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/et_password" />
</android.support.constraint.ConstraintLayout>
and i seem to be getting this as a result
How do i bring the elements together? I want them to be close together.

You need to define variable for every view, where you want to apply chaining logic. Pick just one:
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintVertical_chainStyle="spread"
app:layout_constraintVertical_chainStyle="spread_inside"

Use below code to get the desired layout.
Changes in the below code of yours is "app:layout_constraintVertical_chainStyle="packed".
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/nav_and_action_bar_color">
<ImageView
android:id="#+id/some_person"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/some_person"
app:layout_constraintBottom_toTopOf="#+id/et_username"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<EditText
android:id="#+id/et_username"
android:layout_width="#dimen/login_page_text_fields_width"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#android:color/white"
android:hint="#string/email_hint"
android:padding="10dp"
app:layout_constraintBottom_toTopOf="#+id/et_password"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/some_person" />
<EditText
android:id="#+id/et_password"
android:layout_width="#dimen/login_page_text_fields_width"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#android:color/white"
android:hint="#string/password_hint"
android:inputType="textPassword"
android:padding="10dp"
app:layout_constraintBottom_toTopOf="#+id/login_button"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/et_username" />
<Button
android:id="#+id/login_button"
android:layout_width="#dimen/login_button_width"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#color/colorAccent"
android:elevation="5dp"
android:onClick="clickedOnLogin"
android:text="#string/login_button"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/et_password" />
</android.support.constraint.ConstraintLayout>

I managed to bring the elements close together. According to this page
Chains are controlled by attributes set on the first element of the chain (the "head" of the chain):
So i added this to <ImageView> tag
app:layout_constraintVertical_chainStyle="packed"
and since i did not want it to be at the center vertically i also added this to the same tag
app:layout_constraintVertical_bias="0.4"
So that it is not at the center but is slightly biased towards to the top.