Making an activity resizable - android

I have this activity with a Constraint Layout:
And here is the XML :
<?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/colorPrimary"
android:orientation="vertical"
tools:context=".Activity">
<TextView
android:id="#+id/textView4"
android:layout_width="290dp"
android:layout_height="35dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<TextView
android:id="#+id/textView3"
android:layout_width="290dp"
android:layout_height="33dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<SeekBar
android:id="#+id/slider"
style="#style/Widget.AppCompat.SeekBar"
android:layout_width="383dp"
android:layout_height="79dp"
android:layout_marginTop="8dp"
android:hapticFeedbackEnabled="true"
android:indeterminate="false"
android:max="1200"
android:progress="0"
android:scrollbarSize="30dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"
app:tickMark="#color/colorAccent" />
<TextView
android:id="#+id/textView"
android:layout_width="197dp"
android:layout_height="80dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="50sp"
android:typeface="normal"
app:fontFamily="sans-serif"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<TextView
android:id="#+id/textView2"
android:layout_width="290dp"
android:layout_height="33dp"
android:layout_marginTop="24dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/Text"
android:layout_width="231dp"
android:layout_height="67dp"
android:layout_marginTop="4dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="25sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/slider" />
<TextView
android:id="#+id/total"
android:layout_width="270dp"
android:layout_height="94dp"
android:layout_marginTop="8dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="60sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/comisionText" />
<Button
android:id="#+id/btn"
android:layout_width="142dp"
android:layout_height="45dp"
android:layout_marginBottom="16dp"
android:background="#drawable/btn_effect"
android:clickable="false"
android:enabled="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/submitBtn"
app:layout_constraintVertical_bias="0.678" />
<Button
android:id="#+id/submitBtn"
android:layout_width="181dp"
android:layout_height="71dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="4dp"
android:background="#drawable/btn_effect"
android:clickable="false"
android:enabled="false"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/but" />
<EditText
android:id="#+id/but"
android:layout_width="217dp"
android:layout_height="45dp"
android:layout_marginTop="16dp"
android:clickable="false"
android:ems="10"
android:enabled="false"
android:gravity="center_horizontal"
android:inputType="number"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/total" />
</androidx.constraintlayout.widget.ConstraintLayout>
The problem is that when i try it on a smaller screen phone, it cuts off some of the objects from the bottom of the activity. How can i make it resizable so it can fit any screen size? Every object is constrained Top-To-Bottom of the object above it.


You can use ScrollView, so the user can scroll down and see the whole activity. Just wrapping your ConstraintLayout in ScrollView should be enough, like this:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
android:orientation="vertical"
tools:context=".Activity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:orientation="vertical"
tools:context=".Activity">
<TextView
android:id="#+id/textView4"
android:layout_width="290dp"
android:layout_height="35dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<TextView
android:id="#+id/textView3"
android:layout_width="290dp"
android:layout_height="33dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<SeekBar
android:id="#+id/slider"
style="#style/Widget.AppCompat.SeekBar"
android:layout_width="383dp"
android:layout_height="79dp"
android:layout_marginTop="8dp"
android:hapticFeedbackEnabled="true"
android:indeterminate="false"
android:max="1200"
android:progress="0"
android:scrollbarSize="30dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"
app:tickMark="#color/colorAccent" />
<TextView
android:id="#+id/textView"
android:layout_width="197dp"
android:layout_height="80dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="50sp"
android:typeface="normal"
app:fontFamily="sans-serif"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<TextView
android:id="#+id/textView2"
android:layout_width="290dp"
android:layout_height="33dp"
android:layout_marginTop="24dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/Text"
android:layout_width="231dp"
android:layout_height="67dp"
android:layout_marginTop="4dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="25sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/slider" />
<TextView
android:id="#+id/total"
android:layout_width="270dp"
android:layout_height="94dp"
android:layout_marginTop="8dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="60sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Text" />
<Button
android:id="#+id/btn"
android:layout_width="142dp"
android:layout_height="45dp"
android:layout_marginBottom="16dp"
android:background="#drawable/btn_effect"
android:clickable="false"
android:enabled="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/submitBtn"
app:layout_constraintVertical_bias="0.678" />
<Button
android:id="#+id/submitBtn"
android:layout_width="181dp"
android:layout_height="71dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="4dp"
android:background="#drawable/btn_effect"
android:clickable="false"
android:enabled="false"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/but" />
<EditText
android:id="#+id/but"
android:layout_width="217dp"
android:layout_height="45dp"
android:layout_marginTop="16dp"
android:clickable="false"
android:ems="10"
android:enabled="false"
android:gravity="center_horizontal"
android:inputType="number"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/total"
android:importantForAutofill="no" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
Anyways, you should use wrap_content and match_parent instead of hard-coded sizes. Your layout needs to be flexible and adapt to different screen sizes, and that's not possible if you're using determined sizes in your layout. Please take a look into Android Developer: Support different screen sizes

