Develop Reference

About the constraint layout height

The below picture is the output I wanted to make:
I have already gone through
How to set a view's height match parent in ConstraintLayout?
and
https://developer.android.com/reference/android/support/constraint/ConstraintLayout
What I have done is I have made a constrain layout as the main parent layout and inside that, I had mad a relative layout with the circle as background and Image on top.
And also the rectangular top curved corners one is in the background of a constraint layout. Now what I am not getting is the height of this constraint layout the bottom of this should touch the bottom of the screen but as soon as I declare the height as match parent it occupies the whole screen from top to bottom. Below is my XML code.
<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/silver"
tools:context=".ResetPassword">
<RelativeLayout
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginLeft="20dp"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:background="#drawable/circle_shape"
>
<ImageView
android:id="#+id/iv_reset_bck"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/ic_arrow_back_black_24dp"></ImageView>
</RelativeLayout>
<RelativeLayout
android:id="#+id/rl_reset_topImage"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="40dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:background="#drawable/circle_shape">
<ImageView
android:id="#+id/iv_reset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"
app:srcCompat="#mipmap/ic_launcher_round" />
</RelativeLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="#drawable/bg_rectangle"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:paddingRight="5dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/rl_reset_topImage">
<LinearLayout
android:id="#+id/welcomeLoginLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteY="5dp">
<com.example.portfolio.CustomViews.PopinsBoldTextView
android:id="#+id/tv_welcome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="43dp"
android:layout_marginLeft="43dp"
android:layout_marginTop="44dp"
android:text="#string/welcome"
android:textColor="#color/black"
android:textSize="26sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.example.portfolio.CustomViews.PopinsBoldTextView
android:id="#+id/tv_logintext_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="43dp"
android:layout_marginLeft="43dp"
android:text="#string/loginwith"
android:textColor="#color/black"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
<RelativeLayout
android:id="#+id/emailRelativeLayout"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginStart="40dp"
android:layout_marginLeft="40dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="40dp"
android:layout_marginRight="40dp"
android:background="#drawable/bg_email_rect"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/welcomeLoginLayout">
<EditText
android:id="#+id/et_email"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="20dp"
android:layout_marginLeft="20dp"
android:layout_marginEnd="20dp"
android:layout_marginRight="20dp"
android:background="#android:color/transparent"
android:hint="#string/prompt_email"
android:paddingTop="5dp"
android:textSize="20sp"
android:paddingBottom="5dp"
android:textColorHint="#color/dark_gey"></EditText>
</RelativeLayout>
<RelativeLayout
android:id="#+id/passwordlRelativeLayout"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginStart="40dp"
android:layout_marginLeft="40dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="40dp"
android:layout_marginRight="40dp"
android:background="#drawable/bg_email_rect"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/emailRelativeLayout">
<EditText
android:id="#+id/et_password"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="20dp"
android:layout_marginLeft="20dp"
android:layout_marginEnd="20dp"
android:layout_marginRight="20dp"
android:background="#android:color/transparent"
android:hint="#string/prompt_password"
android:textSize="20sp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:textColorHint="#color/dark_gey"></EditText>
</RelativeLayout>
<RelativeLayout
android:id="#+id/login_btnLayout"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginStart="40dp"
android:layout_marginLeft="40dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="40dp"
android:layout_marginRight="40dp"
android:background="#drawable/bg_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/passwordlRelativeLayout">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Login"
android:textColor="#FFF"
android:textSize="20dp"
android:textStyle="bold"></TextView>
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
This is what I get the output from the above code
How can I make it as the above image?

