Constraint Layout performs different on different devices - java

I'm trying to convert my relative layout into a Constraint layout to fit every device, but I'm having some problems. On the editor in Android Studio it looks like this:
I made it using a Pixel C as emulator. Now, I tried the app on a Samsung Galaxy tab and this is the result:
Why the buttons are not at center at the screen like in the first picture? This is the code of the xml, as you can see I've even anchored the element to keep the distance between them:
<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:id="#+id/relativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background_main"
android:scaleType="centerCrop"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView2"
android:layout_width="708dp"
android:layout_height="231dp"
android:layout_marginTop="152dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:fontFamily="#font/kotta_one"
android:text="Test del pensiero\n divergente"
android:textColor="#000000"
android:textSize="86dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.57"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.195" />
<Button
android:id="#+id/button_1"
android:layout_width="180dp"
android:layout_height="60dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="76dp"
android:layout_marginBottom="8dp"
android:background="#drawable/button_bg"
android:text="#string/invioA"
android:textAllCaps="false"
android:textColor="#FFFFFF"
android:textSize="18dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button_2"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="#+id/textView2"
app:layout_constraintTop_toBottomOf="#+id/textView2"
app:layout_constraintVertical_bias="0.028" />
<Button
android:id="#+id/button_2"
android:layout_width="180dp"
android:layout_height="60dp"
android:layout_marginEnd="188dp"
android:layout_marginBottom="8dp"
android:background="#drawable/button_bg"
android:text="#string/invioB"
android:textAllCaps="false"
android:textColor="#FFFFFF"
android:textSize="18dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/textView2"
app:layout_constraintTop_toBottomOf="#+id/textView2"
app:layout_constraintVertical_bias="0.028" />
<Button
android:id="#+id/button_3"
android:layout_width="161dp"
android:layout_height="114dp"
android:layout_marginEnd="8dp"
android:background="#android:color/transparent"
android:fontFamily="#font/kotta_one"
android:text="Area\nDocenti"
android:textAllCaps="false"
android:textColor="#030000"
android:textSize="26dp"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>


You are giving wrong width and height to button and textview.
Also, for horizontal button and same width and height you can use chain like below I used.
Here, I give you approx design and also you can use your ConstraintLayout because I have androidx migrated project.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/add_news_feed_bg"
android:scaleType="centerCrop">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Test del pensiero\n divergente"
android:textColor="#000000"
android:textSize="86dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/bg_toolbar"
android:text="invioA"
android:textAllCaps="false"
android:textColor="#FFFFFF"
android:textSize="18dp"
app:layout_constraintBottom_toBottomOf="#+id/button_2"
app:layout_constraintEnd_toStartOf="#+id/button_2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button_2" />
<Button
android:id="#+id/button_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:background="#color/bg_toolbar"
android:text="invioB"
android:textAllCaps="false"
android:textColor="#FFFFFF"
android:textSize="18dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button_1"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<Button
android:id="#+id/button_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:background="#android:color/transparent"
android:text="Area\nDocenti"
android:textAllCaps="false"
android:textColor="#030000"
android:textSize="26dp"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Related

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.

Android: Cut off constraint layout

When adding a constraint layout within another constraint layout the inner one gets cut off.
I already tried changing the constraint top of view but that didn't change anything. Anyone knows why this is happening?
I also tried it out with different layouts ( the cyan one is the culprit ) which all had the same effect.
<?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/cyberpunk_background"
tools:context=".Todo_create">
<EditText
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
android:autofillHints=""
android:background="#drawable/square_round"
android:ems="10"
android:hint="Title"
android:inputType="textPersonName"
android:textColor="#color/cardview_light_background"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/editText3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="148dp"
android:background="#drawable/square_round"
android:ems="10"
android:hint="Description"
android:inputType="textPersonName"
android:textColor="#color/cardview_light_background"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/editText4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="104dp"
android:background="#drawable/square_round"
android:clickable="true"
android:ems="10"
android:hint="Time"
android:inputType="textPersonName"
android:textColor="#color/cardview_light_background"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText3" />
<Button
android:id="#+id/button_add_new_todo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginBottom="32dp"
android:background="#drawable/square_round"
android:text="Button"
android:textColor="#color/cardview_light_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="1dp"
android:layout_marginEnd="1dp"
android:layout_marginBottom="256dp"
android:adjustViewBounds="true"
android:background="#color/colorAccent"
android:orientation="horizontal"
android:scaleType="centerInside"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText4"
app:layout_constraintVertical_bias="1.0">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="47dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="26dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/alarm_clock_1" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