Related

The layout is overlapping after running app in ConstraintLayout

I created a profile layout and in XML file it looks like this :
but, when I run my project, it looks like this :
This is my XML code if it helps :
<?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"
tools:context=".Profile.ProfileFragment"
android:background="#drawable/main_activity">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_photo"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerVertical="true"
app:civ_border_color="#color/black"
app:civ_border_width="2dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.486"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.164" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/buttonFollow"
android:layout_width="83dp"
android:layout_height="31dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:background="#drawable/buton_follow"
android:fontFamily="#font/segoe_ui"
android:text="Follow"
android:textColor="#color/white"
android:textSize="15dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.481"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/profile_photo"
app:layout_constraintVertical_bias="0.04" />
<TextView
android:id="#+id/display_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:fontFamily="#font/segoe_ui_bold"
android:text="Calin Alexandra"
android:textColor="#color/black"
android:textSize="25sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/buttonFollow" />
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/segoe_ui"
android:text="Cook lover"
android:textColor="#color/black"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.471"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/display_name"
app:layout_constraintVertical_bias="0.023" />
<TextView
android:id="#+id/website"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="#font/segoe_ui"
android:text="www.cook.ro"
android:textColor="#color/link_blue"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.47"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/description" />
<TextView
android:id="#+id/tvPosts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/segoe_ui"
android:text="250"
android:textColor="#color/black"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.29"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.472" />
<TextView
android:id="#+id/textPosts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="112dp"
android:layout_marginTop="4dp"
android:fontFamily="#font/segoe_ui"
android:text="Posts"
android:textColor="#color/black"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvPosts" />
<TextView
android:id="#+id/tvFollowers"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/segoe_ui"
android:text="300"
android:textColor="#color/black"
android:textSize="18sp"
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.471" />
<TextView
android:id="#+id/textFollowers"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:fontFamily="#font/segoe_ui"
android:text="Followers"
android:textColor="#color/black"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#+id/textFollowing"
app:layout_constraintHorizontal_bias="0.606"
app:layout_constraintStart_toEndOf="#+id/textPosts"
app:layout_constraintTop_toBottomOf="#+id/tvFollowers" />
<TextView
android:id="#+id/tvFollowing"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="112dp"
android:fontFamily="#font/segoe_ui"
android:text="400"
android:textColor="#color/black"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.471" />
<TextView
android:id="#+id/textFollowing"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginEnd="100dp"
android:fontFamily="#font/segoe_ui"
android:text="Following"
android:textColor="#color/black"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvFollowing" />
<TextView
android:id="#+id/textEditProfile"
android:layout_width="198dp"
android:layout_height="22dp"
android:background="#drawable/text_user_pass"
android:text="Edit your profile"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textFollowers"
app:layout_constraintVertical_bias="0.054"
android:fontFamily="#font/segoe_ui"/>
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/buton_mesaj"
android:layout_width="31dp"
android:layout_height="30dp"
android:background="#drawable/ic_message"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.855"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.02" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/buton_setari"
android:layout_width="31dp"
android:layout_height="30dp"
android:background="#drawable/ic_settings"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.111"
app:layout_constraintStart_toEndOf="#+id/buton_mesaj"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.02" />
<TextView
android:id="#+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="alecalin36"
android:textColor="#color/black"
android:textSize="15sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/buton_mesaj"
app:layout_constraintHorizontal_bias="0.062"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.019" />
<GridView
android:id="#+id/gridView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:horizontalSpacing="1dp"
android:numColumns="3"
android:stretchMode="columnWidth"
android:verticalSpacing="1dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textFollowers">
</GridView>
</androidx.constraintlayout.widget.ConstraintLayout>
I want to mention that all the items(TextView, Button) have been added only with drag and drop and after that, I connected them to edges and items around to stay in the same place but unfortunately this is not happening.
Also, I did the same thing with my Login layout and I don't have any problem.
Does this problem have to do with the fact that the username, description, etc from the second photo are taken from firebase?? How to solve this problem?