As mentioned in the comment, you do not need to setup parent Layouts inside ConstraintLayout as ConstraintLayout is pretty powerful and can easily achieve what you want. What you are lacking is good use of constraints, and you are trying to compensate that by using RelativeLayout. Having a ConstraintLayout inside a ConstraintLayout is an overkill.
I have not created the BottomSheet for you ResetPassword, but that is something you can work on yourself as its simply an arrangement of elements or bringing in a customView. My point is to simply use one ConstraintLayout as the parent that will manage all the ViewGroups, and refrain from using any other Layouts inside it.
Design preview
XML Layout file
<?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">
<ImageView
android:id="#+id/imageView2"
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"
app:layout_constraintVertical_bias="0.25"
tools:srcCompat="#tools:sample/avatars" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:text="Reset your password"
app:layout_constraintEnd_toEndOf="#+id/imageView2"
app:layout_constraintStart_toStartOf="#+id/imageView2"
app:layout_constraintTop_toBottomOf="#+id/imageView2" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Reset your password to use app"
app:layout_constraintEnd_toEndOf="#+id/textView"
app:layout_constraintStart_toStartOf="#+id/textView"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<EditText
android:id="#+id/editTextTextPersonName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintEnd_toEndOf="#+id/textView2"
app:layout_constraintStart_toStartOf="#+id/textView2"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<EditText
android:id="#+id/editTextTextPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="#+id/editTextTextPersonName"
app:layout_constraintStart_toStartOf="#+id/editTextTextPersonName"
app:layout_constraintTop_toBottomOf="#+id/editTextTextPersonName" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintEnd_toEndOf="#+id/editTextTextPassword"
app:layout_constraintStart_toStartOf="#+id/editTextTextPassword"
app:layout_constraintTop_toBottomOf="#+id/editTextTextPassword" />
</androidx.constraintlayout.widget.ConstraintLayout>

How to create layout which support different screen size? [duplicate]

I have created layout for different screen size and this is my xml code for default layout
but so any one please tell me what I should do to support my layout for any screen size android devices.
do I need to change my xml code?
or
just I need to modify my xml code ?
please tell me so I can solve my problem
xlm
<androidx.constraintlayout.widget.ConstraintLayout 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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Login"
android:textSize="40sp"
android:layout_marginTop="40dp"
android:fontFamily="sans-serif-black"
android:layout_gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/nice"
android:layout_marginTop="40dp"
android:textSize="30sp"/>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayoutUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true"
app:errorTextAppearance="#style/ErrorStyleNormal"
android:padding="5dp"
android:layout_marginTop="30dp"
app:hintTextAppearance="#style/ErrorStyleNormal">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="25sp"
android:hint="Username"
/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayoutPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
app:errorEnabled="true"
app:passwordToggleEnabled="true"
app:errorTextAppearance="#style/ErrorStyleNormal"
android:layout_marginTop="20dp"
app:hintTextAppearance="#style/ErrorStyleNormal"
app:counterTextAppearance="#style/CounterStyleNormal">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:textSize="25sp"
android:inputType="textPassword"/>
</com.google.android.material.textfield.TextInputLayout>
<TextView
android:id="#+id/textViewForgotPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginEnd="15dp"
android:layout_marginRight="15dp"
android:text="#string/ForgotPassword"
android:textSize="15sp" />
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:cardCornerRadius="25dp"
android:elevation="5dp"
android:padding="10dp"
android:layout_marginTop="30dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp">
<ImageView
android:id="#+id/image"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="#drawable/ic_arrow_forward"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Login"
android:layout_toEndOf="#+id/image"
android:layout_centerVertical="true"
android:textSize="25sp"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp"
android:fontFamily="sans-serif-black"
android:layout_toRightOf="#+id/image" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="#string/To_Join_With"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:textColor="#android:color/black"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="#string/Click_here"
android:layout_gravity="center"
android:textColor="#android:color/holo_blue_bright"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

If you want to support different screen sizes, then use https://developer.android.com/reference/android/support/annotation/Dimension for different sizes of elements for different screens. If you need a different layout of elements on different screens, then you can create different xml files for different screen sizes Android layouts for different screen sizes

I edited you XML so it may be a good start for learning how to use ConstraintLayout. Check a tutorial for ConstraintLayout (constraintlayout.com)
Don't use match_parent with ConstraintLayout we only have 0dp (match_constraint) and wrap_conent
Don't mess up the XML with unneccessary nested ViewGroups (LinearLayout)
When using margin or padding best to use numbers based on 8 (8 - 16 - 24 - 32 - ...)
Using a CardView for button is wrong, check MaterialButton documents at material.io
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/Login"
android:textSize="40sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView_loginMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="#string/nice"
android:textSize="32sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayoutUsername"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:padding="5dp"
app:errorEnabled="true"
app:errorTextAppearance="#style/ErrorStyleNormal"
app:hintTextAppearance="#style/ErrorStyleNormal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/textView_loginMessage">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Username"
android:textSize="25sp" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayoutPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:padding="5dp"
app:counterTextAppearance="#style/CounterStyleNormal"
app:errorEnabled="true"
app:errorTextAppearance="#style/ErrorStyleNormal"
app:hintTextAppearance="#style/ErrorStyleNormal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/textInputLayoutUsername"
app:passwordToggleEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:inputType="textPassword"
android:textSize="25sp" />
</com.google.android.material.textfield.TextInputLayout>
<TextView
android:id="#+id/textViewForgotPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="24dp"
android:layout_marginEnd="16dp"
android:text="#string/ForgotPassword"
android:textSize="15sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textInputLayoutPassword" />
<com.google.android.material.button.MaterialButton
android:id="#+id/materialButton"
style="#style/Widget.MaterialComponents.Button.TextButton.Icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
app:icon="#color/yourArrowIcon"
app:iconGravity="start"
android:text="yourText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textViewForgotPassword" />
<TextView
android:id="#+id/textView_join"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="16dp"
android:text="#string/To_Join_With"
android:textColor="#android:color/black"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/materialButton" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="16dp"
android:text="#string/Click_here"
android:textColor="#android:color/holo_blue_bright"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/textView_join" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>

