Develop Reference

ConstraintLayout content stuck in middle of screen

After adding a ConstraintLayout inside a ScrollView, I noticed that the content remains stuck in the middle of the screen (both horizontally and vertically). I already tried add android:layout_gravity="top" to the main ConstraintLayout but that didn't work. Is there something else I can use to position the content at the top?
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cl_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingStart="#dimen/activity_horizontal_margin"
android:paddingEnd="#dimen/activity_horizontal_margin">
<androidx.cardview.widget.CardView
android:id="#+id/cv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="30dp"
app:cardUseCompatPadding="true"
app:contentPadding="10dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#+id/tv_disclaimer">
<LinearLayout
android:id="#+id/ll_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/iv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:importantForAccessibility="no"
android:paddingEnd="10dp" />
<TextView
android:id="#+id/tv_title"
style="#android:style/TextAppearance.Medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="?android:attr/textColorPrimary" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<TextView
android:id="#+id/tv_disclaimer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:gravity="center"
android:textColor="?android:attr/textColorPrimary"
app:layout_constraintTop_toBottomOf="#+id/cv_title"
app:layout_constraintBottom_toTopOf="#+id/cv_description"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
style="#android:style/TextAppearance.Medium" />
<androidx.cardview.widget.CardView
android:id="#+id/cv_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardUseCompatPadding="true"
app:contentPadding="10dp"
app:layout_constraintTop_toBottomOf="#+id/tv_disclaimer"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cl_description"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/ll_allergies"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#+id/ll_ingredients">
<ImageView
android:id="#+id/iv_allergies"
android:importantForAccessibility="no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="5dp"/>
<TextView
android:id="#+id/tv_allergies"
style="#android:style/TextAppearance.Large"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textColor="?android:attr/textColorPrimary" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_allergyinfo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintTop_toBottomOf="#+id/ll_allergies"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#+id/ll_ingredients">
<TextView
android:id="#+id/tv_allergyinfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="?android:attr/textColorPrimary"
android:layout_marginBottom="2dp"
android:gravity="start"
style="#android:style/TextAppearance.Medium" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_ingredients"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintTop_toBottomOf="#+id/ll_allergyinfo"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<ImageView
android:id="#+id/iv_ingredients"
android:importantForAccessibility="no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="5dp" />
<TextView
android:id="#+id/tv_ingredients"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textColor="?android:attr/textColorPrimary"
style="#android:style/TextAppearance.Large" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
Current result

Two important things are going on here.
The first is that your ScrollView specifies android:fillViewport="true". This means that whenever the contents of the ScrollView are "smaller" than the screen size, they will be stretched to fill the screen. In other words, your wrap_content ConstraintLayout will only actually wrap its content when you have to scroll. In all other cases, your ConstraintLayout will functionally be match_parent in height.
The second is that the constraints on your CardView, TextView, and second CardView form a vertical chain. Chains have special behavior regarding spacing when the parent is larger than the sum of the views in the chain (which it is due to the fillViewport behavior discussed above); the default is "spread", which will position the three views such that all the remaining space is evenly divided into four chunks (one at the start of the chain, one between the first two views, one between the second two views, and the last at the end of the chain).
How to fix it, though?
The best thing to do is to break the chain. Assuming you just want the views all stacked one after the other, starting from the top of the screen, there's no need to use a chain. To break the chain, remove the bottom constraint from each view:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
...>
<androidx.constraintlayout.widget.ConstraintLayout
...>
<androidx.cardview.widget.CardView
android:id="#+id/cv_title"
...
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
...
</androidx.cardview.widget.CardView>
<TextView
android:id="#+id/tv_disclaimer"
...
app:layout_constraintTop_toBottomOf="#+id/cv_title"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<androidx.cardview.widget.CardView
android:id="#+id/cv_description"
...
app:layout_constraintTop_toBottomOf="#+id/tv_disclaimer"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
...
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
Alternatively, you could delete the fillViewport attribute from your ScrollView. Without this, the child ConstraintLayout won't ever be stretched to fill the screen, and wrap_content will mean that there's never any extra space to spread out between your chain views.

Try removing app:layout_constraintTop_toTopOf="parent" from your ll_allergies LinearLayout. When copied on my AS it was this line that was adding the unnecessary space between the textview and the layout. Alternatively, keep the constraint and add 0dp on its height so that it enforces the constraint.
UPDATE after comment: I think your views are overlapping because the bottom constraint of ll_allergies is on the top of ll_ingredients instead of ll_allergyinfo. Try changing this:
app:layout_constraintBottom_toTopOf="#id/ll_ingredients"
to this:
app:layout_constraintBottom_toTopOf="#id/ll_allergyinfo"
and bring back the wrap_content of ll_alergies. Hopefully, now everything will fall into place