You have to constrain top of tvPosts,tvFollowers,tvFollowing to bottom of website
<?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"
tools:context=".Profile.ProfileFragment"
android:background="#drawable/main_activity">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_photo"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerVertical="true"
app:civ_border_color="#color/black"
app:civ_border_width="2dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.486"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.164" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/buttonFollow"
android:layout_width="83dp"
android:layout_height="31dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:background="#drawable/buton_follow"
android:fontFamily="#font/segoe_ui"
android:text="Follow"
android:textColor="#color/white"
android:textSize="15dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.481"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/profile_photo"
app:layout_constraintVertical_bias="0.04" />
<TextView
android:id="#+id/display_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:fontFamily="#font/segoe_ui_bold"
android:text="Calin Alexandra"
android:textColor="#color/black"
android:textSize="25sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/buttonFollow" />
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/segoe_ui"
android:text="Cook lover"
android:textColor="#color/black"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.471"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/display_name"
app:layout_constraintVertical_bias="0.023" />
<TextView
android:id="#+id/website"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:fontFamily="#font/segoe_ui"
android:text="www.cook.ro"
android:textColor="#color/link_blue"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.47"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/description" />
<TextView
android:id="#+id/tvPosts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/segoe_ui"
android:text="250"
android:textColor="#color/black"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.29"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/website"
app:layout_constraintVertical_bias="0.472" />
<TextView
android:id="#+id/textPosts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:fontFamily="#font/segoe_ui"
android:text="Posts"
android:textColor="#color/black"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="#id/tvPosts"
app:layout_constraintEnd_toEndOf="#id/tvPosts"
app:layout_constraintTop_toBottomOf="#+id/tvPosts" />
<TextView
android:id="#+id/tvFollowers"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/segoe_ui"
android:text="300"
android:textColor="#color/black"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/website"
app:layout_constraintVertical_bias="0.471" />
<TextView
android:id="#+id/textFollowers"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:fontFamily="#font/segoe_ui"
android:text="Followers"
android:textColor="#color/black"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="#id/tvFollowers"
app:layout_constraintEnd_toEndOf="#id/tvFollowers"
app:layout_constraintTop_toBottomOf="#+id/tvFollowers" />
<TextView
android:id="#+id/tvFollowing"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="112dp"
android:fontFamily="#font/segoe_ui"
android:text="400"
android:textColor="#color/black"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/website"
app:layout_constraintVertical_bias="0.471" />
<TextView
android:id="#+id/textFollowing"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:fontFamily="#font/segoe_ui"
android:text="Following"
android:textColor="#color/black"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="#id/tvFollowing"
app:layout_constraintEnd_toEndOf="#id/tvFollowing"
app:layout_constraintTop_toBottomOf="#+id/tvFollowing" />
<TextView
android:id="#+id/textEditProfile"
android:layout_width="198dp"
android:layout_height="22dp"
android:background="#drawable/text_user_pass"
android:text="Edit your profile"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textFollowers"
app:layout_constraintVertical_bias="0.054"
android:fontFamily="#font/segoe_ui"/>
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/buton_mesaj"
android:layout_width="31dp"
android:layout_height="30dp"
android:background="#drawable/ic_message"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.855"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.02" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/buton_setari"
android:layout_width="31dp"
android:layout_height="30dp"
android:background="#drawable/ic_settings"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.111"
app:layout_constraintStart_toEndOf="#+id/buton_mesaj"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.02" />
<TextView
android:id="#+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="alecalin36"
android:textColor="#color/black"
android:textSize="15sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/buton_mesaj"
app:layout_constraintHorizontal_bias="0.062"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.019" />
<GridView
android:id="#+id/gridView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:horizontalSpacing="1dp"
android:numColumns="3"
android:stretchMode="columnWidth"
android:verticalSpacing="1dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textFollowers">
</GridView>
</androidx.constraintlayout.widget.ConstraintLayout>

ScrollView Overlaps content in fragment

