About the constraint layout height

Question

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?

Answer 1

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>