Update: response no longer valide after the code was updated
There are some errors in your code:
1.you set the layout to be to bottom of itself
android:id="#+id/ll_ingredients"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintTop_toBottomOf="#+id/ll_ingredients"`
the id "ll_alighting" is not defined

Scaling an image related to width

I have one main linear layout with orientation set to vertical. It contains two linear layouts, first with layout_weight = 0.25 and the second with value layout_weight = 0.75. The first layout has horizontal orientation and also has two objects ImageView with value layout_weight = 0.5 and EditText with value layout_weight = 0.5.
Here is the full code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- top layout -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:orientation="horizontal" >
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".5"
app:srcCompat="#drawable/samurai" />
<EditText
android:id="#+id/text"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:layout_weight="0.5"
android:background="#android:color/transparent"
android:gravity="bottom|right"
android:inputType="none"
android:maxLines="1"
android:text=""
android:textColor="#color/text"
android:textSize="50sp" />
</LinearLayout>
<!-- bottom layout -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.75"
android:orientation="horizontal">
</LinearLayout>
</LinearLayout>
My question is how can i scale the image to match the width, but to auto-scale the height?

To crop the image according to your expected result, you probably have to use a custom matrix for the imageview. I think this is the simplest implementation for TOP_CROP which you can modify for your needs:
https://stackoverflow.com/a/38049348/7554387

The problem is you add 0 to some layout_width and layout_height. Change to 0dp and it should work.
In this case,you should use ConstraintLayout as it can reduce nested layout and surely improve your layout performance.
With ConstraintLayout,code would be.
<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:id="#+id/img"
android:layout_width="0dp"
android:layout_height="0dp"
android:src="#drawable/samurai"
app:layout_constraintHeight_percent="0.25"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.5"/>
<EditText
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.25"
app:layout_constraintStart_toEndOf="#id/img"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.5"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/img"/>
</android.support.constraint.ConstraintLayout>

Move View out of Constraint Layout

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/>

ConstraintLayout doesn't respect max height

I'm trying to create a layout composition using ConstraintLayout.
In order to simplify my case, my layout should have three parts:
The first layout (in red), that should grow according to the remaining space and has a max height.
The second layout (in green), which has a fixed size of 150dp and should always be below the first layout.
The first layout (in pink), also has a fixed size of 150dp and should be aligned to the bottom the view.
The part I'm struggling with is setting a max height for the first layout (red). It seems like the ConstraintLayout ignores my "max height statements":
app:layout_constraintHeight_max="300dp"
Here's my current result (the red part ignores the height limit..):
Here's the full XML:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
tools:context="com.mixtiles.android.reviewOrder.ReviewOrderActivity"
tools:layout_editor_absoluteY="25dp">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white">
<android.support.v7.widget.Toolbar
android:id="#+id/review_order_toolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/red"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/red"
app:layout_constraintBottom_toTopOf="#+id/green"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_max="300dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/appBarLayout"
app:layout_constraintVertical_chainStyle="spread_inside">
</FrameLayout>
<FrameLayout
android:id="#+id/green"
android:layout_width="0dp"
android:layout_height="150dp"
android:background="#color/greenish"
app:layout_constraintBottom_toTopOf="#+id/pink"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/red">
</FrameLayout>
<FrameLayout
android:id="#+id/pink"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#color/pink"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/green">
</FrameLayout>

android:layout_height="wrap_content"
app:layout_constraintHeight_max="300dp"
app:layout_constrainedHeight="true"
be sure to set the height wrap_content

<View
android:id="#+id/view2"
android:layout_width="88dp"
android:layout_height="0dp"
android:background="#F44"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintHeight_max="300dp"
/>
<View
android:id="#+id/view"
android:layout_width="88dp"
android:layout_height="150dp"
android:background="#690"
app:layout_constraintBottom_toTopOf="#+id/view3"
app:layout_constraintTop_toBottomOf="#+id/view2"
/>
<View
android:id="#+id/view3"
android:layout_width="88dp"
android:layout_height="150dp"
android:background="#93C"
app:layout_constraintBottom_toBottomOf="parent"
/>

The issue could be that you can't have both those constraints set at the same time on the red view:
app:layout_constraintBottom_toTopOf="#+id/green"
app:layout_constraintTop_toBottomOf="#+id/appBarLayout"
If both those constraints are set, then the red view will be attached on top to the appBarLayout, and on the bottom to the green view, and this means that it will occupy all the space between those two views.
If you want to have the max height constraint be respected, you need to remove one of those two constraints. Which one should be removed depends on what kind of final result you are expecting.
OLD ANSWER
I think you should use android:maxHeight instead of app:layout_constraintHeight_max.

Margin below <TextView/> in <ConstraintLayout/> not working

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