In this fragment as soon as try to scroll the contents start overlapping on each other.
This fragment opens immediately after a Splash Screen Activity. when I try to input something in first edit text and then scroll at that time all the things overlap on each other. The overlapping takes place only when I try to scroll. Please Help
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:id="#+id/scrollView_login"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".LoginFragment"
android:layout_height="match_parent"
android:layout_width="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/MarginTop"
android:text="#string/app_name"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="20dp"
android:src="#drawable/ic_launch"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<TextView
android:id="#+id/tagline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/tagline"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<TextView
android:id="#+id/login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="#string/Candidate_login"
android:textColor="#000000"
android:textSize="18dp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tagline" />
<TextView
android:id="#+id/email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="56dp"
android:layout_marginTop="24dp"
android:text="#string/email"
android:textColor="#000000"
android:textSize="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/login" />
<EditText
android:id="#+id/emailmobile"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#color/White"
android:hint="Enter Email"
android:inputType="textEmailAddress"
android:padding="5dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/email" />
<TextView
android:id="#+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="56dp"
android:layout_marginTop="24dp"
android:text="#string/pass"
android:textColor="#000000"
android:textSize="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/emailmobile" />
<EditText
android:id="#+id/passedit"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#color/White"
android:hint="#string/pass"
android:inputType="textPassword"
android:padding="5dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.504"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/password" />
<Button
android:id="#+id/log_in"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="#color/colorPrimaryDark"
android:padding="5dp"
android:text="#string/login"
android:textColor="#color/White"
android:textSize="18dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/passedit" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:text="#string/forget_pass"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/log_in" />
<LinearLayout
android:id="#+id/sign"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="13dp"
android:gravity="center_horizontal"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView6">
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/NoAccount" />
<TextView
android:id="#+id/textViewSignUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="3dp"
android:text="#string/signup"
android:textColor="#color/colorPrimaryDark" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

Solver for ConstraintLayout doesn't measure include correctly

I'm currently practicing UI designing in Android and needed to make a layout be included in multiple layouts as a header. So I made this quite complex layout below.
<?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="wrap_content"
android:background="#f5f5f5">
<include
android:id="#+id/includeItem"
layout="#layout/dialog_header"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="500dp"
android:layout_marginTop="60dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/includeItem">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="16dp" />
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="16dp" />
<EditText
android:id="#+id/editText4"
style="#style/CustomEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:ems="10"
android:hint="#string/name"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView5"
app:layout_constraintTop_toTopOf="#+id/imageView5" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_marginStart="16dp"
android:layout_marginTop="32dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#color/btn_bg" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="#drawable/border_transparent_bg"
android:drawableRight="#drawable/ic_chevron_right_black_24dp"
android:gravity="start|center_vertical"
android:padding="8dp"
android:text="#string/select_category"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="#+id/editText4"
app:layout_constraintStart_toStartOf="#+id/editText4"
app:layout_constraintTop_toBottomOf="#+id/editText4" />
<TextView
android:id="#+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/tap_to_edit"
android:textColor="#color/textDarkSecondary"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/imageView5"
app:layout_constraintStart_toStartOf="#+id/imageView5"
app:layout_constraintTop_toBottomOf="#+id/imageView5" />
<TableRow
android:id="#+id/tableRow4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/border_transparent_bg"
android:padding="8dp"
app:layout_constraintEnd_toEndOf="#+id/tableRow3"
app:layout_constraintStart_toStartOf="#+id/tableRow3"
app:layout_constraintTop_toBottomOf="#+id/tableRow3">
<EditText
android:id="#+id/editText7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_weight="1"
android:background="#color/white"
android:ems="10"
android:hint="#string/price"
android:inputType="textPersonName"
android:padding="8dp"
android:textSize="24sp" />
<EditText
android:id="#+id/editText6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_weight="1"
android:background="#color/white"
android:ems="10"
android:hint="#string/sku"
android:inputType="textPersonName"
android:padding="8dp"
android:textSize="24sp" />
</TableRow>
<TextView
android:id="#+id/textView11"
style="#style/ModuleTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="#string/variations"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView10" />
<TableRow
android:id="#+id/tableRow3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:background="#drawable/border_transparent_bg"
android:padding="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/textView11"
app:layout_constraintTop_toBottomOf="#+id/textView11">
<EditText
android:id="#+id/editText8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/white"
android:ems="10"
android:hint="#string/name"
android:inputType="textPersonName"
android:padding="8dp"
android:textSize="24sp" />
</TableRow>
<Button
android:id="#+id/button6"
style="#style/CommonButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="#string/add_variation"
app:layout_constraintEnd_toEndOf="#+id/tableRow4"
app:layout_constraintStart_toStartOf="#+id/tableRow4"
app:layout_constraintTop_toBottomOf="#+id/tableRow4" />
<TextView
android:id="#+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/add_variation_msg"
android:textColor="#color/textDarkSecondary"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/button6"
app:layout_constraintStart_toStartOf="#+id/button6"
app:layout_constraintTop_toBottomOf="#+id/button6" />
<TextView
android:id="#+id/textView13"
style="#style/ModuleTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="#string/modifier_sets"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView12" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/textView13">
</android.support.v7.widget.RecyclerView>
<TextView
android:id="#+id/textView14"
style="#style/ModuleTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="#string/taxes"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/recyclerView" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView2"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/textView14" />
<TextView
android:id="#+id/textView17"
style="#style/ModuleTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="#string/select_kitchen_location"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/recyclerView2" />
<Spinner
android:id="#+id/spinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:padding="8dp"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/textView17" />
<CheckBox
android:id="#+id/checkBox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="#string/available"
android:textColor="#color/black"
android:textSize="24sp"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/spinner" />
<EditText
style="#style/CustomEditText"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:textColor="#color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/checkBox" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>
This is the include layout.
<?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="wrap_content">
<ImageView
android:id="#+id/imgDlgHeaderAction"
android:layout_width="90dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/lblDlgHeaderTitle"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_add_24dp" />
<Button
android:id="#+id/btnDlgHeaderSave"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/border_bg_pressed"
android:paddingStart="32dp"
android:paddingTop="16dp"
android:paddingEnd="32dp"
android:paddingBottom="16dp"
android:text="#string/save"
android:textColor="#color/white"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/lblDlgHeaderTitle"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="TextView"
android:textColor="#color/black"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/btnDlgHeaderSave"
app:layout_constraintEnd_toStartOf="#+id/btnDlgHeaderSave"
app:layout_constraintStart_toEndOf="#id/imgDlgHeaderAction"
app:layout_constraintTop_toTopOf="#+id/btnDlgHeaderSave" />
</android.support.constraint.ConstraintLayout>
In the layout editor, it looks fine. But when I compile my code, the ScrollView is clipping through the include without that much marginTop. I might file an issue if this is a bug.
From the suggestions below, I tried to change ScrollView to a NestedScrollView. As I have guessed, it still didn't work.
I also want to emphasized that my question is not about the RecyclerViews not being able to scroll, because I know that would happen, but about the clipping of the ScrollView through the include layout.

