How do I prevent imageview overlapping? - android

I can't figure out how to stop this image from overlapping the other two TextViews. I need the two TextViews to maintain their position and for the ImageView to be constrained between them without being cropped.
All of these views go through different visibility states (visible/invisible/gone), so I tried adding barriers, but that didn't work. I've tried changing margins, padding, constraints etc.
The top TextView is tv_question.
The bottom TextView is tv_answer.
Between the two TextViews are two ImageViews that sit on top of each other in the layout. However, only one ImageView at a time is shown.
Layout.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_exit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="#drawable/ic_exit"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:id="#+id/tv_question"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="64dp"
android:textAlignment="textStart"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Barrier
android:id="#+id/barrier_question"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/tv_question"
app:barrierDirection="top"
app:barrierAllowsGoneWidgets="false"
app:constraint_referenced_ids="iv_question, iv_answer" />
<ImageView
android:id="#+id/iv_question"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:paddingBottom="16dp"
android:paddingEnd="16dp"
android:paddingStart="16dp"
android:paddingTop="16dp"
android:scaleType="centerInside"
app:layout_constraintBottom_toTopOf="#+id/tv_answer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_question" />
<ImageView
android:id="#+id/iv_answer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:paddingBottom="16dp"
android:paddingEnd="16dp"
android:paddingStart="16dp"
android:paddingTop="16dp"
android:scaleType="centerInside"
app:layout_constraintBottom_toTopOf="#+id/tv_answer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_question" />
<android.support.constraint.Barrier
android:id="#+id/barrier_answer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#id/tv_answer"
app:barrierDirection="bottom"
app:barrierAllowsGoneWidgets="false"
app:constraint_referenced_ids="iv_question, iv_answer"/>
<TextView
android:id="#+id/tv_answer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="112dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:textAlignment="viewStart"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/tv_complete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="#string/quiz_complete"
android:textAlignment="center"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn_showAnswer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:text="#string/quiz_showAnswer"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btn_nextQuestion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:text="#string/quiz_nextQuestion"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btn_Restart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:layout_marginStart="64dp"
android:text="#string/quiz_restart"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btn_Exit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:layout_marginEnd="64dp"
android:text="#string/quiz_exit"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />

try to set the height of the two Imageviews to be match_constraint
android:layout_height="0dp"
the full 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.support.design.widget.FloatingActionButton
android:id="#+id/fab_exit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="#drawable/ic_exit"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:id="#+id/tv_question"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="64dp"
android:textAlignment="textStart"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Barrier
android:id="#+id/barrier_question"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/tv_question"
app:barrierDirection="top"
app:barrierAllowsGoneWidgets="false"
app:constraint_referenced_ids="iv_question, iv_answer" />
<ImageView
android:id="#+id/iv_question"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:paddingBottom="16dp"
android:paddingEnd="16dp"
android:paddingStart="16dp"
android:paddingTop="16dp"
android:scaleType="centerInside"
app:layout_constraintBottom_toTopOf="#+id/tv_answer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_question" />
<ImageView
android:id="#+id/iv_answer"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:paddingBottom="16dp"
android:paddingEnd="16dp"
android:paddingStart="16dp"
android:paddingTop="16dp"
android:scaleType="centerInside"
app:layout_constraintBottom_toTopOf="#+id/tv_answer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_question" />
<android.support.constraint.Barrier
android:id="#+id/barrier_answer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#id/tv_answer"
app:barrierDirection="bottom"
app:barrierAllowsGoneWidgets="false"
app:constraint_referenced_ids="iv_question, iv_answer"/>
<TextView
android:id="#+id/tv_answer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="112dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:textAlignment="viewStart"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/tv_complete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="#string/quiz_complete"
android:textAlignment="center"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn_showAnswer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:text="#string/quiz_showAnswer"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btn_nextQuestion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:text="#string/quiz_nextQuestion"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btn_Restart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:layout_marginStart="64dp"
android:text="#string/quiz_restart"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/btn_Exit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:layout_marginEnd="64dp"
android:text="#string/quiz_exit"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />

Related

Android - Bring scroll view above fixed button

