Develop Reference

Packed chain with gravity top

I have two view that are fit at the top and bottom of the screen and I have a Recycler view that will sit between them but there is one view that much be packed with recyclview vertically. Something like this
I have to use constraint layout to achieve this. I have tried to achieve this with using packed-chain but that puts the view in center of screen not align to the the top view.

Change the bias of the chain to zero and that will position the RecyclerView and the view below it to the top of the center area. Something like this:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:text="Bottom View"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:gravity="center"
android:text="Top"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constrainedHeight="true"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:background="#android:color/holo_green_light"
app:layout_constraintBottom_toTopOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="View"
android:textSize="24sp"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintStart_toStartOf="#+id/recyclerView"
app:layout_constraintTop_toBottomOf="#+id/recyclerView" />
</androidx.constraintlayout.widget.ConstraintLayout>
I think the key point here is that the top and bottom views do not have to be part of the chain.
You could also, maybe, do the same without the chain by constraining the tops of the center views.

The point is not having bottom constraints for these top, RecyclerView and tiny view.
And for your passing through problem, you can use Guideline for your RecycleView's bottom constraint.
This is an example. You should modify to fit to your actual situation. Especially about widths or heights which have px sized may be replaced with wrap_content:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<View
android:id="#+id/topView"
android:layout_width="0dp"
android:layout_height="120px"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/topView" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="#id/guideline"
app:layout_constraintGuide_begin="400dp" />
<View
android:id="#+id/tinyView"
android:layout_width="240px"
android:layout_height="120px"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/guideline" />
<View
android:id="#+id/bottomView"
android:layout_width="0dp"
android:layout_height="120px"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Alignment/wrapping inside the ConstraintLayout

I have 3 text views placed horizontally. Leftmost one and rightmost one are of fixed size, but middle one can vary in length significantly. Something like this:
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="8dp"
android:text="LEFT"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingEnd="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/right"
app:layout_constraintStart_toEndOf="#+id/left"
app:layout_constraintTop_toTopOf="parent"
tools:text="#tools:sample/lorem/random" />
<TextView
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RIGHT"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/message"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
This results in following layout:
But if we have short text in the middle, like this:
tools:text="#tools:sample/lorem"
it will look:
Rightmost view is "glued" to the end.
I want it to follow the middle view, like this:
How can it be achieved?

You should use app:layout_constraintWidth_default="wrap" for the middle view and app:layout_constraintHorizontal_chainStyle="packed". Also don't forget to set app:layout_constraintHorizontal_bias="0.0" for the first view to align the whole layout to the start of the screen. Here how the whole layout should look:
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="LEFT"
app:layout_constraintEnd_toStartOf="#id/message"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="8dp"
app:layout_constraintEnd_toStartOf="#id/apply_text"
app:layout_constraintStart_toEndOf="#id/left"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="wrap"
tools:text="#tools:sample/lorem" />
<TextView
android:id="#+id/apply_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="RIGHT"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/message"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Here is the result:

It is quite a challenge. AFAIK, To do what you want, you have to change the width of the middle TextView to wrap_content and remove right TextView constraint with parent's right.
You could try something like calculating width of left and right then if the total width of the device is more than or equal left + right + middle then you switch from
to this

ConstraintLayout align text right in TextView

How to align text in TextView when it is inside ConstraintLayout? I cannot use layout_width="match_parent. Tried this, does not work :(
android:gravity="start"
android:textAlignment="gravity"

Make the TextView match parent with:
android:layout_width="0dp"
Then define the textAlignment property:
android:textAlignment="viewEnd"
Example, align right in a left to right language:
<TextView
android:id="#+id/tv_item"
style="#style/text_highlight_small_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/my_text"
android:textAlignment="viewStart"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Sample Text" />
Note you can use different values for textAlignment as defined in the documentation.

Unfortunately, we are missing the whole XML of your layout, but let's assume you have something like this:
<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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Something Important to align"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Now if you create exactly this layout, TextView is gonna be in the center. This is the default behavior of the ConstraintLayout, it always tries to center views in it if you set constraints this way. This behavior can be influenced by app:layout_constraintHorizontal_bias and app:layout_constraintVertical_bias property of the TextView. Default values for both are 0.5 what you can translate to 50%. If you set them both to 0, you will find the TextView in the top left position. If you set them both to 1, the TextView will end up in the bottom right position. You got the idea, this way you can position your TextView or any View wherever you want.
The bias properties are also described in the official documentation here.
Fully working example of TextView aligned to center vertically and aligned to right horizontally:
<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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Something Important to align"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.5" />
</android.support.constraint.ConstraintLayout>

Solution:
use this xml code
<?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:text="TextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/textView"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
android:gravity="start"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp" />
</android.support.constraint.ConstraintLayout>
Hope it helps.