Change your include layout constraint like below
Remove bottom constarint and used NestedScrollView in main layout instead of ScrollView
<?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="wrap_content">
<ImageView
android:id="#+id/imgDlgHeaderAction"
android:layout_width="90dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/btnDlgHeaderSave"
app:layout_constraintEnd_toStartOf="#+id/lblDlgHeaderTitle"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/btnDlgHeaderSave"
app:srcCompat="#drawable/ic_email" />
<Button
android:id="#+id/btnDlgHeaderSave"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="#color/bg_toolbar"
android:gravity="center"
android:paddingStart="32dp"
android:paddingTop="16dp"
android:paddingEnd="32dp"
android:paddingBottom="16dp"
android:text="#string/save"
android:textColor="#android:color/white"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/lblDlgHeaderTitle"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/lblDlgHeaderTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="TextView"
android:textColor="#android:color/black"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/btnDlgHeaderSave"
app:layout_constraintEnd_toStartOf="#+id/btnDlgHeaderSave"
app:layout_constraintStart_toEndOf="#+id/imgDlgHeaderAction"
app:layout_constraintTop_toTopOf="#+id/btnDlgHeaderSave" />
</androidx.constraintlayout.widget.ConstraintLayout>
Main layout
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f5f5f5">
<include
android:id="#+id/includeItem"
layout="#layout/test_include"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.core.widget.NestedScrollView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/includeItem">
<!.. Remining one as it is>
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

Constraint layout design for scroll view for recycler view