following is what my Job Info user interface looks like:
As the user scrolls across the screen, I want all the text to show up above the fixed button "Request For Hire". Right now the text is being covered by the button.This is my XML. I tried a few things I found online, but I'm not getting what I need. How will I do this?
activity_job_info.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".JobInfo">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView3"
style="#style/HeaderStyle"
android:layout_width="252dp"
android:layout_height="39dp"
android:layout_marginTop="24dp"
android:fontFamily="#font/roboto_bold"
android:text="Find Your Next Gig"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/menuIcon"
app:layout_constraintTop_toTopOf="parent" />
<SearchView
android:id="#+id/search"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_centerHorizontal="true"
android:layout_marginStart="16dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="80dp"
android:background="#drawable/rounded_button"
android:iconifiedByDefault="false"
android:paddingLeft="-10dp"
android:queryBackground="#android:color/transparent"
android:queryHint="Search Jobs"
android:searchIcon="#drawable/ic_magnifying_glass"
android:textColor="#fff"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3"
app:theme="#style/Search" />
<ImageButton
android:id="#+id/menuIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="29dp"
android:background="#null"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_burger_button" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="30dp"
android:layout_height="35dp"
android:layout_marginTop="37dp"
android:background="#null"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.4"
app:layout_constraintStart_toEndOf="#+id/search"
app:layout_constraintTop_toBottomOf="#+id/textView3"
app:srcCompat="#drawable/ic_noun_filter" />
<ScrollView
android:id="#+id/scrollView"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:background="#fff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/search"
app:layout_constraintVertical_bias="0.0">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="358dp"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/search">
<ImageView
android:id="#+id/prof_pic_info"
android:layout_width="110dp"
android:layout_height="110dp"
android:layout_marginStart="16dp"
android:layout_marginTop="40dp"
android:layout_marginBottom="10dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/jobName_info"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="42dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/roboto_bold"
android:textColor="#000"
android:textSize="16sp"
android:textStyle="normal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/prof_pic_info"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/recruiterName_info"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/roboto"
android:textColor="#000"
android:textSize="10sp"
android:textStyle="normal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/prof_pic_info"
app:layout_constraintTop_toBottomOf="#+id/jobName_info" />
<TextView
android:id="#+id/jobLocation_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/roboto_light"
android:textColor="#000"
android:textSize="12sp"
android:textStyle="normal"
app:layout_constraintStart_toEndOf="#+id/prof_pic_info"
app:layout_constraintTop_toBottomOf="#+id/recruiterName_info" />
<TextView
android:id="#+id/jobCharge_info"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/roboto_light"
android:textColor="#000"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/jobLocation_info"
app:layout_constraintTop_toBottomOf="#+id/recruiterName_info" />
<TextView
android:id="#+id/jobDate_info"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/roboto"
android:textColor="#000"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/prof_pic_info"
app:layout_constraintTop_toBottomOf="#+id/jobCharge_info" />
<TextView
android:id="#+id/jobTime_info"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/roboto"
android:textColor="#000"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/prof_pic_info"
app:layout_constraintTop_toBottomOf="#+id/jobDate_info" />
<TextView
android:id="#+id/jobDesc_header"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="30dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/roboto_medium"
android:text="Job Description"
android:textColor="#000"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/prof_pic_info" />
<TextView
android:id="#+id/jobTasks_header"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/roboto_medium"
android:text="Your Tasks"
android:textColor="#000"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/jobDesc" />
<TextView
android:id="#+id/additonalPref_header"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/roboto_medium"
android:text="Additional Preferences"
android:textColor="#000"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/jobTasks" />
<TextView
android:id="#+id/jobTasks"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/roboto"
android:textColor="#000"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/jobTasks_header" />
<TextView
android:id="#+id/additionalPref"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/roboto"
android:textColor="#000"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/additonalPref_header" />
<TextView
android:id="#+id/jobDesc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/roboto"
android:textColor="#000"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/jobDesc_header" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="300dp"
android:layout_height="55dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:background="#drawable/request_hire_container"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintVertical_bias="0.0">
<Button
android:layout_width="150dp"
android:layout_height="40dp"
android:layout_marginStart="16dp"
android:background="#drawable/rounded_button"
android:fontFamily="#font/roboto_bold"
android:text="Request For Hire"
android:textAllCaps="false"
android:textColor="#272343"
android:textSize="12dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.navigation.NavigationView
android:id="#+id/hamburger_menu"
android:layout_width="250dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#drawable/rounded_corner_drawer"
app:headerLayout="#layout/nav_header"
app:itemHorizontalPadding="30dp"
app:itemIconSize="16dp"
app:itemIconTint="#272343"
app:itemTextAppearance="#style/Nav_text"
app:menu="#menu/hamburger_menu" />
</androidx.drawerlayout.widget.DrawerLayout>
Constraint the ScrollView bottom to Button's top constraint.
Then set android:layout_height="0dp" of the scrollView
I have made changes in your code, copy-paste whole code and try it
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".JobInfo">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView3"
style="#style/HeaderStyle"
android:layout_width="252dp"
android:layout_height="39dp"
android:layout_marginTop="24dp"
android:fontFamily="#font/roboto_bold"
android:text="Find Your Next Gig"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/menuIcon"
app:layout_constraintTop_toTopOf="parent" />
<SearchView
android:id="#+id/search"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_centerHorizontal="true"
android:layout_marginStart="16dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="80dp"
android:background="#drawable/rounded_button"
android:iconifiedByDefault="false"
android:paddingLeft="-10dp"
android:queryBackground="#android:color/transparent"
android:queryHint="Search Jobs"
android:searchIcon="#drawable/ic_magnifying_glass"
android:textColor="#fff"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3"
app:theme="#style/Search" />
<ImageButton
android:id="#+id/menuIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="29dp"
android:background="#null"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_burger_button" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="30dp"
android:layout_height="35dp"
android:layout_marginTop="37dp"
android:background="#null"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.4"
app:layout_constraintStart_toEndOf="#+id/search"
app:layout_constraintTop_toBottomOf="#+id/textView3"
app:srcCompat="#drawable/ic_noun_filter" />
<ScrollView
android:id="#+id/scrollView"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:background="#fff"
app:layout_constraintBottom_toTopOf="#+id/constraintLayout5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/search">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="358dp"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/search">
<ImageView
android:id="#+id/prof_pic_info"
android:layout_width="110dp"
android:layout_height="110dp"
android:layout_marginStart="16dp"
android:layout_marginTop="40dp"
android:layout_marginBottom="10dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/jobName_info"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="42dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/roboto_bold"
android:textColor="#000"
android:textSize="16sp"
android:textStyle="normal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/prof_pic_info"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/recruiterName_info"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/roboto"
android:textColor="#000"
android:textSize="10sp"
android:textStyle="normal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/prof_pic_info"
app:layout_constraintTop_toBottomOf="#+id/jobName_info" />
<TextView
android:id="#+id/jobLocation_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/roboto_light"
android:textColor="#000"
android:textSize="12sp"
android:textStyle="normal"
app:layout_constraintStart_toEndOf="#+id/prof_pic_info"
app:layout_constraintTop_toBottomOf="#+id/recruiterName_info" />
<TextView
android:id="#+id/jobCharge_info"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/roboto_light"
android:textColor="#000"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/jobLocation_info"
app:layout_constraintTop_toBottomOf="#+id/recruiterName_info" />
<TextView
android:id="#+id/jobDate_info"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/roboto"
android:textColor="#000"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/prof_pic_info"
app:layout_constraintTop_toBottomOf="#+id/jobCharge_info" />
<TextView
android:id="#+id/jobTime_info"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/roboto"
android:textColor="#000"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/prof_pic_info"
app:layout_constraintTop_toBottomOf="#+id/jobDate_info" />
<TextView
android:id="#+id/jobDesc_header"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="30dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/roboto_medium"
android:text="Job Description"
android:textColor="#000"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/prof_pic_info" />
<TextView
android:id="#+id/jobTasks_header"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/roboto_medium"
android:text="Your Tasks"
android:textColor="#000"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/jobDesc" />
<TextView
android:id="#+id/additonalPref_header"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/roboto_medium"
android:text="Additional Preferences"
android:textColor="#000"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/jobTasks" />
<TextView
android:id="#+id/jobTasks"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/roboto"
android:textColor="#000"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/jobTasks_header" />
<TextView
android:id="#+id/additionalPref"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/roboto"
android:textColor="#000"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/additonalPref_header" />
<TextView
android:id="#+id/jobDesc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:fontFamily="#font/roboto"
android:textColor="#000"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/jobDesc_header" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout5"
android:layout_width="300dp"
android:layout_height="55dp"
android:layout_marginBottom="16dp"
android:background="#drawable/request_hire_container"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<Button
android:layout_width="150dp"
android:layout_height="40dp"
android:layout_marginStart="16dp"
android:background="#drawable/rounded_button"
android:fontFamily="#font/roboto_bold"
android:text="Request For Hire"
android:textAllCaps="false"
android:textColor="#272343"
android:textSize="12dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.navigation.NavigationView
android:id="#+id/hamburger_menu"
android:layout_width="250dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#drawable/rounded_corner_drawer"
app:headerLayout="#layout/nav_header"
app:itemHorizontalPadding="30dp"
app:itemIconSize="16dp"
app:itemIconTint="#272343"
app:itemTextAppearance="#style/Nav_text"
app:menu="#menu/hamburger_menu" />
</androidx.drawerlayout.widget.DrawerLayout>

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>