use this xml code
<?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:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp" />
</android.support.constraint.ConstraintLayout>

In general, if you have more then one TextView in a single line it is not trivial to align the first TextView to the left. I have used a Guideline for this pourpose and it works perfectly. If you remove the GuideLine it doesn't works.
Here is the xml:
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="130dp"
android:ellipsize="end"
android:maxLines="1"
android:text="first very long very long long long long long very long text"
android:textAlignment="viewStart"
app:layout_constraintEnd_toStartOf="#id/textView2"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="130dp"
android:text="second text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="0dp" />

Try this:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textView"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:gravity="right"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp" />

Try this:
<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="com.example.YOURUSER.YOURPROJECT.YOURACTIVITY">
<TextView
android:id="#+id/TextView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

Use design because it is much easier than xml video file

constraint layout, centre when width is more than the max width

i have two text views. It has fixed margin on both sides. The text should be left aligned but on large devices with width > max width mentioned, the textview should be centered than left aligned. I am not able to get this centering on large devices.
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="start"
android:text="#{title}"
android:textColor="?colorShade1"
android:textSize="60dp"
android:layout_marginTop="20dp"
app:layout_constraintBottom_toTopOf="#id/subTitle"
app:layout_constraintEnd_toEndOf="#+id/guidelineEnd"
app:layout_constraintStart_toStartOf="#+id/guidelineStart"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_max="1280dp"
app:layout_constraintHorizontal_bias="0.0"
tools:text="Title" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/subTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:layout_marginBottom="8dp"
android:text="#{subTitle}"
android:textColor="?colorShade1"
android:textSize="32dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guidelineEnd"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/title"
app:layout_constraintTop_toBottomOf="#+id/title"
app:layout_constraintWidth_max="640dp"
tools:text="SubTitleView" />
<android.support.constraint.Guideline
android:id="#+id/guidelineStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="64dp" />
<android.support.constraint.Guideline
android:id="#+id/guidelineEnd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="64dp" />
</android.support.constraint.ConstraintLayout>

Use app:layout_constraintWidth_max
This will center the LinearLayout in the constraint layout, keeping a 40dp horizontal margin until it hits 414dp width:
<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">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="40dp"
android:layout_marginEnd="40dp"
app:layout_constraintWidth_max="414dp"
android:orientation="vertical"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

You need a copy of your layout in the res/layout-large folder with the second layout that will be specific for large screens.
See more in: https://developer.android.com/training/multiscreen/screensizes.html
In Aliases

How to place views vertically or horizontally in ConstraintLayout?

Here is the Constraintlayout with 3 views:
<?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">
<ImageView
android:id="#+id/iv_profile_image"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintBottom_toTopOf="#+id/tv_name"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/iv_profile_image" />
<TextView
android:id="#+id/tv_headline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/tv_name" />
</android.support.constraint.ConstraintLayout>
The result:
As you can see, there is a big gap between each view. How can I remove those gaps and have them centered on the screen. I can achieve this easily using RelativeLayout or LinearLayout, but how can I do it in this ConstraintLayout? Is ConstraintLayout suppose to be a replacement for RelativeLayout?

When a view has two opposing constraints, ConstraintLayout will center the view between those constraints. This is what is happening in your layout.
If you want the views stacked one on top of another in the center of the screen, one way to do it is to used a packed chain.
Here is your layout using a vertical packed chain:
Here is the XML. Notice how the views are vertically constrained.
<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/iv_profile_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toTopOf="#+id/tv_name"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tv_name"
app:layout_constraintBottom_toTopOf="#+id/tv_headline"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/iv_profile_image" />
<TextView
android:id="#+id/tv_headline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tv_headline"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_name" />
</android.support.constraint.ConstraintLayout>

ConstraintLayouts are said to give a flatter view hierarchy and better performance than normal RelativeLayouts.
I see some things that might cause wierd behaviour. For example in this view:
<TextView
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/iv_profile_image" />
You say that the top of this view should be aligned with the top of the #+id/iv_profile_image-view. Are you sure you don't mean that the top of this view should be aligned with the bottom of the #+id/iv_profile_image-view? And so on for the other views...

Try this it was helpful for you
we,ve to used all four constraints like left,right,top and bottom
you can implement like this also
I don'nt think you always prefer Drag and Drop you may go with the programmatic approarch also
<?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">
<ImageView
android:id="#+id/iv_profile_image"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintBottom_toTopOf="#+id/tv_name"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
app:layout_constraintTop_toBottomOf="#+id/iv_profile_image"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#+id/tv_headline" />
<TextView
android:id="#+id/tv_headline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_name" />
</android.support.constraint.ConstraintLayout>
Happy to help you