I need scroll view effect for the view inside scroll views and in the below code scroll view does not have any effect.I have connected card view to guide line and scroll view to guide line don't know because of fixed guild line scroll view is not working can any one help me in refactoring the xml with scroll view working?.
I m new to constraint layout design so i m not interested in nested constraint layout design. So i have taken only one ConstraintLayout as parent need to improve with this.
Any help is appreciated.
below is my xml code :
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/cardView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
app:cardCornerRadius="10dp"
app:cardElevation="5dp"
app:layout_constraintBottom_toTopOf="#+id/guideline3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
card_view:layout_constraintHorizontal_bias="1.0">
</android.support.v7.widget.CardView>
<android.support.constraint.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.38030097" />
<ImageView
android:id="#+id/imageViewAccType"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:elevation="5dp"
app:layout_constraintStart_toStartOf="#+id/cardView"
app:layout_constraintTop_toTopOf="#+id/cardView"
app:srcCompat="#drawable/ic_icons_casa" />
<TextView
android:id="#+id/textView57"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:text=""
android:elevation="5dp"
android:textColor="#color/light_grey"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="#+id/imageViewAccType"
app:layout_constraintStart_toEndOf="#+id/imageViewAccType"
app:layout_constraintTop_toTopOf="#+id/imageViewAccType" />
<ImageView
android:id="#+id/imageView20"
android:layout_width="0dp"
android:layout_height="0.5dp"
android:layout_marginStart="32dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="32dp"
android:scaleType="fitXY"
android:elevation="5dp"
android:tint="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView68"
app:srcCompat="#android:drawable/bottom_bar" />
<TextView
android:id="#+id/textView68"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
android:text=""
android:elevation="5dp"
android:textColor="#color/light_grey"
android:textSize="14sp"
app:layout_constraintStart_toStartOf="#+id/cardView"
app:layout_constraintTop_toBottomOf="#+id/imageView18" />
<TextView
android:id="#+id/textView69"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="32dp"
android:text="checking.."
android:textColor="#color/light_grey"
android:textSize="16sp"
android:elevation="5dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/textView62"
app:layout_constraintTop_toBottomOf="#+id/imageView18" />
<TextView
android:id="#+id/textView58"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
android:elevation="5dp"
android:text=""
android:textColor="#color/black"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="#+id/cardView"
app:layout_constraintTop_toBottomOf="#+id/textView57" />
<TextView
android:id="#+id/textView59"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="32dp"
android:elevation="5dp"
android:text="Currency"
android:textColor="#color/light_grey"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/textView58"
app:layout_constraintTop_toBottomOf="#+id/textView57" />
<TextView
android:id="#+id/textView60"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:elevation="5dp"
android:text=""
android:textColor="#color/light_grey"
android:textSize="14sp"
app:layout_constraintStart_toStartOf="#+id/cardView"
app:layout_constraintTop_toBottomOf="#+id/textView58" />
<TextView
android:id="#+id/textView61"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="32dp"
android:elevation="5dp"
android:text=""
android:textColor="#color/black"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/textView60"
app:layout_constraintTop_toBottomOf="#+id/textView59" />
<ImageView
android:id="#+id/imageView15"
android:layout_width="0dp"
android:layout_height="0.5dp"
android:layout_marginStart="32dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="32dp"
android:elevation="5dp"
android:scaleType="fitXY"
android:tint="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="#+id/cardView"
app:layout_constraintStart_toStartOf="#+id/cardView"
app:layout_constraintTop_toBottomOf="#+id/textView61"
app:srcCompat="#android:drawable/bottom_bar" />
<ImageView
android:id="#+id/imageView18"
android:layout_width="0dp"
android:layout_height="0.5dp"
android:layout_marginStart="32dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="32dp"
android:elevation="5dp"
android:scaleType="fitXY"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/cardView"
app:layout_constraintTop_toBottomOf="#+id/textView62"
app:srcCompat="#android:drawable/bottom_bar" />
<TextView
android:id="#+id/textView62"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
android:elevation="5dp"
android:text=""
android:textColor="#color/light_grey"
app:layout_constraintStart_toStartOf="#+id/cardView"
app:layout_constraintTop_toBottomOf="#+id/imageView15" />
<TextView
android:id="#+id/textView67"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="32dp"
android:elevation="5dp"
android:text="checking.."
android:textColor="#color/black"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/cardView"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/textView62"
app:layout_constraintTop_toBottomOf="#+id/imageView15" />
<TextView
android:id="#+id/textView70"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="32dp"
android:layout_marginBottom="16dp"
android:elevation="5dp"
android:gravity="center"
android:text=""
android:textColor="#android:color/holo_red_light"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="#+id/cardView"
app:layout_constraintEnd_toEndOf="#+id/cardView"
app:layout_constraintTop_toBottomOf="#+id/imageView20" />
<ScrollView
android:id="#+id/scroll_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/bottom_bar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline3">
</ScrollView>
<TextView
android:id="#+id/textView71"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:padding="10dp"
android:text="RECENT BDA PAY TRANSACTIONS"
android:textAllCaps="true"
android:textColor="#color/colorAccent"
android:textSize="14sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="#+id/scroll_view"
app:layout_constraintTop_toTopOf="#+id/guideline3" />
<TextView
android:id="#+id/textView72"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="22dp"
android:padding="10dp"
android:text="View All"
android:textAllCaps="false"
android:textColor="#color/colorPrimary"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="#+id/scroll_view"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/textView71"
app:layout_constraintTop_toTopOf="#+id/guideline3" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView1"
android:layout_width="0dp"
android:layout_height="152dp"
android:visibility="invisible"
app:layout_constraintBottom_toTopOf="#+id/guideline14"
app:layout_constraintEnd_toEndOf="#+id/scroll_view"
app:layout_constraintStart_toStartOf="#+id/scroll_view"
app:layout_constraintTop_toBottomOf="#+id/textView71" />
<TextView
android:id="#+id/textView14"
android:layout_width="match_parent"
android:layout_height="152dp"
android:layout_gravity="center"
android:gravity="center"
android:text=""
android:textAlignment="center"
android:textColor="#color/light_grey"
android:textSize="#dimen/size_16"
android:visibility="invisible"
app:layout_constraintBottom_toTopOf="#+id/textView74"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.51"
app:layout_constraintStart_toStartOf="#+id/scroll_view"
app:layout_constraintTop_toBottomOf="#+id/textView72"/>
<android.support.constraint.Guideline
android:id="#+id/guideline14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.6497948" />
<TextView
android:id="#+id/textView74"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:padding="10dp"
android:text="RECENT BDA PAY REQUESTS"
android:textAllCaps="true"
android:textColor="#color/colorAccent"
android:textSize="14sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="#+id/scroll_view"
app:layout_constraintTop_toTopOf="#+id/guideline14" />
<TextView
android:id="#+id/textView94"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="22dp"
android:padding="10dp"
android:text="View All"
android:textAllCaps="false"
android:textColor="#color/colorPrimary"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="#+id/scroll_view"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/textView74"
app:layout_constraintTop_toTopOf="#+id/guideline14" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView2"
android:layout_width="0dp"
android:layout_height="152dp"
android:layout_marginBottom="8dp"
android:visibility="invisible"
app:layout_constraintBottom_toTopOf="#+id/bottom_bar"
app:layout_constraintEnd_toEndOf="#+id/scroll_view"
app:layout_constraintStart_toStartOf="#+id/scroll_view"
app:layout_constraintTop_toBottomOf="#+id/textView74" />
<TextView
android:id="#+id/textView15"
android:layout_width="match_parent"
android:layout_height="152dp"
android:layout_gravity="center"
android:gravity="center"
android:text=""
android:textAlignment="center"
android:textColor="#color/light_grey"
android:textSize="#dimen/size_16"
android:visibility="invisible"
app:layout_constraintEnd_toEndOf="#+id/scroll_view"
app:layout_constraintHorizontal_bias="0.51"
app:layout_constraintStart_toStartOf="#+id/scroll_view"
app:layout_constraintTop_toBottomOf="#+id/textView74" />
<include
android:id="#+id/bottom_bar"
layout="#layout/bottom_sheet_layout_new"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
I m new to constraint layout design so i m not interested in nested constraint layout design. So i have taken only one ConstraintLayout as parent need to improve with this.
Any help is appreciated.