View get packed in ConstraintLayout, Views run out of screen in LinearLayout

I am implementing a signup/login screen like below
I have tried this using ConstraintLayout like below
<?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:layout_margin="16dp"
tools:context=".MainActivity">
<ImageView
android:id="#+id/img"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_marginBottom="72dp"
android:src="#drawable/ic_launcher_background"
app:layout_constraintBottom_toTopOf="#+id/btn1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<Button
android:id="#+id/btn1"
android:layout_width="0dp"
android:layout_height="56dp"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
android:layout_marginBottom="12dp"
android:text="Button 1"
app:layout_constraintBottom_toTopOf="#+id/btn2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/img" />
<Button
android:id="#+id/btn2"
android:layout_width="0dp"
android:layout_height="56dp"
android:layout_marginBottom="48dp"
android:text="Button 2"
app:layout_constraintBottom_toTopOf="#+id/txt_already_member"
app:layout_constraintEnd_toEndOf="#+id/btn1"
app:layout_constraintStart_toStartOf="#+id/btn1"
app:layout_constraintTop_toBottomOf="#+id/btn1" />
<TextView
android:id="#+id/txt_already_member"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Already Member? Sign In"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#+id/txt_agreement"
app:layout_constraintEnd_toEndOf="#+id/btn2"
app:layout_constraintStart_toStartOf="#+id/btn2"
app:layout_constraintTop_toBottomOf="#+id/btn2" />
<TextView
android:id="#+id/txt_agreement"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="By continuing you agree to our terms and privacy policy"
android:layout_marginTop="32dp"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Summary of XML:
Vertical chain is applied on four top most views
vertical chain style is set to packed
last text view is constraint to bottom and sides
margin is set on views to separate items.
Problem is when I run this on my phone, bottom text views get tight packed as shown here.
Next I tried LinearLayout like below
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:gravity="center_horizontal"
android:layout_margin="16dp"
android:layout_height="match_parent">
<ImageView
android:id="#+id/img"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_marginBottom="72dp"
android:layout_marginTop="72dp"
android:src="#drawable/ic_launcher_background"/>
<Button
android:id="#+id/btn1"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
android:layout_marginBottom="8dp"
android:text="Button 1" />
<Button
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
android:layout_height="56dp"
android:layout_marginBottom="32dp"
android:text="Button 2" />
<TextView
android:id="#+id/txt_already_member"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Already Member? Sign In"
android:textSize="16sp"
android:layout_weight="1"/>
<TextView
android:id="#+id/txt_agreement"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="By continuing you agree to our terms and privacy policy "
android:textSize="12sp"/>
</LinearLayout>
In this case bottom text views are not visible as shown here.
My device resolution is 720 * 1280 pixels.
I suppose the problem is with the hard margins. How could I make the screen look like in the sketch above, regardless of screen height? either using LinearLayout or ConstraintLayout?