UI on design view is not being displayed the same in emulator

I have a design created with ConstraintLayout. On the design pane is it okay, but when I run it on emulator it's not same same. Below is the image of how it looks on design view
And the next one is how it looks on emulator.
A snippet of the manifest
<activity
android:theme="#style/Theme.MaterialComponents.Light.DarkActionBar"
android:name=".WelcomeActivity" />
I have these installed
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support:design:28.0.0'
compileSdkVersion 28
minSdkVersion 16
targetSdkVersion 28
I have extended AppCompatActivity for the WecomeActivity class. I have also tried to invalidate cache and restart but it's not working.
I have no idea what is causing this. Thanks for help.
Here is the the code for that.
activity_welcome.yml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".WelcomeActivity">
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="96dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="#string/safe"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<TextView
android:id="#+id/textView2"
android:layout_width="45dp"
android:layout_height="20dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="20dp"
android:text="#string/cheap"
app:layout_constraintBottom_toTopOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="411dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:contentDescription="#string/todo"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.515"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:srcCompat="#drawable/guliver_go_logo" />
<TextView
android:id="#+id/textView"
android:layout_width="70dp"
android:layout_height="20dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:text="#string/convinient"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<Button
android:id="#+id/welcome_login_button"
style="#style/Widget.MaterialComponents.Button.TextButton"
android:layout_width="141dp"
android:layout_height="63dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="88dp"
android:layout_weight="1"
android:background="#drawable/button_login_rounded"
android:text="#string/start_phone_auth"
android:textColor="#color/colorPrimaryDark"
android:textSize="20sp"
app:backgroundTint="#color/login_button_color"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.275"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/welcome_call_button"
style="#style/Widget.MaterialComponents.Button.UnelevatedButton.Icon"
android:layout_width="141dp"
android:layout_height="63dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="9dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="88dp"
android:layout_weight="1"
android:background="#drawable/button_call_rounded"
android:drawablePadding="5dp"
android:paddingLeft="40dp"
android:paddingRight="40dp"
app:backgroundTint="#color/call_button_color"
app:icon="#drawable/ic_call"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.83"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
Here is the layout as you might missing some constraint of image or assigning wrong image constraint.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:layout_width="0dp"
android:layout_height="400dp" tools:srcCompat="#tools:sample/avatars[1]"
android:id="#+id/imageView" app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="32dp" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"/>
<TextView
android:text="Text One"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="wrap_content"
android:id="#+id/textView" android:layout_marginTop="24dp"
app:layout_constraintTop_toBottomOf="#+id/imageView" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"/>
<TextView
android:text="Text Two"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="wrap_content"
android:id="#+id/textView2" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"
app:layout_constraintTop_toBottomOf="#+id/textView" android:layout_marginTop="8dp"/>
<TextView
android:text="TextView"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="wrap_content"
android:id="#+id/textView3" android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/textView2" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"/>
<Button
android:text="Phone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button"
app:layout_constraintBaseline_toBaselineOf="#+id/button2" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="32dp" app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintHorizontal_bias="0.5"/>
<Button
android:text="Call"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button2" app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="32dp"
app:layout_constraintStart_toEndOf="#+id/button" android:layout_marginTop="32dp"
app:layout_constraintTop_toBottomOf="#+id/textView3" app:layout_constraintHorizontal_bias="0.5"/>
</android.support.constraint.ConstraintLayout>
or With Toolbar Set theme as Theme.MaterialComponents.Light.NoActionBar not as this Theme.MaterialComponents.Light.DarkActionBar. Then apply
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:id="#+id/toolbar" app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"/>
<ImageView
android:layout_width="0dp"
android:layout_height="400dp" tools:srcCompat="#tools:sample/avatars[1]"
android:id="#+id/imageView" app:layout_constraintTop_toBottomOf="#id/toolbar"
android:layout_marginTop="32dp" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"/>
<TextView
android:text="Text One"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="wrap_content"
android:id="#+id/textView" android:layout_marginTop="24dp"
app:layout_constraintTop_toBottomOf="#+id/imageView" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"/>
<TextView
android:text="Text Two"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="wrap_content"
android:id="#+id/textView2" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"
app:layout_constraintTop_toBottomOf="#+id/textView" android:layout_marginTop="8dp"/>
<TextView
android:text="TextView"
android:layout_width="0dp"
android:gravity="center"
android:layout_height="wrap_content"
android:id="#+id/textView3" android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/textView2" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"/>
<Button
android:text="Phone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button"
app:layout_constraintBaseline_toBaselineOf="#+id/button2" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="32dp" app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintHorizontal_bias="0.5"/>
<Button
android:text="Call"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button2" app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="32dp"
app:layout_constraintStart_toEndOf="#+id/button" android:layout_marginTop="32dp"
app:layout_constraintTop_toBottomOf="#+id/textView3" app:layout_constraintHorizontal_bias="0.5"/>
</android.support.constraint.ConstraintLayout>
For small screen phone add ScrollView After ConstraintLayout (only if your development has phone screen < 5.0).

