ConstraintLayout CheatSheet

1. Constraint Parent

<?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="slider.app.com.constraintapp.MainActivity">

</android.support.constraint.ConstraintLayout>

2. Type of Constraint of current view – Must use of to use margin, padding and more

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintBottom_toBottomOf="@+id/idTv1"

app:layout_constraintEnd_toEndOf="parent"

3. Layout Margin

android:layout_margin="16dp"

or

android:layout_marginStart="16dp"

android:layout_marginTop="16dp"

android:layout_marginBottom="16dp"

android:layout_marginEnd="16dp"

or

android:layout_marginLeft="16dp"

android:layout_marginRight="20dp"

or

android:layout_marginHorizontal="20dp"

android:layout_marginVertical="20dp"

or

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintStart_toEndOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintTop_toBottomOf="parent"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintBottom_toTopOf="@+id/idBottomView"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintEnd_toStartOf="parent"

app:layout_constraintLeft_toLeftOf="@+id/idBottomView"

app:layout_constraintLeft_toRightOf="parent"

app:layout_constraintRight_toRightOf="@+id/idBottomView"

app:layout_constraintRight_toLeftOf="parent"

Note
-
The
designer creates android:layout_marginLeft
when
you move the button, but android:layout_marginStart

4.
Padding 

android:padding="16dp"

android:paddingStart="16dp"

android:paddingTop="16dp"

android:paddingEnd="16dp"

android:paddingBottom="16dp"

android:paddingLeft="16dp"

android:paddingRight="16dp"

android:paddingHorizontal="16dp"

android:paddingVertical="16dp"

android:includeFontPadding="true"

5.
Bias

A.
Horizontal Bias

app:layout_constraintHorizontal_bias="0.3"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

A.
Vertical Bias

app:layout_constraintVertical_bias="0.8"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintBottom_toBottomOf="parent"

6.
 layout_editor_absolute position

tools:layout_editor_absoluteY="50dp"

tools:layout_editor_absoluteX="40dp"

7.
Ratio

android:layout_height="0dp"

app:layout_constraintDimensionRatio="1:1"

app:layout_constraintTop_toTopOf="parent"

or

android:layout_width="0dp"

android:layout_height="0dp"

   app:layout_constraintDimensionRatio="H,3:1"

   app:layout_constraintBottom_toBottomOf="parent"

   
app:layout_constraintTop_toTopOf="parent"

8.
Chain Style

<?xml
version="1.0"
encoding="utf-8"?>

<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"

   xmlns:app="http://schemas.android.com/apk/res-auto"

   android:layout_width="match_parent"

   android:layout_height="match_parent">

   <Button

       android:id="@+id/view1"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:text="View
1"

       app:layout_constraintVertical_chainStyle="spread"

       app:layout_constraintTop_toTopOf="parent"

       app:layout_constraintBottom_toTopOf="@+id/view2"

       app:layout_constraintRight_toRightOf="parent"

       app:layout_constraintLeft_toLeftOf="parent"
/>

   <Button

       android:id="@+id/view2"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:text="View
2"

       app:layout_constraintTop_toBottomOf="@+id/view1"

       app:layout_constraintBottom_toTopOf="@+id/view3"

       app:layout_constraintVertical_chainStyle="packed"

       app:layout_constraintRight_toRightOf="parent"

       app:layout_constraintLeft_toLeftOf="parent"
/>

   <Button

       android:id="@+id/view3"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:text="View
3"

       app:layout_constraintTop_toBottomOf="@+id/view2"

       app:layout_constraintBottom_toBottomOf="parent"

       app:layout_constraintVertical_chainStyle="packed"

       app:layout_constraintRight_toRightOf="parent"

       app:layout_constraintLeft_toLeftOf="parent"
/>

</android.support.constraint.ConstraintLayout>

9.
GuideLine

<android.support.constraint.Guideline

   android:id="@+id/guideline"

   android:layout_width="wrap_content"

   android:layout_height="wrap_content"

   app:layout_constraintGuide_begin="192dp"

   android:orientation="vertical"/>

<TextView

   android:id="@+id/max_width_demo_view"

   android:layout_width="0dp"

   android:layout_height="wrap_content"

   app:layout_constraintLeft_toLeftOf="parent"

   app:layout_constraintRight_toRightOf="parent"

   app:layout_constraintRight_toLeftOf="@id/guideline"

   app:layout_constraintTop_toTopOf="parent"

   android:padding="8dp"

   android:text="Text
emulating maxWidth of 192dp" />

<TextView

   android:id="@+id/min_width_demo_view"

   android:layout_width="0dp"

   android:layout_height="wrap_content"

   app:layout_constraintLeft_toLeftOf="parent"

   app:layout_constraintRight_toRightOf="parent"

   app:layout_constraintLeft_toRightOf="@id/guideline"

   app:layout_constraintTop_toBottomOf="@id/max_width_demo_view"

   android:padding="8dp"

    android:text="Text
emulating minWidth of 192dp" />

22

22

22

22