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?

There is no need to have any other parent Layout inside ConstrantLayout. You can achieve your final result without any other layout simply by using constraint. — Karan Dhillon, Apr 23 '20 at 18:58

score 1 · Answer 1 · answered Apr 23 '20 at 19:17

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>

I appreciate that you have made an effort to answer the question but the thing is what you have done in the code is you have included the "hard-coded" margin top=100dp attribute, which will not be fit into all sizes of screens as same as it is shown in your output image. as we are developers and we have to stick to the design first of all soI am sorry but it does not solve my problem what I want is the bottom of the curved layout should touch the bottom of the screen. I know its just the use of constraints if you can still trick it out it will be appreciable. — Paritosh purohit, Apr 24 '20 at 06:04
You can simply take all of those hardcoded values, and put them in the assets folder. Even better, create a custom style and apply that wherever you want. My point was to show you that you were using constraint layout wrong. You had multiple layout hierarchies, which will confuse you and make your UI slower on older devices. — Karan Dhillon, Apr 24 '20 at 06:06

About the constraint layout height

1 Answers1

Design preview

XML Layout file