Problem in using NestedScrollView in Constraint layout

I am using Constraint layout inside the NestestScrollView as shown below.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/clProfileFragment"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/appCompatImageView8"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.7"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/bg_nature" />
<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/ivProfileFragment"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:src="#drawable/ic_profile"
android:visibility="visible"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvUserName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:fontFamily="#font/raleway_medium"
android:letterSpacing="0.2"
android:textAlignment="center"
android:textColor="#color/darkBlue"
app:layout_constraintBottom_toBottomOf="#+id/ivProfileFragment"
app:layout_constraintStart_toEndOf="#+id/ivProfileFragment"
app:layout_constraintTop_toTopOf="#+id/ivProfileFragment"
tools:text="Mehul Kanzriya" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/ivCloseProfileFragment"
style="#style/VectorImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_close" />
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:fillViewport="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ivProfileFragment"
app:layout_constraintBottom_toTopOf="#id/button">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/raleway_semibold"
android:letterSpacing="0.3"
android:text="#string/text_subscribe"
android:textColor="#color/darkBlue"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:letterSpacing="0.3"
android:text="#string/text_subscription_feature_1"
android:textAlignment="center"
android:textColor="#color/subscriptionFeaturesColor"
android:textSize="#dimen/subscriptionFeaturesSize"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:letterSpacing="0.3"
android:text="#string/text_subscription_feature_2"
android:textAlignment="center"
android:textColor="#color/subscriptionFeaturesColor"
android:textSize="#dimen/subscriptionFeaturesSize"
app:layout_constraintEnd_toEndOf="#+id/textView2"
app:layout_constraintStart_toStartOf="#+id/textView2"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<TextView
android:id="#+id/textView5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:letterSpacing="0.3"
android:text="#string/text_subscription_feature_3"
android:textAlignment="center"
android:textColor="#color/subscriptionFeaturesColor"
android:textSize="#dimen/subscriptionFeaturesSize"
app:layout_constraintEnd_toEndOf="#+id/textView4"
app:layout_constraintStart_toStartOf="#+id/textView4"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/appCompatImageView2"
android:layout_width="350dp"
android:layout_height="168dp"
android:layout_marginTop="32dp"
app:layout_constraintEnd_toEndOf="#+id/textView5"
app:layout_constraintStart_toStartOf="#+id/textView5"
app:layout_constraintTop_toBottomOf="#+id/textView5"
app:srcCompat="#mipmap/bg_pdf_resting" />
<com.google.android.material.card.MaterialCardView
android:id="#+id/cvAnnualPlan"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:cardBackgroundColor="#android:color/transparent"
app:cardCornerRadius="14dp"
app:cardElevation="0dp"
app:layout_constraintEnd_toStartOf="#+id/cvMonthlyPlan"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/appCompatImageView2"
app:strokeColor="#color/darkBlue"
app:strokeWidth="3dp">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
app:cardBackgroundColor="#color/subscriptionCardBackgroundColor"
app:cardCornerRadius="12dp"
app:cardElevation="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/darkBlue"
android:fontFamily="#font/raleway_medium"
android:letterSpacing="0.1"
android:padding="8dp"
android:text="#string/text_subscription_most_popular"
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/raleway_semibold"
android:letterSpacing="0.3"
android:text="ANNUAL"
android:textColor="#color/lightYellow"
android:textSize="#dimen/subscriptionPlanTitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView7" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/roboto_bold"
android:text="Rs 60.00"
android:textColor="#android:color/white"
android:textSize="#dimen/subscriptionPlanPrice"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="32dp"
android:fontFamily="#font/raleway_semibold"
android:letterSpacing="0.3"
android:text="#string/text_per_month"
android:textColor="#android:color/white"
android:textSize="#dimen/subscriptionPlanMonthly"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView6" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</com.google.android.material.card.MaterialCardView>
<com.google.android.material.card.MaterialCardView
android:id="#+id/cvMonthlyPlan"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:cardBackgroundColor="#android:color/transparent"
app:cardCornerRadius="14dp"
app:cardElevation="0dp"
app:layout_constraintBottom_toBottomOf="#+id/cvAnnualPlan"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/cvAnnualPlan"
app:layout_constraintTop_toTopOf="#+id/cvAnnualPlan"
app:strokeColor="#color/darkBlue"
app:strokeWidth="3dp">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
app:cardBackgroundColor="#color/subscriptionCardBackgroundColor"
app:cardCornerRadius="12dp"
app:cardElevation="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="8dp"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView44"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/raleway_semibold"
android:letterSpacing="0.3"
android:text="MONTHLY"
android:textColor="#color/lightYellow"
android:textSize="#dimen/subscriptionPlanTitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView8" />
<TextView
android:id="#+id/textView66"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/roboto_bold"
android:text="Rs 70.00"
android:textColor="#android:color/white"
android:textSize="#dimen/subscriptionPlanPrice"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView44" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="32dp"
android:fontFamily="#font/raleway_semibold"
android:letterSpacing="0.3"
android:text="#string/text_per_month"
android:textColor="#android:color/white"
android:textSize="#dimen/subscriptionPlanMonthly"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView66" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</com.google.android.material.card.MaterialCardView>
<TextView
android:id="#+id/textView9"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:letterSpacing="0.3"
android:text="#string/text_subscription_feature_4"
android:textAlignment="center"
android:textColor="#color/subscriptionFeaturesColor"
android:textSize="#dimen/subscriptionFeaturesSize"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cvAnnualPlan" />
<TextView
android:id="#+id/textView10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:letterSpacing="0.3"
android:text="#string/text_subscription_feature_5"
android:textAlignment="center"
android:textColor="#color/subscriptionFeaturesColor"
android:textSize="#dimen/subscriptionFeaturesSize"
app:layout_constraintEnd_toEndOf="#+id/textView9"
app:layout_constraintStart_toStartOf="#+id/textView9"
app:layout_constraintTop_toBottomOf="#+id/textView9" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
android:fontFamily="#font/raleway_semibold"
android:letterSpacing="0.3"
android:text="#string/button_logout"
android:textAlignment="center"
android:textColor="#color/logoutButtonColor"
android:textSize="#dimen/subscriptionFeaturesSize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/textView10"
app:layout_constraintStart_toStartOf="#+id/textView10"
app:layout_constraintTop_toBottomOf="#+id/textView10" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
<Button
android:id="#+id/button"
style="#style/UnelevatedButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/button_subscribe"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
The problem is that the first two TextViews are getting cropped and an unnecessary padding is added at the bottom of the NestedScrollView.
A similar bug was filed a few months before but I think it's not solved yet.
Similar questions have been asked before, but I can't find the proper solution to it.
Try this Result https://www.youtube.com/watch?v=PTnbzCbgBTE
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/clProfileFragment"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/appCompatImageView8"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
android:adjustViewBounds="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.7"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#color/colorAccent" />
<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/ivProfileFragment"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:src="#drawable/ic_launcher_nilesh"
android:visibility="visible"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvUserName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:letterSpacing="0.2"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="#+id/ivProfileFragment"
app:layout_constraintStart_toEndOf="#+id/ivProfileFragment"
app:layout_constraintTop_toTopOf="#+id/ivProfileFragment"
android:text="Mehul Kanzriya" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/ivCloseProfileFragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_drawer" />
<androidx.core.widget.NestedScrollView
android:layout_width="0dp"
android:layout_height="0dp"
android:clipToPadding="true"
android:fillViewport="true"
android:fitsSystemWindows="true"
app:layout_constraintBottom_toTopOf="#id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ivProfileFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:letterSpacing="0.3"
android:text="text_subscribe"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:letterSpacing="0.3"
android:text="text_subscription_feature_1"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:letterSpacing="0.3"
android:text="text_subscription_feature_2"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="#+id/textView2"
app:layout_constraintStart_toStartOf="#+id/textView2"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<TextView
android:id="#+id/textView5"
android:layout_width="0dp"
android:layout_height="16dp"
android:layout_marginTop="8dp"
android:letterSpacing="0.3"
android:text="text_subscription_feature_3"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="#+id/textView4"
app:layout_constraintStart_toStartOf="#+id/textView4"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/appCompatImageView2"
android:layout_width="350dp"
android:layout_height="168dp"
android:layout_marginTop="32dp"
app:layout_constraintEnd_toEndOf="#+id/textView5"
app:layout_constraintStart_toStartOf="#+id/textView5"
app:layout_constraintTop_toBottomOf="#+id/textView5"
app:srcCompat="#mipmap/ic_launcher_round" />
<com.google.android.material.card.MaterialCardView
android:id="#+id/cvAnnualPlan"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:cardBackgroundColor="#android:color/transparent"
app:cardCornerRadius="14dp"
app:cardElevation="0dp"
app:layout_constraintEnd_toStartOf="#+id/cvMonthlyPlan"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/appCompatImageView2"
app:strokeWidth="3dp">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
app:cardCornerRadius="12dp"
app:cardElevation="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:letterSpacing="0.1"
android:padding="8dp"
android:text="text_subscription_most_popular"
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:letterSpacing="0.3"
android:text="ANNUAL"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView7" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="Rs 60.00"
android:textColor="#android:color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="32dp"
android:letterSpacing="0.3"
android:text="text_per_month"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView6" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</com.google.android.material.card.MaterialCardView>
<com.google.android.material.card.MaterialCardView
android:id="#+id/cvMonthlyPlan"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:cardBackgroundColor="#android:color/transparent"
app:cardCornerRadius="14dp"
app:cardElevation="0dp"
app:layout_constraintBottom_toBottomOf="#+id/cvAnnualPlan"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/cvAnnualPlan"
app:layout_constraintTop_toTopOf="#+id/cvAnnualPlan"
app:strokeWidth="3dp">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
app:cardCornerRadius="12dp"
app:cardElevation="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="8dp"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView44"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:letterSpacing="0.3"
android:text="MONTHLY"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView8" />
<TextView
android:id="#+id/textView66"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="Rs 70.00"
android:textColor="#android:color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView44" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="32dp"
android:letterSpacing="0.3"
android:text="text_per_month"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView66" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</com.google.android.material.card.MaterialCardView>
<TextView
android:id="#+id/textView9"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:letterSpacing="0.3"
android:text="text_subscription_feature_4"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cvAnnualPlan" />
<TextView
android:id="#+id/textView10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:letterSpacing="0.3"
android:text="text_subscription_feature_5"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="#+id/textView9"
app:layout_constraintStart_toStartOf="#+id/textView9"
app:layout_constraintTop_toBottomOf="#+id/textView9" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
android:letterSpacing="0.3"
android:text="button_logout"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/textView10"
app:layout_constraintStart_toStartOf="#+id/textView10"
app:layout_constraintTop_toBottomOf="#+id/textView10" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="button_subscribe"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Take a look at android:layout_gravity="center" on the ConstraintLayout nested within the NestedScrollView. Try to either remove this attribute or set it to android:layout_gravity="center_horizonal". I am not quite sure what it means to center a View vertically in a NestedScrollView.
In my situation, there is a app:layout_constraintBottom_toBottomOf="parent" in the child view of ConstraintLayout.
<TextView
android:id="#+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/choose_position"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.061"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/chip_group_time"
app:layout_constraintVertical_bias="0.027" />
Delete the layout_constrainBottom_toBottomOf. My NestedScrollView work!!!!
<TextView
android:id="#+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/choose_position"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.061"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/chip_group_time"
app:layout_constraintVertical_bias="0.027" />
Be careful to use app:layout_constraintBottom_toBottomOf="parent" in NestedScrollView > ConstraintLayout . Because it make the layout fixed