I would recommend you you use all screen densities rather than one for this you can use the famous library SDP or follow the guideline provided by android.
Second use Guideline class for Constraintlayout.
Here is the sample code snippet you can also use this one.
<?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:layout_margin="16dp">
<ImageView
android:id="#+id/img"
android:layout_width="#dimen/_200sdp"
android:layout_height="#dimen/_200sdp"
android:layout_marginTop="16dp"
android:src="#drawable/ic_launcher"
app:layout_constraintBottom_toTopOf="#+id/btn1"
app:layout_constraintEnd_toStartOf="#+id/right"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/left"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 1"
app:layout_constraintBottom_toTopOf="#+id/btn2"
app:layout_constraintEnd_toStartOf="#+id/right"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/left"
app:layout_constraintTop_toBottomOf="#+id/img" />
<Button
android:id="#+id/btn2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 2"
app:layout_constraintBottom_toTopOf="#+id/txt_already_member"
app:layout_constraintEnd_toStartOf="#+id/right"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/left"
app:layout_constraintTop_toBottomOf="#+id/btn1" />
<TextView
android:id="#+id/txt_already_member"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Already Member? Sign In"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#+id/divider"
app:layout_constraintEnd_toStartOf="#+id/right"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/left"
app:layout_constraintTop_toBottomOf="#+id/btn2" />
<TextView
android:id="#+id/txt_agreement"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:text="By continuing you agree to our terms and privacy policy"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/right"
app:layout_constraintStart_toStartOf="#+id/left"
app:layout_constraintTop_toTopOf="#+id/divider"
app:layout_constraintVertical_bias="1.0" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="#dimen/_16sdp" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="#dimen/_16sdp" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/divider"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintGuide_percent="0.7"
app:layout_constraintTop_toBottomOf="#+id/txt_already_member" />

Actually solution to my problem is using Guidelines in ConstraintLayout with Guidelines app:layout_constraintGuide_percentattribute and constraining the views to Guidelines.
Since value for app:layout_constraintGuide_percent is a percentage rather than a dp value, it works responsively regardless of screen width/height.
example :
<?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:layout_margin="16dp"
tools:context=".MainActivity">
<ImageView
android:id="#+id/img"
android:layout_width="250dp"
android:layout_height="200dp"
android:src="#drawable/ic_launcher_background"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline4" />
<Button
android:id="#+id/btn1"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:text="Button 1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline5" />
<Button
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_marginTop="8dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:text="Button 2"
app:layout_constraintEnd_toEndOf="#+id/btn1"
app:layout_constraintStart_toStartOf="#+id/btn1"
app:layout_constraintTop_toBottomOf="#+id/btn1" />
<TextView
android:id="#+id/txt_already_member"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:text="Already Member? Sign In"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#+id/txt_agreement"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btn2" />
<TextView
android:id="#+id/txt_agreement"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="By continuing you agree to our terms and privacy policy "
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".1" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".6" />
</androidx.constraintlayout.widget.ConstraintLayout>
Thank you very much Rehan Sarwar for remembering me about Guidelines.

textview color and order not working

I have a problem with the following xml file:
<?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="#drawable/search_list_leaf"
tools:context=".Flowers_List">
<TextView
android:id="#+id/A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:text="A"
android:textSize="30sp"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="56dp" />
<TextView
android:id="#+id/B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
android:textSize="30sp"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="112dp" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SEARCH YOUR FLOWER"
android:textColor="#030303"
android:textSize="30sp"
tools:layout_editor_absoluteX="32dp"
tools:layout_editor_absoluteY="0dp" />
<TextView
android:id="#+id/C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
android:textSize="30sp"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="179dp" />
<TextView
android:id="#+id/D"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="D"
android:textSize="30sp"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="241dp" />
<TextView
android:id="#+id/E"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="E"
android:textSize="30sp"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="310dp" />
The problem is that, even if I change color with the command android:textColor="#color/colorIwant" I get a default color which is green (don't know why) when I run the application, while I have the right color in the design. Another problem is that even if I place all the letters in order on the design and then I apply contraint, when I launch the application I get all the letters distributed in a messy way.
What do you think the problem is about?

I place all the letters in order on the design and then I apply contraint, when I launch the application I get all the letters distributed in a messy way.
That's because you have not put necessary constraint to child TextViews, but the absolute positions.
I tried to solve this issue, see below 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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="A"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<TextView
android:id="#+id/B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="B"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/A" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="SEARCH YOUR FLOWER"
android:textColor="#030303"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="C"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/B" />
<TextView
android:id="#+id/D"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="D"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/C" />
<TextView
android:id="#+id/E"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="E"
android:textSize="30sp"
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/D"
app:layout_constraintVertical_bias="0.0" />
As you can see, each child TextView is now constrained both sides--vertically and horizontally to the parent, that is the rootview-constraintlayout or other child view.
For example, the constraint constraintEnd_toEndOf will align the end of this view to end of another view. Same way, other constraints work and are applied.
You can also give horizontal and vertical bias to position them properly. Hope this helped a little to understand how constraint works.

for order https://stackoverflow.com/a/50855782/7616371 this is correct
and for change textColor you can use :-
android:textColor="#fff"
and for textview background color
android:background="#fff"

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!