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>
Related
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>
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>
This layout will display a View with a color and another with another color.
When layout_constraintWidth_percent = 1 the views are the same width. When I set it between 0.92 <> 1 the foreground view becomes bigger then the background.
Can anyone solve this? I need the foreground to be x percentage of the background
<?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:paddingTop="15dp"
android:paddingBottom="15dp"
>
<View
android:id="#+id/background"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:background="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<View
android:id="#+id/foreground"
android:layout_width="0dp"
android:layout_height="80dp"
android:background="#color/colorAccent"
app:layout_constraintWidth_percent="0.94"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintBottom_toBottomOf="#id/background"
app:layout_constraintLeft_toLeftOf="#id/background"
app:layout_constraintRight_toRightOf="#id/background"
app:layout_constraintTop_toTopOf="#id/background"
/>
</android.support.constraint.ConstraintLayout>
Remove the start and end margins of the background. If you want left and right margins, put them on the parent ConstraintLayout instead. As it is now you have margins on background but not on foreground.
Also set the background width to 0dp (the same as foreground). This way the background will be the full width of the parent ConstraintLayout (which can itself apply the margins you want) and the foreground will be the specified percentage of the background. Also set the horizontal bias of the foreground to 0.5 if you want it to be centered.
Like 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"
android:paddingTop="15dp"
android:paddingBottom="15dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
>
<View
android:id="#+id/background"
android:layout_width="0dp"
android:layout_height="100dp"
android:background="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<View
android:id="#+id/foreground"
android:layout_width="0dp"
android:layout_height="80dp"
android:background="#color/colorAccent"
app:layout_constraintWidth_percent="0.94"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintBottom_toBottomOf="#id/background"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/background"
/>
</android.support.constraint.ConstraintLayout>
As stated from the doc, the percentage is relative to the parent:
When a dimension is set to MATCH_CONSTRAINT, the default behavior is
to have the resulting size take all the available space. Several
additional modifiers are available:
layout_constraintWidth_min and layout_constraintHeight_min : will set
the minimum size for this dimension
layout_constraintWidth_max and
layout_constraintHeight_max : will set the maximum size for this
dimension
layout_constraintWidth_percent and
layout_constraintHeight_percent : will set the size of this dimension
as a percentage of the parent
The app:layout_constraintWidth_percent attribute is calculated according to the parent ConstraintLayout's dimension and not the horizontal constraints of the View. So you need to wrap the foreground in another ConstraintLayout like this (which is a bit ugly because of the nested 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:paddingTop="15dp"
android:paddingBottom="15dp">
<View
android:id="#+id/background"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:background="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#id/background"
app:layout_constraintLeft_toLeftOf="#id/background"
app:layout_constraintRight_toRightOf="#id/background"
app:layout_constraintTop_toTopOf="#id/background">
<View
android:id="#+id/foreground"
android:layout_width="0dp"
android:layout_height="80dp"
android:background="#color/colorAccent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintWidth_percent="0.94"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
Keep in mind that using app:layout_constraintWidth_percent and margins on a View at the same time can potentially lead to some problems because the margins aren't taken into account for the width percentage.
You can also consider removing the margins from the background and possibly adding them to root ConstraintLayout as padding and I think this would help avoid having a nested 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:paddingTop="15dp"
android:paddingBottom="15dp"
android:paddingStart="16dp"
android:paddingEnd="16dp">
<View
android:id="#+id/background"
android:layout_width="0dp"
android:layout_height="100dp"
android:background="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<View
android:id="#+id/foreground"
android:layout_width="0dp"
android:layout_height="80dp"
android:background="#color/colorAccent"
app:layout_constraintWidth_percent="0.94"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintBottom_toBottomOf="#id/background"
app:layout_constraintLeft_toLeftOf="#id/background"
app:layout_constraintRight_toRightOf="#id/background"
app:layout_constraintTop_toTopOf="#id/background"/>
</android.support.constraint.ConstraintLayout>
I've been experimenting with ConstraintLayout, is there a way to set the max width of a view to a percentage of the parent (and a height of match constraint and dimension ratio of 1:1)?
Here is the code without using max width:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:id="#+id/frameLayout3"
android:layout_width="0dp"
android:layout_height="259dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:background="#android:color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:src="#android:drawable/ic_menu_add"
app:layout_constraintBottom_toBottomOf="#+id/frameLayout3"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.3"/>
</android.support.constraint.ConstraintLayout>
This is the result:
Tablet:
Phone:
I achieved the max width percentage using two attributes:
app:layout_constraintWidth_max="wrap"
app:layout_constraintWidth_percent="0.4"
Example:
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Helo world"
android:textAlignment="viewStart"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_max="wrap"
app:layout_constraintWidth_percent="0.4" />
The text width will increase to 40% of parent and then wrap if the content exceeds that.
If I'm understanding your problem right then You're almost there. I think you're giving frameLayout static height that's why it is not giving the appropriate result on tablet.. because you set the height according to phone preview. What you need to do is make the height of frameLayout relative to imageView.. so when imageView grows in size the frameLayout also grows with it.
I think you should do something like 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="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:src="#android:drawable/ic_menu_add"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.3" />
<FrameLayout
android:id="#+id/frameLayoutTwo"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/black"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
I checked and this gives the same result in phone and tablet. Correct me if I misunderstood your problem.
No, there is not. I think we should file a feature request. I am pretty sure that PercentRelativeLayout also does not have this feature. (This answer is accurate for ConstraintLayout 1.1)
You can set a LinearLayout or other ViewGroup as exact percent width and place your wrap_content view inside this layout.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image_place_holder"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- This LinearLayout will have exact 80% of parent width-->
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.8">
<!-- This MaterialCardView will get a wrap_content width,
with a max width of his parent LinearLayout, which is 80% -->
<com.google.android.material.card.MaterialCardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/half_activity_horizontal_margin"
android:layout_marginTop="#dimen/half_activity_vertical_margin"
android:layout_marginEnd="#dimen/half_activity_horizontal_margin"
android:layout_marginBottom="#dimen/half_activity_vertical_margin"
android:backgroundTint="?attr/colorPrimary">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:paddingStart="#dimen/half_activity_horizontal_margin"
android:paddingEnd="#dimen/half_activity_horizontal_margin"
android:text="Lorem ipsum"
android:textAppearance="?attr/textAppearanceCaption" />
</com.google.android.material.card.MaterialCardView>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
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