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>
Related
I am using constraint layout with a vertical bias to fill view in recycler view. I successfully did that.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recylerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
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" />
</androidx.constraintlayout.widget.ConstraintLayout>
My recyclerview items showing me in reverse order because I want to make chat application. So I added reverseLayout and stackFromEnd true. So it look like this.
If my item is single my ui convert into like this by above xml code
Now I want to add edittext and button in bottom. Its not working vertical bias. Does any one know how to fix. Any suggestion to what can i use
Expected Output
Scenerio 1
Scenerio 2
Actual Output
I tried this code
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart=10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toTopOf="#+id/inputContainer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/inputContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/crecyclerView">
<EditText
android:id="#+id/editTextContainer"
android:layout_width="200dp"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/editTextContainer"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
UPDATE
After adding #MartinMarconcini answer it fixed my Scenario 2. I want to fix as Scenario 1 as well.
The idea is that your RV will handle its own item size and space by itself. You don't need to worry about this.
The Remainder of the space, will be used by ConstraintLayout.
So you need to pin the RV and the "Bottom Container" together. This would by default cause the CL to try to pull and balance layouts, so you have to tell the bottom container to be biased at the bottom.
In pseudo-XML:
<ConstraintLayout>
<RecyclerView
width=0dp
height=0dp
start/end = parent
TopToTop=parent
BottomToTopOf=BottomContainer
>
<BottomContainer>
width=0dp
height=wrap_content
TopToBottomOf=RecyclerView
BottomToBottomOf=parent
start/end = parent>
</ConstraintLayout>
Now this needs one more thing, because the RV would take all the space, you want to ensure the BottomContainer has more information about where it wants to be placed.
So you add:
app:layout_constraintVertical_bias="1.0"
to the Bottom Container.
This means, vertically, as "bottom" as you can. (0.0 would be the opposite).
The end result is:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recylerview"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:listitem="#android:layout/simple_list_item_2" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
app:layout_constraintVertical_bias="1.0"
android:layout_height="wrap_content"
android:id="#+id/bottomContainer"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/recylerview"
app:layout_constraintBottom_toBottomOf="parent">
<EditText
android:id="#+id/editTextContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/editTextContainer"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Which looks like this:
UPDATE
If you add both
app:stackFromEnd="true"
app:reverseLayout="true"
It works the same way, except the item "0" is at the bottom, and the "last" item is at the top. Adding another item would add it at the top but the BottomContainer has no participation (or influence) over this:
I'm facing issues with constraintlayout when placing ImageView or FrameLayout on top of a Button.
When i try to inflate a fragment on FrameLayout, Buttons that are part of activity are visible on top of fragment UI.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"/>
<FrameLayout
android:background="#color/blue"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
</android.support.constraint.ConstraintLayout>
To place any view above another view you have to give proper constraint like below.
Give top and bottom constraint proper and also as I give all constraint(start,end,top,bottom) to FrameLayout it's height and width give to 0dp(you can't use height to match_parent otherwise it's cover whole screen and overlap button).
>
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent" android:layout_height="match_parent">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<FrameLayout
android:background="#color/colorPrimary"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/button"/>
</android.support.constraint.ConstraintLayout>
To set constraints of button and FrameLayout to,
Button:
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
FrameLayout :
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button"
Your code looks ok but if you want to tell 1 view to be above another view in ConstraintLayout you can go to the design tab and move the higher above the lower view:
Example:
In the image, you can see that the button is placed below the frameLayout so he will be lower than the frameLayout (the frameLayout will be above the button)
Also, you were missing some constraints on your button :
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/frameLayout2" />
<FrameLayout
android:id="#+id/frameLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
And if all that didn't help you check this thread, as #Xavier Rubio Jansana said, it may be because of elevation.
Try the code below
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
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:text="button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="638dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:background="#color/appGrey"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button">
</FrameLayout>
</android.support.constraint.ConstraintLayout>
Hello guys, I need to add 2 fixed width and height imageview in to center of screen using constraint layout how we can achieve something like this.
xml layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.activity.profile.view.UserDetailsActivity">
<TextView
android:id="#+id/tv_label"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="#string/you_are"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent=".1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_percent=".25" />
<CircularImageView
android:id="#+id/iv_farmer"
android:layout_width="#dimen/_100dp"
android:layout_height="#dimen/_100dp"
android:src="#drawable/ic_profilewithimage"
app:civ_border="true"
app:civ_border_color="#e4e4e4"
app:civ_border_width="#dimen/_1dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="#+id/iv_prof"
app:layout_constraintTop_toBottomOf="#+id/tv_label" />
<CircularImageView
android:id="#+id/iv_prof"
android:layout_width="#dimen/_100dp"
android:layout_height="#dimen/_100dp"
android:src="#drawable/ic_profilewithimage"
app:civ_border="true"
app:civ_border_color="#e4e4e4"
app:civ_border_width="#dimen/_1dp"
app:layout_constraintLeft_toRightOf="#+id/iv_farmer"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_label" />
</android.support.constraint.ConstraintLayout>
i am trying this but views are not centerd.
I have updated your xml code. Please try with this.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tv_label"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="You are"
app:layout_constraintBottom_toTopOf="#+id/iv_farmer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent=".1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_percent=".25" />
<CircularImageView
android:id="#+id/iv_farmer"
android:layout_width="#dimen/_100dp"
android:layout_height="#dimen/_100dp"
android:src="#drawable/ic_profilewithimage"
app:civ_border="true"
app:civ_border_color="#e4e4e4"
app:civ_border_width="#dimen/_1dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/iv_prof"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<CircularImageView
android:id="#+id/iv_prof"
android:layout_width="#dimen/_100dp"
android:layout_height="#dimen/_100dp"
android:src="#drawable/ic_profilewithimage"
app:civ_border="true"
app:civ_border_color="#e4e4e4"
app:civ_border_width="#dimen/_1dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/iv_farmer"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Hope it helps :)
In your first CircularImageView there's a problem with your right constraint:
app:layout_constraintRight_toRightOf="#+id/iv_prof"
This should be constrained to the left of iv_prof:
app:layout_constraintRight_toLeftOf="#id/iv_prof"
If you want the to be closer together in the center then change the style of the chain to packed by adding this attribute to the first CircularImageView:
app:layout_constraintHorizontal_chainStyle="packed"
To center the Views vertically in the parent you need to constraint the top and bottom of each View to the top and bottom of the parent respectively.
Also you're using left/right constraints for some Views and start/end for others. Try using just one set of them across the whole layout.
It worked for me using bias:
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center">
<ImageView
android:id="#+id/img_splash_logo"
android:layout_width="200dp"
android:layout_height="200dp"
android:src="#drawable/weather_logo"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I want to move my ImageView so it will be half way out of the ConstraintLayout (parent one)
You can imagine this as I make negative margin in my LinearLayout
What I have is an Image and it should be cut as on picture, so only button side of the image should be displayed on the actual device. Other part should be cut off.
Here is a part of my layout.
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="71dp"
android:layout_height="71dp"
android:src="#drawable/someImage"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
So, is there any good way to do that?
So I found the solution.
Basically you need to make a translation of the image out of its container.
android:translationY="-22dp"
Add a guide line and say that your ImageView should be above that guidelines for example this code will make everything appear like your layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/your_image"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="#id/guideline" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="163dp" />
</android.support.constraint.ConstraintLayout>
To position the ImageView halfway outside parent enforce the vertical constraints by setting layout_height to 0dp. To maintain the appropriate size of the ImageView set the dimensionRatio to 1:1. The code will look like this (note that parent ConstraintLayout now has layout_height matching parent):
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="71dp"
android:layout_height="0dp"
android:src="#drawable/someImage"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintDimensionRatio="1:1"/>
</android.support.constraint.ConstraintLayout>
Put the image inside of the Linear Layout.
<LinearLayout....>
<ImageView..../>
</LinearLayout>
And add attribute called clipChildren and make it true.
One trick would be to set negative margin for the side you want, in the ConstraintLayout itself. This requires that other views that have constraint to that side be offset. The right button in the images is below the ConstraintLayout and hidden under the bottom bar:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
...
android:layout_marginBottom="-48dp">
<ImageButton
android:id="#+id/leftButton"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="72dp"
android:background="#drawable/shape_next_button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<ImageButton
android:id="#+id/rightButton"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginStart="24dp"
android:background="#drawable/shape_previous_button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I did this by adding View inside the ConstraintLayout and give it some margin.
View provides background to ConstraintLayout.
ConstraintLayout must be of transparent background.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_transparent">
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="38dp"
android:background="#drawable/bg_white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView/>
main_layout.xml:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<CollapsingTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
It looks like bounded to the edges ConstraintLayout doesn't consider any horizontal margins and just horizontally centeres the TextView
That's because you have the width of the TextView set to "wrap_content".
To force it to adapt to the constraints you need to use a width of "0dp". This is the functional equivalent of "match_constraint" however that is not currently recognized as an option.
<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">
<CollapsingTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:textSize="16sp"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>