ScrollView should contain only one childView
example:
<ScrollView>
<ConstarinLayout>
.
.
.
.
</ConstraintLayout>
</Scrollview>
Then only it works..

How to make a fragment fit in a FrameLayout in all screen sizes?

I am developing an app where I want to show few fragments in a container(Framelayout) one after other. I want my fragments to fit in the framelayout without its parts going out of the screen.
I want this:
But Getting this:
Here is my code snippet:
<android.support.constraint.ConstraintLayout
android:id="#+id/relativeLayout"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="24dp"
android:background="#drawable/grey_border_circular_rect"
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="#+id/guideline3"
app:layout_constraintVertical_bias="0.0">
<FrameLayout
android:id="#+id/fragment_holder"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="32dp"
app:layout_constraintBottom_toTopOf="#+id/elipse1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</FrameLayout>
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_end="32dp" />
<ImageView
android:id="#+id/elipse1"
android:layout_width="14dp"
android:layout_height="14dp"
app:layout_constraintEnd_toStartOf="#+id/elipse2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/guideline4"
app:srcCompat="#drawable/ic_elipse_filled"
tools:layout_editor_absoluteY="568dp" />
<ImageView
android:id="#+id/elipse2"
android:layout_width="14dp"
android:layout_height="14dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="#+id/elipse1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/elipse1"
app:srcCompat="#drawable/ic_elipse_blank" />
</android.support.constraint.ConstraintLayout>
I can't share the full xml code as I have some restriction on the code. But the Root layout is also a ConstraintLayout.
fragment.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="wrap_content">
<TextView
android:id="#+id/otpVerificationTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="OTP Verification"
android:textColor="#color/blue"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/view2"
android:layout_width="wrap_content"
android:layout_height="1dp"
android:layout_marginTop="8dp"
android:background="#color/btn_grey"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/otpVerificationTV" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="8dp"
android:text="We sent you a code"
android:textColor="#android:color/black"
android:textSize="26sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/view2" />
<Button
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="56dp"
android:background="#color/transparent"
android:text="Resend OTP"
android:textAllCaps="false"
android:textColor="#color/grey_secondary"
android:textSize="20sp"
app:layout_constraintEnd_toStartOf="#+id/view3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView6" />
<View
android:id="#+id/view3"
android:layout_width="3dp"
android:layout_height="30dp"
android:layout_marginStart="10dp"
android:background="#color/grey_secondary"
app:layout_constraintBottom_toBottomOf="#+id/textView7"
app:layout_constraintEnd_toStartOf="#+id/textView7"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView5" />
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:textColor="#color/blue"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/textView5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/view3"
tools:text="29 sec" />
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="56dp"
android:text="OTP"
android:textColor="#android:color/black"
android:textSize="26sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView5" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="262dp"
android:layout_height="48dp"
android:layout_marginTop="8dp"
android:background="#color/blue"
android:orientation="vertical"
app:layout_constraintStart_toStartOf="#+id/textView8"
app:layout_constraintTop_toBottomOf="#+id/textView8" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="72dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#drawable/blue_circular_rect"
android:elevation="#dimen/btn_elevation"
android:text="Next"
android:textAllCaps="false"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/linearLayout"
app:layout_constraintTop_toBottomOf="#+id/linearLayout" />
</android.support.constraint.ConstraintLayout>
So is there any possible way that I can make the fragment fit on any screen size and all of it is visible inside the framelayout.

