I wonder how to implement the following design in Android xml. The contents will have height wrap-contents with the most priority, and it could even fill the whole screen if there are enough contents. The image above it should fill up the remaining height - however it also has a limited max-height of 160dp. It seems if I use layout-weight or match-parent, the max-height param does not work anymore. Is there a way to do this in the xml? Or do I have to do it in the Java file programmatically? Thanks.
try something like this:
I'm using two textView just for test
<?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"
android:background="#42A5F5">
<TextView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#EC407A"
android:maxHeight="160dp"
android:text="Image"
android:textSize="48sp"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#FFEE58"
android:text="Content"
android:textSize="48sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
those are the important lines
android:maxHeight="160dp"
app:layout_constrainedHeight="true"
Related
Say, I have 2 View: A and B. A's size is set to wrap_content, causing its size might change when content varies: text size, image size, data amounts... etc.
I want View B's height/width related to View A's, but by ratio ---- for example, B's height is 1/3 of A's. How can I achieve it?
As far as I know, ConstraintLayout should come to rescue. But I could only make it
equals by setting constraintTop_toTopOf="#+id/viewA" and app:layout_constraintBottom_toBottomOf="#+id/viewA". I tried using Guideline to locate the "dedicated height" -- but it seems Guideline is only related to parent (not constraint).
TL;DR
My solution so far is: combined layout_constraintHeight_percent (or layout_constraintWidth_percent) with a ConstraintLayout wrapper.
Limit of "Percent"
I went around asking people. Some say that layout_constraintHeight_percent (or layout_constraintWidth_percent) should be used in this case:
<?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">
<TextView
android:id="#+id/baseA"
android:layout_width="100dp"
android:layout_height="300dp"
android:background="#color/teal_200"
android:gravity="center"
android:text="base A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="100dp"
android:layout_height="0dp"
android:background="#color/purple_200"
android:gravity="center"
android:text="base B"
app:layout_constraintBottom_toBottomOf="#+id/baseA"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.7"
app:layout_constraintHeight_percent="0.33"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/baseA" />
</androidx.constraintlayout.widget.ConstraintLayout>
However, layout_constraintHeight_percent encountered the same problem as Guideline: they are calculated according to parent's size, no matter what constraint they have:
Some say layout_constrainedHeight should set to true, but nothing changed:
Adaption: B-specified Wrapper
Above behavior gave me an idea: since constraint percent is only calculated by parent, then we could modify the parent -- by giving it a custom one.
Change above code, take view B to a new ConstraintLayout, migrate B into it, constraint to parent, and use percent again:
<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">
<TextView
android:id="#+id/baseA"
android:layout_width="100dp"
android:layout_height="300dp"
android:background="#color/teal_200"
android:gravity="center"
android:text="base A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/baseA"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.7"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/baseA">
<TextView
android:layout_width="100dp"
android:layout_height="0dp"
android:background="#color/purple_200"
android:gravity="center"
android:text="base B"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.33"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Now it works like a charm.
Better Approach: Inside Same Wrapper
Another solution is to put A and B inside the same ConstraintLayout, and set its height/width to wrap_content, causing its size to equal to A:
<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.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/baseA"
android:layout_width="100dp"
android:layout_height="300dp"
android:background="#color/teal_200"
android:gravity="center"
android:text="base A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="100dp"
android:layout_height="0dp"
android:background="#color/purple_200"
android:gravity="center"
android:text="base B"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.7"
app:layout_constraintHeight_percent="0.33"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
And I think it's a better solution -- because in only-B-wrapper solution, you cannot set padding in that wrapper ConstraintLayout, as layout_constraintHeight_percent only calculated size inside (it ignores padding and margin). But in above share-wrapper solution, you can set a padding without worry (as they share the same parent size).
I'm using ConstraintLayout to display a RecyclerView or a Image with TextView conditionally based on the data in the RecyclerView. The problem is that the Image and TextView won't center vertically even when I've properly put constraints on all 4 directions. I'm also using the packed chain style. Here's my 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
app:layout_constraintVertical_chainStyle="packed"
tools:context=".ShortlistFragment">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/shortlistedProfilesRV"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone" />
<me.zhanghai.android.materialprogressbar.MaterialProgressBar
android:id="#+id/interestProgress"
style="#style/Widget.MaterialProgressBar.ProgressBar.Horizontal"
android:layout_width="160dp"
android:layout_height="wrap_content"
android:indeterminate="true"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:mpb_progressStyle="horizontal" />
<ImageView
android:id="#+id/shortlistBgImageView"
android:layout_width="128dp"
android:layout_height="121dp"
android:contentDescription="Star image"
android:src="#drawable/star"
app:layout_constraintBottom_toTopOf="#id/shortlistHelperText"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="#+id/shortlistHelperText"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Some Text Here!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/shortlistBgImageView"
app:layout_constraintVertical_chainStyle="packed" />
</androidx.constraintlayout.widget.ConstraintLayout>
In Android Studio Preview the image and text is totally centered as expected. But in an actual device its at the top (I'm texting Android 9). I need to give layout_marginTop to my ImageView to have it centered, but that is just a hacky way of doing things. What am I doing wrong here?
I was actually using this fragment inside a NavHostFragment which had its height set to wrap_content.
I'm using my android phone with 5'5 screen size and still cut out my
my imgView_icon and my btnConnectFacebook. I can't see them on my screen.
what's wrong then in my 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#fff"
tools:context="com.clearmindai.member.module.login.LoginActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/medium"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<ImageView
android:id="#+id/imgView_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#+id/tvHeaderText"
android:layout_marginLeft="#dimen/medium"
android:src="#drawable/ic_login_logo"/>
<TextView
android:id="#+id/tvHeaderText"
app:layout_constraintTop_toBottomOf="#+id/imgView_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#id/tvBodyText"
android:layout_marginTop="#dimen/small"
android:layout_marginLeft="#dimen/medium"
android:textColor="#color/black"
android:fontFamily="#font/gtwalsheimprolight"
android:layout_width="wrap_content"
android:textSize="#dimen/large"
android:text="I AM THE HEADER"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/tvBodyText"
app:layout_constraintTop_toBottomOf="#+id/tvHeaderText"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#id/imgViewLogo"
android:layout_marginTop="#dimen/very_small"
android:layout_marginLeft="#dimen/medium"
android:text="Lorem ipmsum magic sit amendium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView
android:id="#+id/imgViewLogo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/img_login"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvBodyText"
app:layout_constraintBottom_toTopOf="#+id/btnConnectFacebook"/>
<com.facebook.login.widget.LoginButton
android:id="#+id/btnConnectFacebook"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/small"
android:paddingTop="#dimen/small"
android:layout_gravity="center_horizontal"
app:layout_constraintTop_toBottomOf="#+id/imgViewLogo"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginStart="#dimen/medium"
android:layout_marginEnd="#dimen/medium"
app:layout_constraintStart_toStartOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
please let me know if I need to upload the images for a better perspective of my problem.
maybe because my images are big?
if my images are big how can I proportionally set a width and height for my photos
where it can dynamically adjust to its parent size or screen size?
This may happen because you are using android:layout_height="wrap_content"
on your imageView.
If your image is too large your layout won't be responsive anymore (because 900dp image, for example, will take all the screen size while using wrap_content).
how can i proportionally set a width and height
You can tell your image or any other view what size to be in precents like this:
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintWidth_percent="0.5" //50% of the screen Width
app:layout_constraintHeight_percent="0.5" //50% of the screen Height
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
I think below solution might work for you.
Remove app:layout_constraintBottom_toTopOf="#+id/tvHeaderText" from ImageView Icon
and Remove app:layout_constraintTop_toBottomOf property from all other views.
Hope it will solve your issue. :)
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>
I used constraintLayout and layout_constraintDimensionRatio="1:1"
(width is wrap_content, height is 0dp (match_constraint))
As a result, I expected width and height to be 1:1, but it's not working.
What is wrong?
I attached code and screenshot.
<?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/t1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="#android:color/holo_blue_bright"
android:gravity="center"
android:text="Hello World!11"
app:layout_constraintDimensionRatio="1:1" />
</android.support.constraint.ConstraintLayout>
screenshot
I quote android developer site about Constraintlayout.
https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html#DimensionConstraints
Ratio :: You can also define one dimension of a widget as a ratio of
the other one. In order to do that, you need to have at least one
constrained dimension be set to 0dp (i.e., MATCH_CONSTRAINT), and set
the attribute layout_constraintDimentionRatio to a given ratio. For
example:
<Button android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1" />
will set the height of the button to be the same as its width.
but it was not working.
You forget to add your constraints
<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/t1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#android:color/holo_blue_bright"
android:gravity="center"
android:text="Hello World!11"
app:layout_constraintDimensionRatio="1" />
</android.support.constraint.ConstraintLayout>
0dp is only applied to the child views of ConstraintLayout.
Any view should apply the attribute rules of its parent.
As off version 1.1.0 this has changed.
You can now define:
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintDimensionRatio="W,1:1"
app:layout_constraintDimensionRatio="H,1:1"
Check the link below to find all the documentation regarding DimensionConstraints:
Link to the docs
In my case I have a problem like i have to fill my layout inside container with A4 size paper ratio.
Problem
I am getting A4 size resume pages as images from backend so i have to append those images in Viewpager in which i am using ImageView to display those images.
Solution
I went through Constraint layout document in which Ratio section is there. So i can use layout_constraintDimensionRatio for solving my problem.
So my xml that is used to Display the whole Layout is following, in my case i have used app:layout_constraintDimensionRatio="1:1.27" as with:height ratio but the actual ratio is app:layout_constraintDimensionRatio="1:1.41"
<?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:background="#color/orange">
<!-- divider line which i used as restricting my A4 size container height-->
<View
android:id="#+id/divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/headline_title_color"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias=".85"/>
<!-- A4 size Image View-->
<ImageView
android:id="#+id/resumeContainer"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="12dp"
android:layout_marginTop="16dp"
android:layout_marginRight="12dp"
android:layout_marginBottom="16dp"
android:background="#color/green"
android:text="#string/change"
android:src="#drawable/banner"
app:layout_constraintBottom_toTopOf="#id/divider"
app:layout_constraintDimensionRatio="1:1.27"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<!-- for Bottom two buttons -->
<com.bold.job.utils.CustomButton
android:id="#+id/preview"
style="#style/tertiaryButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:onClick="preview"
android:text="#string/preview_resume"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/guideline"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/divider"
/>
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<com.bold.job.utils.CustomButton
android:id="#+id/preview2"
style="#style/tertiaryButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:onClick="preview"
app:layout_constraintLeft_toRightOf="#id/guideline"
app:layout_constraintRight_toRightOf="parent"
android:text="#string/preview_resume"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/divider"
/>
</android.support.constraint.ConstraintLayout>
Please notice the last line, adding constraints around the edges makes the constraint work.
You can also use the design view in Studio, and drag and drop the constraints between objects.
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Available chats" />
<ListView
android:id="#+id/listChats"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/textView"/>