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>
Related
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>
When I fully edit GUI on android editor and run it. Android Virtual Device overlap it on the bottom corner.
I'm using android studio LATEST VERSION
Android Editor
Android Virtual Device(Nexus_5X_API_28)
<?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=".MainActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="h,640:371"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.046"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/header_bg" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="160dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintDimensionRatio="w,35:55"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:srcCompat="#drawable/book_cover" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:text="Buisness Advise for starting a small buisness"
android:textColor="#android:color/black"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView2"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<Button
android:id="#+id/buy"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="48dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:background="#drawable/buy_button"
android:padding="10dp"
android:text="5$"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="#+id/wishlist"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView2" />
<Button
android:id="#+id/wishlist"
android:layout_width="172dp"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginLeft="4dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:background="#drawable/buy_button"
android:padding="10dp"
android:text="WishList+"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/buy"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/buy" />
<ImageView
android:id="#+id/rating"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="44dp"
android:background="#drawable/rating"
app:layout_constraintEnd_toStartOf="#+id/comment"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/buy"
app:srcCompat="#drawable/ic_star"
tools:ignore="VectorDrawableCompat" />
<ImageView
android:id="#+id/comment"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/comment"
app:layout_constraintBottom_toBottomOf="#+id/rating"
app:layout_constraintEnd_toStartOf="#+id/style"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/rating"
app:layout_constraintTop_toTopOf="#+id/rating"
app:srcCompat="#drawable/ic_speaker"
tools:ignore="VectorDrawableCompat" />
<ImageView
android:id="#+id/style"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/style"
app:layout_constraintBottom_toBottomOf="#+id/comment"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/comment"
app:layout_constraintTop_toTopOf="#+id/comment"
app:srcCompat="#drawable/ic_style"
tools:ignore="VectorDrawableCompat" />
<TextView
android:id="#+id/ratinText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="11dp"
android:text="4.5+"
android:textColor="#android:color/black"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/rating"
app:layout_constraintStart_toStartOf="#+id/rating"
app:layout_constraintTop_toBottomOf="#+id/rating" />
<TextView
android:id="#+id/commentText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="11dp"
android:text="Advices"
android:textColor="#android:color/black"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/comment"
app:layout_constraintStart_toStartOf="#+id/comment"
app:layout_constraintTop_toBottomOf="#+id/comment" />
<TextView
android:id="#+id/similarText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="11dp"
android:text="Similar"
android:textColor="#android:color/black"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/style"
app:layout_constraintStart_toStartOf="#+id/style"
app:layout_constraintTop_toBottomOf="#+id/style" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
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="In this video, I am designing an Android App's Book Details/Buy Page UI(User Interface) with ConstraintLayout"
android:textColor="#android:color/black"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/commentText" />
</android.support.constraint.ConstraintLayout>
When I fully edit GUI on android editor and run it. Android Virtual Device overlap it on the bottom corner.
How can I fix this problem.
You can handle it by wrapping the xml layout with ScrollView, Please try this
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="h,640:371"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.046"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/ic_launcher_background" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="160dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintDimensionRatio="w,35:55"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:srcCompat="#drawable/ic_launcher_background" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:text="Buisness Advise for starting a small buisness"
android:textColor="#android:color/black"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView2"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<Button
android:id="#+id/buy"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="48dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:background="#drawable/ic_launcher_background"
android:padding="10dp"
android:text="5$"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="#+id/wishlist"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView2" />
<Button
android:id="#+id/wishlist"
android:layout_width="172dp"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginLeft="4dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:background="#drawable/ic_launcher_background"
android:padding="10dp"
android:text="WishList+"
android:textColor="#android:color/white"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/buy"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/buy" />
<ImageView
android:id="#+id/rating"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="44dp"
android:background="#drawable/ic_launcher_background"
app:layout_constraintEnd_toStartOf="#+id/comment"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/buy"
app:srcCompat="#drawable/ic_launcher_background"
tools:ignore="VectorDrawableCompat" />
<ImageView
android:id="#+id/comment"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="#+id/rating"
app:layout_constraintEnd_toStartOf="#+id/style"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/rating"
app:layout_constraintTop_toTopOf="#+id/rating"
app:srcCompat="#drawable/ic_launcher_background"
tools:ignore="VectorDrawableCompat" />
<ImageView
android:id="#+id/style"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="#+id/comment"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/comment"
app:layout_constraintTop_toTopOf="#+id/comment"
app:srcCompat="#drawable/ic_launcher_background"
tools:ignore="VectorDrawableCompat" />
<TextView
android:id="#+id/ratinText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="11dp"
android:text="4.5+"
android:textColor="#android:color/black"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/rating"
app:layout_constraintStart_toStartOf="#+id/rating"
app:layout_constraintTop_toBottomOf="#+id/rating" />
<TextView
android:id="#+id/commentText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="11dp"
android:text="Advices"
android:textColor="#android:color/black"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/comment"
app:layout_constraintStart_toStartOf="#+id/comment"
app:layout_constraintTop_toBottomOf="#+id/comment" />
<TextView
android:id="#+id/similarText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="11dp"
android:text="Similar"
android:textColor="#android:color/black"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/style"
app:layout_constraintStart_toStartOf="#+id/style"
app:layout_constraintTop_toBottomOf="#+id/style" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
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="In this video, I am designing an Android App's Book Details/Buy Page UI(User Interface) with ConstraintLayout"
android:textColor="#android:color/black"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/commentText" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
I have this layout on Fragment. It has 3 Buttons. Below Button3 there is one TextView.When this layout is set I am checking some conditions. If that condition is satisfied I am showing the Button3. But if the condition is not satisfied I need to hide the button.
This is how the layout looks after hiding Button3
It appears to be a lot of blank space between the TextView and Button2 when the button is hidden but in my XML layout, it is present there. How to avoid this so that it doesn't appear blank space?
This is code for 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:id="#+id/myConstraint"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/allscreenbackground">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/tabIndicator"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="Table: "
android:textColor="#fff"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/tableName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.03"
app:layout_constraintStart_toStartOf="#+id/toolbar2" />
<TextView
android:id="#+id/tableName"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
android:singleLine="true"
android:text=""
android:textColor="#fff"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/full_name"
app:layout_constraintEnd_toEndOf="#+id/toolbar2"
app:layout_constraintHorizontal_bias="0.04"
app:layout_constraintStart_toEndOf="#+id/name" />
<TextView
android:id="#+id/full_name"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="10dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ellipsize="marquee"
android:gravity="center"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
android:singleLine="true"
android:text=""
android:textColor="#fff"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/toolbar2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/tableName"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView9"
android:layout_width="wrap_content"
android:layout_height="28dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="0dp"
android:text="Pax -"
android:textColor="#color/textTitles"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/people"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline4" />
<TextView
android:id="#+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Occupied Since :"
android:textColor="#color/textTitles"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/lapsedTime"
app:layout_constraintStart_toStartOf="#+id/guideline4" />
<TextView
android:id="#+id/people"
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=""
android:textColor="#color/textTitles"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/textView9"
app:layout_constraintTop_toBottomOf="#+id/toolbar2"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/lapsedTime"
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=""
android:textColor="#color/textTitles"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.06"
app:layout_constraintStart_toEndOf="#+id/textView10"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.18" />
<Button
android:id="#+id/shift"
android:layout_width="200dp"
android:layout_height="40dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/yes_button"
android:gravity="center"
android:text="Button 1"
android:textColor="#fff"
android:textSize="15dp"
android:textStyle="bold"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.283" />
<Button
android:id="#+id/end"
android:layout_width="200dp"
android:layout_height="35dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/yes_button"
android:text="Button 2"
android:textColor="#fff"
android:textSize="15dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.387" />
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="40dp" />
<Button
android:id="#+id/freeThisTable"
android:layout_width="200dp"
android:layout_height="35dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/yes_button"
android:text="Button 3"
android:textColor="#fff"
android:textSize="15dp"
android:textStyle="bold"
android:visibility=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/isBday"
android:visibility="invisible"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.65"
app:srcCompat="#drawable/birthday" />
<ImageView
android:visibility="invisible"
android:id="#+id/isAniversary"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.78"
app:srcCompat="#drawable/ring_new" />
<TextView
android:visibility="visible"
android:id="#+id/isBdayText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:text="Hello"
android:textSize="18sp"
android:textColor="#color/textTitles"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline32"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.64" />
<TextView
android:visibility="invisible"
android:id="#+id/isAniversaryText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
android:textSize="18sp"
android:textColor="#color/textTitles"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline32"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.76" />
<android.support.constraint.Guideline
android:id="#+id/guideline32"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="100dp" />
</android.support.constraint.ConstraintLayout>
If you want to hide the spaces of the object use it:
boolean myCondition = true;
if(myCondition) {
Button3.setVisibility(View.GONE);
}
else {
Button3.setVisibility(View.VISIBLE);
}
The problem was because of incorrect constraint. You have constrained most of your views TOP to parent and set bias to align it. Instead of that, do align under your consecutive views. It will work as your requirement.
For better understanding, I have edited your xml file. Replace and check it out.
<........./>
<android.support.constraint.Guideline
android:id="#+id/guideline4"
.............../>
<Button
android:id="#+id/freeThisTable"
android:layout_width="200dp"
android:layout_height="35dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:background="#drawable/yes_button"
android:text="Button 3"
android:textColor="#fff"
android:textSize="15dp"
android:textStyle="bold"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/end" />
<ImageView
android:id="#+id/isBday"
android:layout_width="40dp"
android:layout_height="40dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="#+id/isBdayText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="#+id/isBdayText"
app:srcCompat="#drawable/birthday" />
<ImageView
android:id="#+id/isAniversary"
android:layout_width="40dp"
android:layout_height="40dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="#+id/isAniversaryText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="#+id/isAniversaryText"
app:srcCompat="#drawable/ring_new" />
<TextView
android:id="#+id/isBdayText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="Hello"
android:textColor="#color/textTitles"
android:textSize="18sp"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline32"
app:layout_constraintTop_toBottomOf="#+id/freeThisTable" />
<TextView
android:id="#+id/isAniversaryText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="TextView"
android:textColor="#color/textTitles"
android:textSize="18sp"
android:visibility="invisible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline32"
app:layout_constraintTop_toBottomOf="#+id/isBdayText" />
<android.support.constraint.Guideline
android:id="#+id/guideline32"
.............. />
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
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" />