How to give gravity for child views inside ConstraintLayout

I am working on ConstraintLayout, I can adjust the child views, but I can't align the Textview from left to right. Is there any way to align the Textview from left to right?
Here is the code:
<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:id="#+id/mylotslist_itemview"
android:layout_height="wrap_content">
<TextView
android:id="#+id/serialnumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:gravity="left"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:padding="#dimen/padding5"
android:text="1"
android:textColor="#color/black"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/lotnumber"
android:gravity="left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:padding="#dimen/padding5"
android:text="50"
android:textColor="#color/black"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.08"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/sellername"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="right"
android:padding="#dimen/padding5"
android:text="ffffffffff"
android:textColor="#color/black"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
/>
<TextView
android:id="#+id/lotstatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:gravity="left"
android:layout_marginTop="8dp"
android:background="#color/lot_statusfalse"
android:paddingBottom="#dimen/padding5"
android:paddingLeft="#dimen/padding5"
android:paddingRight="#dimen/padding5"
android:paddingTop="#dimen/padding5"
android:text="Alloted and Empty"
android:textColor="#color/white"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.66"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/createddate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="left"
android:padding="#dimen/padding5"
android:text="01-FEB-2018 10:30 AM"
android:textColor="#color/black"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
</android.support.constraint.ConstraintLayout>
I want my textview to be aligned like this. Is there any possible way to
align like this?
You need to remove app:layout_constraintStart_toStartOf="parent" from all your views except first one.because it's will assign your all views in left.
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/mylotslist_itemview"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/serialnumber"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="left"
android:padding="8dp"
android:text="1"
android:textColor="#color/black"
android:textSize="#dimen/font_normal"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.1" />
<TextView
android:id="#+id/lotnumber"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="left"
android:padding="8dp"
android:text="50"
android:textColor="#color/black"
android:textSize="#dimen/font_normal"
app:layout_constraintStart_toEndOf="#+id/serialnumber"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.1" />
<TextView
android:id="#+id/sellername"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="end"
android:padding="8dp"
android:text="ffffffffff"
android:textColor="#color/black"
app:layout_constraintStart_toEndOf="#+id/lotnumber"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.2" />
<TextView
android:id="#+id/lotstatus"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:gravity="start"
android:padding="8dp"
android:text="Alloted and Empty"
android:textColor="#color/white"
android:textSize="#dimen/font_normal"
app:layout_constraintStart_toEndOf="#+id/sellername"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.3" />
<TextView
android:id="#+id/createddate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="start"
android:padding="8dp"
android:text="01-FEB-2018 10:30 AM"
android:textColor="#color/black"
android:textSize="#dimen/font_normal"
app:layout_constraintStart_toEndOf="#+id/lotstatus"
app:layout_constraintWidth_percent="0.3" />
</android.support.constraint.ConstraintLayout>
Remove app:layout_constraintStart_toStartOf="parent" from all views except first one and also add app:layout_constraintStart_toEndOf = "#+id/your_left_views_id" for each view except first one.
like
<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:id="#+id/mylotslist_itemview"
android:layout_height="wrap_content">
<TextView
android:id="#+id/serialnumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="left"
android:padding="#dimen/padding5"
android:text="1"
android:textColor="#color/black"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/lotnumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="left"
android:padding="#dimen/padding5"
android:text="50"
android:textColor="#color/black"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.08"
app:layout_constraintStart_toEndOf="#+id/serialnumber"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/sellername"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="right"
android:padding="#dimen/padding5"
android:text="ffffffffff"
android:textColor="#color/black"
app:layout_constraintStart_toEndOf="#+id/lotnumber"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/lotstatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#color/colorPrimary"
android:gravity="left"
android:paddingBottom="#dimen/padding5"
android:paddingLeft="#dimen/padding5"
android:paddingRight="#dimen/padding5"
android:paddingTop="#dimen/padding5"
android:text="Alloted and Empty"
android:textColor="#color/white"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.66"
app:layout_constraintStart_toEndOf="#+id/sellername"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/createddate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="left"
android:padding="#dimen/padding5"
android:text="01-FEB-2018 10:30 AM"
android:textColor="#color/black"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/lotstatus"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
You are giving to all views
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" this is wrong.
In constraint layout you have to give start,end,top,bottom constraint to related view.
try below 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:id="#+id/mylotslist_itemview"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/serialnumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:padding="#dimen/padding5"
android:text="1"
android:textColor="#color/color_btn_blue"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/lotnumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:padding="#dimen/padding5"
android:text="50"
android:textColor="#color/color_charcoal"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintStart_toEndOf="#+id/serialnumber"
app:layout_constraintTop_toTopOf="#+id/serialnumber" />
<TextView
android:id="#+id/sellername"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:padding="#dimen/padding5"
android:text="ffffffffff"
android:textColor="#color/radius_text_blue"
app:layout_constraintStart_toEndOf="#+id/lotnumber"
app:layout_constraintTop_toTopOf="#+id/serialnumber" />
<TextView
android:id="#+id/lotstatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/blue_text"
android:padding="#dimen/padding5"
android:text="Alloted and Empty"
android:textColor="#color/default_text"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintStart_toEndOf="#+id/sellername"
app:layout_constraintTop_toTopOf="#+id/serialnumber" />
<TextView
android:id="#+id/createddate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:background="#color/file_limit_error"
android:padding="#dimen/padding5"
android:text="01-FEB-2018 10:30 AM"
android:textColor="#color/default_text"
android:textSize="#dimen/list_itemtextsize"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/lotstatus"
app:layout_constraintTop_toTopOf="#+id/serialnumber" />
</android.support.constraint.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="start"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Add constraints (top + bottom or start + end)
Set android:layout_width="0dp" (for start-end relations), or
android:layout_height="0dp" (for top-bottom relations)
Now, your child view has constraints to related parent view and its gravity starts from start (or else, what you defined with android:gravity="" tag).

Categories

Resources