There is a simple layout with TextView and RecyclerView inside a ConstraintLayout.
<android.support.constraint.ConstraintLayout
android:id="#+id/clSelectedPatient"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tvSelectPatient"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Lifcare"
android:textSize="18sp"
android:textStyle="bold"
android:layout_marginBottom="100dp"
app:layout_constraintBottom_toTopOf="#+id/rvPatients"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.RecyclerView
android:id="#+id/rvPatients"
android:layout_width="match_parent"
android:layout_height="100dp"
app:layout_constraintTop_toBottomOf="#+id/tvSelectPatient"/>
</android.support.constraint.ConstraintLayout>
android:layout_marginBottom="100dp" below TextView is not working.
There are a few mistakes in your layout:
You use match_parent for width and using match_parent is prohibited for ConstraintLayout subviews.
Build a Responsive UI with ConstraintLayout - Adjust the view size
Note: You cannot use match_parent for any view in a ConstraintLayout.
Instead use "match constraints" (0dp)
In order to display vertical margins properly, you have to define vertical constraints for TextView and RecyclerView.
Your fixed layout code would look like:
<android.support.constraint.ConstraintLayout
android:id="#+id/clSelectedPatient"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tvSelectPatient"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="100dp"
android:text="Lifcare"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#+id/rvPatients" />
<android.support.v7.widget.RecyclerView
android:id="#+id/rvPatients"
android:layout_width="0dp"
android:layout_height="100dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvSelectPatient"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
And this is how it looks on device:
Add
app:layout_constraintBottom_toBottomOf="parent"
to your RecyclerView
Related
Hey I am working in constraint layout with recylerview. My bottom item is cut in the screen. I read this stack overflow post. I don't want to use relative layout or linear layout. Can someone guide me how to fix this in constraint layout.
abc.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="16dp"
app:closeIcon="#drawable/ic_cancel"
app:layout_constraintBottom_toTopOf="#+id/exploreScroll"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintVertical_bias="0.0" />
<HorizontalScrollView
android:id="#+id/exploreScroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:scrollbars="none"
app:layout_constraintBottom_toTopOf="#+id/exploreList"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/searchView">
<com.google.android.material.chip.ChipGroup
android:id="#+id/exploreChips"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:chipSpacingHorizontal="10dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:singleLine="true"
app:singleSelection="true" />
</HorizontalScrollView>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/exploreList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:paddingTop="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/exploreScroll" />
</androidx.constraintlayout.widget.ConstraintLayout>
My view cut from
UPDATE
#Zain after your suggestion i tried in my xml any my HorizontalScrollView is going behind my RV. I am adding my blueprint and you can see clearly that, HorizontalScrollView is going behind. After removing app:layout_constraintBottom_toTopOf="#+id/exploreList" from the HorizontalScrollView.
2nd suggestion try
Disclaimer Using a wrap_content height with vertical RecyclerView
can have impact on performance in terms of recycling views; specially
if the height is going to change frequently. Check this article
for more illustration.
So, the first step is to designate the RecyclerView height or to constraint it; from the constraints you want it to expand to the bottom; so use 0dp for that. But in order to make the minimum height to wrap content of the RecyclerView (in case that the items don't exceed the screen height); you can set the default height constraint to wrap with app:layout_constraintHeight_default="wrap" constraint.
Then remove app:layout_constraintBottom_toTopOf="#+id/exploreList" from the HorizontalScrollView, this actually made the bottom item of the RV hide (your main issue); because it is an over-constraint; the HorizontalScrollView tends to push the RV to the bottom while the RV tends to push the HorizontalScrollView to the top.
This will solve the main issue; but when the items are fully accommodated by the screen (no scrolling in the RV), then it will be biased in the middle; to fix this use the bias with app:layout_constraintVertical_bias="0.0" to be biased to the top.
Adding this in place into the layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="16dp"
app:closeIcon="#drawable/ic_cancel"
app:layout_constraintBottom_toTopOf="#+id/exploreScroll"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintVertical_chainStyle="packed" />
<HorizontalScrollView
android:id="#+id/exploreScroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:scrollbars="none"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/searchView">
<com.google.android.material.chip.ChipGroup
android:id="#+id/exploreChips"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:chipSpacingHorizontal="10dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:singleLine="true"
app:singleSelection="true" />
</HorizontalScrollView>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/exploreList"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="20dp"
android:paddingTop="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="wrap"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/exploreScroll" />
</androidx.constraintlayout.widget.ConstraintLayout>
I have a ScrollView which has a ConstraintLayout.
Inside the ConstraintLayout I want to position a View to the bottom of a Barrier.
The Barrier itself has constraints: a Guideline(it can be also a view with height half of parent) which is half of the ConstraintLayout and a TextView.
The issue here is that the ConstraintLayout will expand even more (adds more scrollable area) because of the half of screen percentage calculation.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ScrollView
android:id="#+id/scrollView"
android:layout_width="100dp"
android:layout_height="200dp"
android:background="#39537A4B"
android:fillViewport="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="#+id/topHalf"
android:layout_width="10dp"
android:layout_height="0dp"
android:background="#99B146B8"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.5"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<View
android:id="#+id/bottomHalf"
android:layout_width="10dp"
android:layout_height="0dp"
android:background="#99B89F46"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.5"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Do smth \n\n\n\n\n\n\nasdasda"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="guideline, text" />
<View
android:id="#+id/view"
android:layout_width="60dp"
android:layout_height="40dp"
android:background="#651F7878"
app:layout_constraintStart_toStartOf="#id/barrier"
app:layout_constraintTop_toBottomOf="#id/barrier" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
Try changing the Barrier constraints to:
app:constraint_referenced_ids="text"
And you understand that Barrier brakes the calculations.
I know how to solve this layout issue from java, I want a solution from xml. It can be this is a bug on ConstraintLayout
This behavior is odd and is definitely related to the barrier and a wrap_content ConstraintLayout Here is a simplified layout that showcases the behavior.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/holo_blue_light"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<View
android:id="#+id/redBox"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#android:color/holo_red_light"
android:textAppearance="#style/TextAppearance.AppCompat.Body2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".5" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="redBox,guideline"/>
</androidx.constraintlayout.widget.ConstraintLayout>
With the above layout, the following is what is displayed. Although the ConstraintLayout is wrap_content, it expands to twice the height of the red box.
If we remove the red box or the guideline from the barrier, the layout behaves:
The height of the ConstraintLayout can be varied by changing the location of the guideline. Here it is with the guideline set at 30%:
The expected behavior, IMO, is that the ConstraintLayout would size itself based upon the heights of its child views, here just the red box, and the guideline would be set accordingly. That is clearly not what is happening.
Maybe someone can figure out an XML work-around using the simplified layout. I didn't see a similar issue reported from a cursory search, so it may be worth reporting.
(Using ConstraintLayout version 2.1.0)
Not its separate components, but the dimension ratio of the ConstraintLayout itself, or a group of elements together.
I'm fallowing this excellent tutorial to build a RecyclerView with GridLayoutManager and two CardView columns that span the entire width of their container, each CardView (square) contains an ImageView (also square) and a TextView.
So, I need the CardView width to be "match parent" and get the same height (to be square), and the same goes for the ImageView. Something like this:
But this is what I have so far (note that CardView are not square):
This is my item layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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"
app:cardPreventCornerOverlap="true"
app:cardUseCompatPadding="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_home_black_24dp" />
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
I know about app:layout_constraintDimensionRatio="1:1", but this is for use on any element within a ConstraintLayout, for example on my ImageView, not on ConstraintLayout itself.
I think I can invert my layout, put the CardView inside the ConstraintLayout and apply the above property to the CardView, but then I'm going to need another ConstraintLayout inside the CardView to place the ImageView and TextView properly, and I think it's not a good idea to nest ConstraintLayout.
Any suggestions?
Try the item layout below. I have constraints the ImageView relative to TextView. It should work. Or maybe you have to add some margin to ImageView. Give it a try.
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:cardPreventCornerOverlap="true"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintTop_toTopOf="parent"
app:cardUseCompatPadding="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:padding="8dp"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:background="#color/colorPrimary"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/textView" />
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="23sp"
android:text="Hello world"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
I am fairly new to ConstraintLayout and am trying to convert my UI to a responsive layout to support different screen sizes. However, I am having trouble with my ScrollView scrolling when the inner layout is a ConstraintLayout. Even when I change the ScrollView to NestedScrollView it still won't scroll. I tried several solutions of many asking the same question and none of them seemed to have worked.
<android.support.v4.widget.NestedScrollView
android:id="#+id/list"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="5dp"
android:fillViewport="true"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/logo"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/refresh_text">
<android.support.constraint.ConstraintLayout
android:id="#+id/innerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/innerLayout2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/light_gray"
app:layout_constraintBottom_toTopOf="#+id/key_constraint_layout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent=".1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/status_date_text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:text="Status Date"
android:textSize="20sp"
app:layout_constrainedHeight="true"
app:layout_constrainedWidth="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/status_date_value"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:text="-------"
android:gravity="end|center_vertical"
android:textSize="20sp"
app:layout_constrainedHeight="true"
app:layout_constrainedWidth="true"
app:layout_constraintHorizontal_bias="0.70"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<!--Other inner layouts are children of innerLayout based on innerLayout2 -->
</android.support.constraint.ConstraintLayout>
<android.support.v4.widget.NestedScrollView>
What am I doing wrong?
This jumps out at me as the likely cause of your problem:
<android.support.constraint.ConstraintLayout
android:id="#+id/innerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
The single child of a scrolling view should always have either a fixed height or a wrap_content height.
The idea of scrolling views is that they hold a single child that is too large to fit on the screen by itself. If you are defining the single child to be match_parent height, then there's nothing to scroll, because the child is no larger than the scrolling view.
How to make View FrameLayout fill all remaining space in ConstraintLayout
I have xml like:
<ImageView
android:background="#FF0000"
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_header"
android:scaleType="fitXY"
android:adjustViewBounds="true"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="wrap"
app:layout_constraintWidth_default="spread"/>
<FrameLayout
android:background="#00FF00"
app:layout_constraintHeight_default="spread"
app:layout_constraintWidth_default="wrap"
app:layout_constraintTop_toBottomOf="#id/header"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#id/footer"
android:id="#+id/task_fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<LinearLayout
android:background="#FFFF00"
android:orientation="vertical"
android:id="#+id/footer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="spread"
app:layout_constraintWidth_default="spread"
app:layout_constraintBottom_toBottomOf="parent">
<ImageButton
style="?borderlessButtonStyle"
android:id="#+id/btn_ar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:padding="0dp"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:src="#drawable/ic_ar"/>
</LinearLayout>
There are header, footer and FrameLayout in the middle I want to make FrameLayout to fill all remaining space.
I don't understand, which properties I have to use to expand FrameLayout. Please help me!
EDIT: Or any solution with different layout.
This is really simple. To make any view fill up the available space either horizontally or vertically, just set the layout_width/layout_height to 0dp according to your need.
This work, go with ConstraintLayout because has better performance.
<?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">
<ImageView
android:background="#FF0000"
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_header"
android:minHeight="30dp"
android:scaleType="fitXY"
android:adjustViewBounds="true"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="wrap"
app:layout_constraintWidth_default="spread"/>
<FrameLayout
android:id="#+id/task_fragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#00FF00"
android:orientation="vertical"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/btn_ar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/header"
app:layout_constraintWidth_default="wrap">
</FrameLayout>
<ImageButton
android:id="#+id/btn_ar"
style="?borderlessButtonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:padding="0dp"
android:scaleType="fitXY"
android:src="#drawable/ic_ar"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
<FrameLayout
android:id="#+id/task_fragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#00FF00"
android:orientation="vertical"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/btn_ar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/header"
app:layout_constraintWidth_default="wrap">
</FrameLayout>
This should work.
Explanation:
All you want is to make the top of this FrameLayout constraint to the bottom of the header, and the bottom of this FrameLayout constraint to the top of the footer.
After setting all the constraints, you still need to set the layout param of FrameLayout to match the constraint. In order to do this, you can try to set layout_height to 0dp. This will make the height of FrameLayout have the effect of match_constraint.
For more detail, you can check this doc: https://developer.android.com/reference/android/support/constraint/ConstraintLayout (just search the keyword match constraint and you will find that block), or simply check this similar answer: Set width to match constraints in ConstraintLayout