Below code will help with your fragment.xml file.
You didn't provided more values files means color code, string file and other. So below are some changes from your file like drawable and value related data.
Fill free to put comment if you have any question related to below views. If below code work for you then please approve this answer.
<?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">
<TextView
android:id="#+id/otpVerificationTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="OTP Verification"
android:textColor="#android:color/holo_blue_light"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/view2"
android:layout_width="wrap_content"
android:layout_height="1dp"
android:layout_marginTop="8dp"
android:background="#color/colorGrey"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/otpVerificationTV" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="We sent you a code"
android:textColor="#android:color/black"
android:textSize="26sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="#id/group2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/group2" />
<android.support.constraint.Group
android:id="#+id/group2"
android:layout_width="match_parent"
android:layout_height="0dp"
app:constraint_referenced_ids="textView6"
app:layout_constraintBottom_toTopOf="#id/group"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/view2" />
<android.support.constraint.Group
android:id="#+id/group"
android:layout_width="match_parent"
android:layout_height="0dp"
app:constraint_referenced_ids="view3,textView7,textView5"
app:layout_constraintBottom_toTopOf="#id/group1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/group2" />
<android.support.constraint.Group
android:id="#+id/group1"
android:layout_width="match_parent"
android:layout_height="0dp"
app:constraint_referenced_ids="linearLayout,textView8"
app:layout_constraintBottom_toTopOf="#id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/group" />
<Button
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:text="Resend OTP"
android:textAllCaps="false"
android:textColor="#color/colorGrey"
android:textSize="20sp"
app:layout_constraintEnd_toStartOf="#+id/view3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="#id/group"
app:layout_constraintTop_toTopOf="#+id/group" />
<View
android:id="#+id/view3"
android:layout_width="3dp"
android:layout_height="30dp"
android:layout_marginStart="10dp"
android:background="#color/colorGrey"
app:layout_constraintBottom_toBottomOf="#+id/textView7"
app:layout_constraintEnd_toStartOf="#+id/textView7"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView5" />
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:textColor="#android:color/holo_blue_light"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/textView5"
app:layout_constraintEnd_toEndOf="#id/group"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/view3"
tools:text="29 sec" />
<TextView
android:id="#+id/textView8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:text="OTP"
android:textColor="#android:color/black"
android:textSize="26sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/group1" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="262dp"
android:layout_height="48dp"
android:layout_marginTop="8dp"
android:background="#android:color/holo_blue_light"
android:orientation="vertical"
app:layout_constraintStart_toStartOf="#+id/textView8"
app:layout_constraintTop_toBottomOf="#+id/textView8" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#android:color/holo_blue_light"
android:elevation="1dp"
android:text="Next"
android:textAllCaps="false"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/linearLayout"
app:layout_constraintTop_toBottomOf="#+id/group1" />
</android.support.constraint.ConstraintLayout>

Categories

Resources