It seems that you have an unnecessary android:layout_marginBottom="256dp" in your nested constraint layout.

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>

How to always show Toolbar in Android even when there is scrolling?

After looking up various answers and suggestions on the site, I implemented a custom toolbar in my app instead of using the default ActionBar. For the most part, it works fine, however, one thing that is different from the standard action bar is that it auto-hides whenever I scroll. In the default ActionBar, it was always visible on the activity regardless of whether I was scrolling or not. Can anyone please explain how to implement this behavior in the custom toolbar as well? I have attached my xml below:
EDIT: I have tried moving the toolbar out of the scrollview which fixes the toolbar but then when I scroll, then other views in my activity also overlap on the toolbar because the top-most view is bound to the scrollview and other views are bound to it. So, the current implementation is better than the overlapping problem, but it is still not the solution I desire.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ScrollView
android:id="#+id/sc1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="8dp"
android:layout_marginEnd="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginStart="0dp"
android:layout_marginTop="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/searchBar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:ems="10"
android:hint="Search..."
android:textColorHint="#color/myWhite"
android:inputType="textPersonName"
android:textColor="#color/myWhite"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/subtitleBtn" />
<android.support.v7.widget.Toolbar
android:id="#+id/myToolbar"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:titleTextColor="#color/myWhite"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:contentInsetLeft="48dp"
android:contentInsetStart="48dp"
app:titleMarginStart="24dp"
app:contentInsetLeft="12dp"
app:contentInsetStart="12dp"
android:contentInsetRight="0dp"
android:contentInsetEnd="0dp"
app:contentInsetRight="0dp"
app:contentInsetEnd="0dp"/>
<Button
android:id="#+id/splitDrawableBackgroundBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Set Split Drawable Background"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.517"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/stackedDrawableBackgroundBtn" />
<Button
android:id="#+id/subtitleBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Show Subtitle"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/iconBtn" />
<Button
android:id="#+id/iconBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Set Icon"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/alternateBackBtn" />
<Button
android:id="#+id/alternateBackBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Set Alternate Back Button"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/hideBarBtn" />
<Button
android:id="#+id/hideBarBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Hide Action Bar"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/elevationBtn" />
<Button
android:id="#+id/elevationBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Set Elevation"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/logoBtn" />
<Button
android:id="#+id/logoBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Set Logo"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/hideAllBtn" />
<Button
android:id="#+id/hideAllBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Hide Everything"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/hideBackBtn" />
<Button
android:id="#+id/hideBackBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Hide Back Button"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.502"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/splitDrawableBackgroundBtn" />
<Button
android:id="#+id/stackedDrawableBackgroundBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Set Stacked Drawable Background"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/drawableBackgroundBtn" />
<Button
android:id="#+id/drawableBackgroundBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Set Drawable Background"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/customViewBtn" />
<Button
android:id="#+id/customViewBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Show Custom View"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/hideOffsetBtn" />
<Button
android:id="#+id/hideOffsetBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Hide Offset"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/backBtn" />
<Button
android:id="#+id/backBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:text="Show back button"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/titleBtn" />
<Button
android:id="#+id/titleBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="88dp"
android:text="Set Title"
android:fontFamily="#font/roboto_black"
android:textAllCaps="false"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>

Since the toolbar is inside the scrollview it will scroll.
Take it out and constraint it to the top of the Constraint Layout.

Please place the toolbar before scrollview. Then it becomes not scrollable and the rest of the area is scrollable

move your toolbar to our side of the scroll view
your view hierarchy should be something like this :
<LinearLayout>
<Toolbar/>
<FrameLayout>
<ScrollView/>
</FrameLayoyt>
</LinearLayout>

Your Toolbar is in the Scrollview, you can place on top of the CoordinatorLayout to solve the issue. so your code will look like this,
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<ScrollView
android:id="#+id/sc1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText />
<!-- other controls -->
</android.support.constraint.ConstraintLayout>
</ScrollView>
</android.support.design.widget.CoordinatorLayout>

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>

Categories