ConstraintLayout Examples – Position and size widgets flexibly

Step by step examples to teach you ConstraintLayout.

What is ConstraintLayout?

A ConstraintLayout is a ViewGroup which allows you to position and size widgets in a flexible way.

How is it different to other ViewGroups?

Unlike many other ViewGroups, it is designed to allow you to create nested view groups with a flat hierarchical structure (no nested views). Similar to RelativeLayout, it arranges all views according to their relationship to their parent layout, but it provides more flexibility and is easier to implement when using Android Studio’s Layout Editor.

As a result of the Layout Editor’s integration with the Layout API, 'ConstraintLayout's‘ full power is available with its visual tools directly from the Layout Editor. As a result, you don’t have to edit any XML when building your layout with ConstraintLayout.

To find a comprehensive documentation on ConstraintLayout, go to the android developer documentation here. This tutorial is focused more on examples.

Common Attributes

Here are the most commonly used attributes:

a. layout_constraintEnd_toEndOf — The end of the widget will be aligned to the end of the parent view.
b. layout_constraintStart_toStartOf — The start of the widget will be aligned to the start of the parent view.
c. layout_constraintTop_toTopOf — The top of the widget will be aligned to the top of the parent view.
d. layout_constraintTop_toBottomOf — The top of the widget will be aligned to the bottom of the parent view.
e. layout_constraintBottom_toTopOf — The bottom of the widget will be aligned to the top of the parent view.
f. layout_constraintBottom_toBottomOf — The bottom of the widget will be aligned to the bottom of the parent view.
g. layout_constraintLeft_toTopOf — The left of the widget will be aligned to the top of the parent view.
h. layout_constraintLeft_toBottomOf — The left of the widget will be aligned to the bottom of the parent view.
i. layout_constraintLeft_toLeftOf — The left of the widget will be aligned to the left of the parent view.
j. layout_constraintLeft_toRightOf — The left of the widget will be aligned to the right of the parent view.
k. layout_constraintRight_toTopOf — The right of the widget will be aligned to the top of the parent view.
l. layout_constraintRight_toBottomOf — The right of the widget will be aligned to the bottom of the parent view.
m. layout_constraintRight_toLeftOf — The right of the widget will be aligned to the left of the parent view.
n. layout_constraintRight_toRightOf — The right of the widget will be aligned to the right of the parent view.

Types of Constraints:

There are various types of constraints that you can use:

• Relative positioning
• Margins
• Centering positioning
• Circular positioning
• Visibility behavior
• Dimension constraints
• Chains
• Virtual Helpers objects
• Optimizer

Note that you cannot have a circular dependency in constraints.

How to Add ConstraintLayout to your project

To use ConstraintLayout in your project, proceed as follows:

1. Ensure you have the maven.google.com repository declared in your settings.gradle file:

For Groovy:

      dependencyResolutionManagement {  
       ...  
       repositories {  
         google()  
       }  
      )  

For Kotlin:

      dependencyResolutionManagement {  
       ...  
       repositories {  
         google()  
       }  
      }  

2. Add the library as a dependency in the module-level build.gradle file, as shown in the following example. Note that the latest version might be different than what is shown in the example:

For Groovy:

    dependencies {  
      implementation "androidx.constraintlayout:constraintlayout:2.1.4"  
      // To use constraintlayout in compose  
      implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"  
    }  

For Kotlin:

    dependencies {  
      implementation("androidx.constraintlayout:constraintlayout:2.1.4")  
      // To use constraintlayout in compose  
      implementation("androidx.constraintlayout:constraintlayout-compose:1.0.1")  
    }  

3. In the toolbar or sync notification, click Sync Project with Gradle Files.

Now you’re ready to build your layout with ConstraintLayout.

Examples

Let us look at some examples of ConstraintLayout:

1. ConstraintLayout Demo Layouts

Here are the sample screenshots of what is created:

This example requires the following:

• Android Studio 3.3+
• Constraint Layout library 2.0.0-alpha5+

Step 1. Dependencies

We need to add some dependencies in our app/build.gradle file as shown below:

(a). build.gradle

Our app-level build.gradle.

We Prepare our dependencies as shown below. You may use later versions.

At the top of our app/build.gradle we will apply the following 1 plugins:

1. Our com.android.application plugin.

We then declare our app dependencies under the dependencies closure, using the implementation statement. We will need the following 3 dependencies:

1. Appcompat - Allows us access to new APIs on older API versions of the platform (many using Material Design).
2. Constraintlayout - This allows us to Position and size widgets in a flexible way with relative positioning.
3. Material - Collection of Modular and customizable Material Design UI components for Android.

Here is our full app/build.gradle:

apply plugin: 'com.android.application'

android {
    compileSdkVersion rootProject.compileSdkVersion
    defaultConfig {
        applicationId "com.example.android.constraintlayoutexamples"
        minSdkVersion 19
        targetSdkVersion rootProject.targetSdkVersion
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation "androidx.appcompat:appcompat:$rootProject.appCompatVersion"
    implementation "androidx.constraintlayout:constraintlayout:$rootProject.constraintLayoutVersion"
    implementation "com.google.android.material:material:$rootProject.materialVersion"
    testImplementation "junit:junit:$rootProject.junitVersion"
}

Step 2. Design Layouts

For this project let's create the following layouts:

(a). constraint_example_1.xml

Our constraint_example_1 layout.

This layout will represent our first ConstraintLayout sample layout. Specify androidx.constraintlayout.widget.ConstraintLayout as it's root element, then add the following widgets:

1. Button
2. TextView

Take note of how the ConstraintLayout app and tool tags like: app:layout_constraintRight_toRightOf and tools:layout_constraintTop_creator are used to constraint the individual buttons. Also note that this a flat hierarchy and there is no nesting of the internal widgets:

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button3"
        android:layout_width="201dp"
        android:layout_height="wrap_content"
        android:text="@string/centered_button"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        tools:layout_constraintTop_creator="1"
        tools:layout_constraintRight_creator="1"
        android:layout_marginTop="31dp"
        app:layout_constraintTop_toBottomOf="@+id/textView2"
        tools:layout_constraintLeft_creator="1" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/centering"
        android:textSize="30sp"
        tools:layout_constraintTop_creator="1"
        tools:layout_constraintRight_creator="1"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="16dp"
        tools:layout_constraintLeft_creator="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button31"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintBottom_creator="1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        tools:layout_constraintLeft_creator="1"
        android:layout_marginBottom="24dp"
        app:layout_constraintLeft_toLeftOf="parent" />

    <Button
        android:id="@+id/button32"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        app:layout_constraintRight_toRightOf="@+id/button31"
        app:layout_constraintLeft_toLeftOf="@+id/button31"
        android:layout_marginBottom="224dp"
        android:layout_marginTop="225dp"
        tools:layout_constraintTop_creator="1"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintBottom_creator="1"
        app:layout_constraintBottom_toBottomOf="@+id/button31"
        tools:layout_constraintLeft_creator="1"
        app:layout_constraintTop_toTopOf="@+id/button3"
        app:layout_constraintHorizontal_bias="0.0" />

    <Button
        android:id="@+id/button33"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        app:layout_constraintRight_toRightOf="@+id/button3"
        app:layout_constraintLeft_toRightOf="@+id/button3"
        app:layout_constraintBottom_toTopOf="@+id/button32"
        app:layout_constraintTop_toTopOf="@+id/button32"
        tools:layout_constraintTop_creator="1"
        tools:layout_constraintBottom_creator="1"
        app:layout_constraintHorizontal_bias="0.5" />

    <Button
        android:id="@+id/button34"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_marginTop="112dp"
        android:layout_marginBottom="113dp"
        app:layout_constraintRight_toRightOf="@+id/button3"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        tools:layout_constraintTop_creator="1"
        tools:layout_constraintBottom_creator="1"
        app:layout_constraintBottom_toBottomOf="@+id/button32"
        app:layout_constraintTop_toTopOf="@+id/button3"
        app:layout_constraintHorizontal_bias="0.52" />

</androidx.constraintlayout.widget.ConstraintLayout>

(b). constraint_example_2.xml

Our constraint_example_2 layout.

This layout will represent our 2nd Example of ConstraintLayout layout. Specify ConstraintLayout as it's root element, then add the following widgets:

1. ConstraintLayout
2. Button
3. TextView

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/button_1"
        app:layout_constraintDimensionRatio="w,16:9"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintBottom_creator="1"
        app:layout_constraintBottom_toTopOf="@+id/button5"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        tools:layout_constraintLeft_creator="1"
        android:layout_marginBottom="19dp"
        app:layout_constraintLeft_toLeftOf="parent" />

    <Button
        android:id="@+id/button5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/button_text"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintBottom_creator="1"
        app:layout_constraintBottom_toTopOf="@+id/button6"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintRight_toRightOf="parent"
        tools:layout_constraintLeft_creator="1"
        android:layout_marginBottom="16dp"
        app:layout_constraintLeft_toLeftOf="parent" />

    <Button
        android:id="@+id/button6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/button_text_12"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintBottom_creator="1"
        app:layout_constraintBottom_toTopOf="@+id/button7"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintRight_toRightOf="parent"
        tools:layout_constraintLeft_creator="1"
        android:layout_marginBottom="16dp"
        app:layout_constraintLeft_toLeftOf="parent" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/arrange"
        android:textSize="30sp"
        tools:layout_constraintTop_creator="1"
        tools:layout_constraintRight_creator="1"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="16dp"
        tools:layout_constraintLeft_creator="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button7"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/button_text"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintBottom_creator="1"
        app:layout_constraintBottom_toTopOf="@+id/button8"
        app:layout_constraintRight_toRightOf="@+id/button6"
        tools:layout_constraintLeft_creator="1"
        android:layout_marginBottom="16dp"
        app:layout_constraintLeft_toLeftOf="@+id/button6" />

    <Button
        android:id="@+id/button8"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/button_text"
        tools:layout_constraintRight_creator="1"
        app:layout_constraintRight_toRightOf="@+id/button7"
        tools:layout_constraintLeft_creator="1"
        app:layout_constraintLeft_toLeftOf="@+id/button7"
        app:layout_constraintBottom_toTopOf="@+id/button27"
        android:layout_marginBottom="104dp"
        app:layout_constraintHorizontal_bias="1.0" />

    <Button
        android:id="@+id/button27"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        app:layout_constraintRight_toLeftOf="@+id/button29"
        app:layout_constraintLeft_toRightOf="@+id/button28"
        tools:layout_constraintBottom_creator="1"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="38dp" />

    <Button
        android:id="@+id/button28"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        app:layout_constraintRight_toLeftOf="@+id/button27"
        app:layout_constraintLeft_toLeftOf="parent"
        tools:layout_constraintBottom_creator="1"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="38dp" />

    <Button
        android:id="@+id/button29"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/button27"
        tools:layout_constraintBottom_creator="1"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="38dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

(c). constraint_example_3.xml

Our constraint_example_3 layout.

This layout will represent our 3rd Example of ConstraintLayout layout. Specify ConstraintLayout as it's root element, then add the following widgets:

1. ConstraintLayout
2. Button
3. TextView
4. Guideline

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="@string/button"
        tools:layout_constraintTop_creator="1"
        android:layout_marginStart="8dp"
        tools:layout_constraintLeft_creator="1"
        app:layout_constraintLeft_toLeftOf="@+id/guideline"
        android:layout_marginLeft="8dp"
        app:layout_constraintBaseline_toBaselineOf="@+id/button5"
        app:layout_constraintRight_toLeftOf="@+id/guideline3"
        android:layout_marginRight="8dp"
        app:layout_constraintHorizontal_bias="0.9" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        app:layout_constraintRight_toLeftOf="@+id/guideline2"
        android:layout_marginRight="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintLeft_toLeftOf="@+id/guideline3"
        android:layout_marginLeft="8dp"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintTop_toTopOf="@+id/guideline4"
        android:layout_marginTop="16dp" />

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        app:layout_constraintRight_toLeftOf="@+id/guideline2"
        tools:layout_constraintTop_creator="1"
        tools:layout_constraintRight_creator="1"
        android:layout_marginEnd="5dp"
        android:layout_marginTop="4dp"
        app:layout_constraintTop_toTopOf="@+id/guideline5"
        android:layout_marginRight="8dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="@+id/guideline3"
        app:layout_constraintHorizontal_bias="0.5" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/guidelines"
        android:textSize="30sp"
        tools:layout_constraintTop_creator="1"
        tools:layout_constraintRight_creator="1"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="16dp"
        tools:layout_constraintLeft_creator="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginLeft="16dp"
        app:layout_constraintHorizontal_bias="0.0"
        android:layout_marginRight="16dp" />

    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        tools:layout_constraintTop_creator="1"
        android:layout_marginStart="8dp"
        app:layout_constraintTop_toBottomOf="@+id/button6"
        tools:layout_constraintLeft_creator="1"
        app:layout_constraintLeft_toLeftOf="@+id/guideline"
        android:layout_marginTop="0dp" />

    <Button
        android:id="@+id/button8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        tools:layout_constraintTop_creator="1"
        android:layout_marginStart="10dp"
        android:layout_marginTop="8dp"
        tools:layout_constraintLeft_creator="1"
        app:layout_constraintLeft_toLeftOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="@+id/guideline6" />

    <androidx.constraintlayout.widget.Guideline
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:id="@+id/guideline"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.15" />

    <androidx.constraintlayout.widget.Guideline
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:id="@+id/guideline2"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.85" />

    <androidx.constraintlayout.widget.Guideline
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:id="@+id/guideline3"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

    <androidx.constraintlayout.widget.Guideline
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:id="@+id/guideline4"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.15" />

    <androidx.constraintlayout.widget.Guideline
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:id="@+id/guideline5"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.50097847" />

    <androidx.constraintlayout.widget.Guideline
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:id="@+id/guideline6"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.85" />

</androidx.constraintlayout.widget.ConstraintLayout>

(d). constraint_example_4.xml

Our constraint_example_4 layout.

This layout will represent our 4th Example of ConstraintLayout layout design. Specify ConstraintLayout as it's root element, then add the following widgets:

1. ConstraintLayout
2. Button
3. TextView

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/one"
        app:layout_constraintTop_toBottomOf="@+id/button5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button11"
        app:layout_constraintBottom_toTopOf="@+id/button14" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/four"
        app:layout_constraintTop_toBottomOf="@+id/button7"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button13"
        app:layout_constraintBottom_toTopOf="@+id/button4" />

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/six"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button9"
        app:layout_constraintLeft_toRightOf="@+id/button13"
        app:layout_constraintBottom_toTopOf="@+id/button12" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/advanced_arrange"
        android:textSize="30sp"
        tools:layout_constraintTop_creator="1"
        tools:layout_constraintRight_creator="1"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="20dp"
        tools:layout_constraintLeft_creator="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/seven"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button8"
        app:layout_constraintBottom_toTopOf="@+id/button5"
        app:layout_constraintTop_toBottomOf="@+id/textView6" />

    <Button
        android:id="@+id/button8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/eight"
        app:layout_constraintLeft_toRightOf="@+id/button7"
        app:layout_constraintRight_toLeftOf="@+id/button9"
        app:layout_constraintBottom_toTopOf="@+id/button13"
        app:layout_constraintTop_toBottomOf="@+id/textView6" />

    <Button
        android:id="@+id/button9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/nine"
        app:layout_constraintLeft_toRightOf="@+id/button8"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/button6"
        app:layout_constraintTop_toBottomOf="@+id/textView6" />

    <Button
        android:id="@+id/button10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/zero"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button11"
        app:layout_constraintLeft_toRightOf="@+id/button14"
        app:layout_constraintBottom_toBottomOf="parent" />

    <Button
        android:id="@+id/button11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/two"
        app:layout_constraintTop_toBottomOf="@+id/button13"
        app:layout_constraintRight_toLeftOf="@+id/button12"
        app:layout_constraintLeft_toRightOf="@+id/button4"
        app:layout_constraintBottom_toTopOf="@+id/button10" />

    <Button
        android:id="@+id/button12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/three"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button6"
        app:layout_constraintLeft_toRightOf="@+id/button11"
        app:layout_constraintBottom_toTopOf="@+id/button10" />

    <Button
        android:id="@+id/button13"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/five"
        app:layout_constraintTop_toBottomOf="@+id/button8"
        app:layout_constraintRight_toLeftOf="@+id/button6"
        app:layout_constraintLeft_toRightOf="@+id/button5"
        app:layout_constraintBottom_toTopOf="@+id/button11" />

    <TextView
        android:id="@+id/textView6"
        android:layout_width="0dp"
        android:layout_height="49dp"
        android:background="#AA9"
        android:text="@string/zero_point_zero"
        android:textSize="30sp"
        tools:layout_constraintTop_creator="1"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintBottom_creator="1"
        android:layout_marginStart="16dp"
        app:layout_constraintBottom_toBottomOf="@+id/button7"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="69dp"
        tools:layout_constraintLeft_creator="1"
        android:layout_marginBottom="81dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button14"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/dot"
        app:layout_constraintTop_toBottomOf="@+id/button4"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button10"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

(e). constraint_example_5.xml

Our constraint_example_5 layout.

1. ConstraintLayout
2. TextView
3. ImageView
4. ImageButton

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="@string/aspect_ratio"
        android:textSize="30sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:layout_constraintLeft_creator="1"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintTop_creator="1" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="24dp"
        android:text="@string/big_android_icon"
        android:textSize="24sp"
        app:layout_constraintLeft_toRightOf="@+id/imageButton"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        tools:layout_constraintTop_creator="1" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/textview"
        android:textSize="24sp"
        app:layout_constraintLeft_toLeftOf="@+id/textView4"
        app:layout_constraintTop_toBottomOf="@+id/textView4"
        tools:layout_constraintLeft_creator="1"
        tools:layout_constraintTop_creator="1" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="16dp"
        android:scaleType="centerCrop"
        android:contentDescription="@string/lake_tahoe_image"
        app:layout_constraintDimensionRatio="h,16:9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:srcCompat="@drawable/lake"
        tools:layout_constraintLeft_creator="1"
        tools:layout_constraintRight_creator="1"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />

    <ImageButton
        android:id="@+id/imageButton"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:srcCompat="@drawable/ic_android_black_24dp"
        tools:layout_constraintBottom_creator="1"
        app:layout_constraintBottom_toBottomOf="@+id/textView5"
        app:layout_constraintTop_toTopOf="@+id/textView4"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintDimensionRatio="w,1:1"
        android:contentDescription="@string/android_button" />
</androidx.constraintlayout.widget.ConstraintLayout>

(f). constraint_example_6.xml

Our constraint_example_6 layout.

1. ConstraintLayout
2. Button
3. TextView

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        app:layout_constraintBottom_toTopOf="@+id/button5"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.74"
        app:layout_constraintRight_toRightOf="@+id/button5"
        app:layout_constraintVertical_chainStyle="packed" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        app:layout_constraintBottom_toTopOf="@+id/button6"
        app:layout_constraintTop_toBottomOf="@+id/button4"
        app:layout_constraintRight_toRightOf="@+id/button6" />

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        app:layout_constraintBottom_toTopOf="@+id/button7"
        app:layout_constraintTop_toBottomOf="@+id/button5"
        app:layout_constraintRight_toRightOf="@+id/button7" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="@string/basic_chains"
        android:textSize="30sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:layout_constraintLeft_creator="1"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintTop_creator="1" />

    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        app:layout_constraintBottom_toTopOf="@+id/button8"
        app:layout_constraintTop_toBottomOf="@+id/button6"
        app:layout_constraintRight_toRightOf="@+id/button8" />

    <Button
        android:id="@+id/button8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button7"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button9"
        app:layout_constraintHorizontal_bias="0.42" />

    <Button
        android:id="@+id/button9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        app:layout_constraintRight_toLeftOf="@+id/button10"
        app:layout_constraintLeft_toRightOf="@+id/button8"
        app:layout_constraintTop_toTopOf="@+id/button8" />

    <Button
        android:id="@+id/button10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/button9"
        app:layout_constraintTop_toTopOf="@+id/button9" />

</androidx.constraintlayout.widget.ConstraintLayout>

(g). constraint_example_x1.xml

Our constraint_example_x1 layout.

1. ConstraintLayout
2. Button
3. TextView

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/one"
        app:layout_constraintRight_toLeftOf="@+id/button11"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/button14"
        app:layout_constraintTop_toBottomOf="@+id/button5" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/four"
        app:layout_constraintRight_toLeftOf="@+id/button13"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/button4"
        app:layout_constraintTop_toBottomOf="@+id/button7" />

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/six"
        app:layout_constraintRight_toLeftOf="@+id/button23"
        app:layout_constraintLeft_toRightOf="@+id/button13"
        app:layout_constraintBottom_toTopOf="@+id/button12"
        app:layout_constraintTop_toBottomOf="@+id/button9" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/advanced_chains"
        android:textSize="30sp"
        tools:layout_constraintTop_creator="1"
        tools:layout_constraintRight_creator="1"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="20dp"
        tools:layout_constraintLeft_creator="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp" />

    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/seven"
        app:layout_constraintRight_toLeftOf="@+id/button8"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/button5"
        app:layout_constraintTop_toBottomOf="@+id/textView6" />

    <Button
        android:id="@+id/button8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/eight"
        app:layout_constraintRight_toLeftOf="@+id/button9"
        app:layout_constraintLeft_toRightOf="@+id/button7"
        app:layout_constraintBottom_toTopOf="@+id/button13"
        app:layout_constraintTop_toBottomOf="@+id/textView6" />

    <Button
        android:id="@+id/button9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/nine"
        app:layout_constraintRight_toLeftOf="@+id/button22"
        app:layout_constraintLeft_toRightOf="@+id/button8"
        app:layout_constraintBottom_toTopOf="@+id/button6"
        app:layout_constraintTop_toBottomOf="@+id/textView6" />

    <Button
        android:id="@+id/button10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/zero"
        app:layout_constraintRight_toLeftOf="@+id/button25"
        app:layout_constraintLeft_toRightOf="@+id/button14"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button11" />

    <Button
        android:id="@+id/button11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/two"
        app:layout_constraintRight_toLeftOf="@+id/button12"
        app:layout_constraintLeft_toRightOf="@+id/button4"
        app:layout_constraintBottom_toTopOf="@+id/button10"
        app:layout_constraintTop_toBottomOf="@+id/button13" />

    <Button
        android:id="@+id/button12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/three"
        app:layout_constraintRight_toLeftOf="@+id/button24"
        app:layout_constraintLeft_toRightOf="@+id/button11"
        app:layout_constraintBottom_toTopOf="@+id/button25"
        app:layout_constraintTop_toBottomOf="@+id/button6" />

    <Button
        android:id="@+id/button13"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/five"
        app:layout_constraintRight_toLeftOf="@+id/button6"
        app:layout_constraintLeft_toRightOf="@+id/button5"
        app:layout_constraintBottom_toTopOf="@+id/button11"
        app:layout_constraintTop_toBottomOf="@+id/button8" />

    <TextView
        android:id="@+id/textView6"
        android:layout_width="0dp"
        android:layout_height="49dp"
        android:background="#BB9"
        android:text="@string/zero_point_zero"
        android:textAlignment="viewEnd"
        android:textSize="30sp"
        app:layout_constraintLeft_toLeftOf="@+id/button7"
        app:layout_constraintRight_toRightOf="@+id/button22"
        tools:layout_constraintTop_creator="1"
        tools:layout_constraintRight_creator="1"
        android:layout_marginTop="24dp"
        app:layout_constraintTop_toBottomOf="@+id/textView3"
        tools:layout_constraintLeft_creator="1" />

    <Button
        android:id="@+id/button14"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/dot"
        app:layout_constraintRight_toLeftOf="@+id/button10"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button4" />

    <Button
        android:id="@+id/button22"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/divide"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/button9"
        app:layout_constraintBottom_toTopOf="@+id/button23"
        app:layout_constraintTop_toBottomOf="@+id/textView6" />

    <Button
        android:id="@+id/button23"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/multiply"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/button6"
        app:layout_constraintBottom_toTopOf="@+id/button24"
        app:layout_constraintTop_toBottomOf="@+id/button22" />

    <Button
        android:id="@+id/button24"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/add"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/button12"
        app:layout_constraintBottom_toTopOf="@+id/button26"
        app:layout_constraintTop_toBottomOf="@+id/button23" />

    <Button
        android:id="@+id/button25"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/equals"
        app:layout_constraintRight_toLeftOf="@+id/button26"
        app:layout_constraintLeft_toRightOf="@+id/button10"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button12" />

    <Button
        android:id="@+id/button26"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/subtract"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/button25"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button24" />

</androidx.constraintlayout.widget.ConstraintLayout>

(h). constraintset_example_big.xml

Our constraintset_example_big layout.

1. ConstraintLayout
2. ImageView
3. TextView

<?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:id="@+id/activity_constraintset_example"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="24dp"
        android:layout_marginStart="24dp"
        android:layout_marginTop="24dp"
        android:onClick="toggleMode"
        android:scaleType="centerCrop"
        android:src="@drawable/lake"
        app:layout_constraintDimensionRatio="h,16:9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:layout_constraintLeft_creator="1"
        tools:layout_constraintRight_creator="1"
        android:contentDescription="@string/lake_tahoe_image" />

    <TextView
        android:id="@+id/textView9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/lake_tahoe_title"
        android:textSize="30sp"
        app:layout_constraintLeft_toLeftOf="@+id/imageView"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />

    <TextView
        android:id="@+id/textView11"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="@string/lake_discription"
        app:layout_constraintLeft_toLeftOf="@+id/textView9"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/textView9"
        app:layout_constraintRight_toRightOf="@+id/imageView"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="16dp"
        tools:layout_constraintTop_creator="1"
        tools:layout_constraintBottom_creator="1"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintVertical_bias="0.0" />

</androidx.constraintlayout.widget.ConstraintLayout>

(i). constraintset_example_main.xml

Our constraintset_example_main layout.

1. ConstraintLayout
2. ImageView
3. TextView

<?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:id="@+id/activity_constraintset_example"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:onClick="toggleMode"
        android:scaleType="centerCrop"
        android:src="@drawable/lake"
        app:layout_constraintBottom_toBottomOf="@+id/textView9"
        app:layout_constraintDimensionRatio="w,16:9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="@+id/textView9"
        tools:layout_constraintBottom_creator="1"
        tools:layout_constraintTop_creator="1"
        android:contentDescription="@string/lake_tahoe_image"
        app:layout_constraintVertical_bias="0.0" />

    <TextView
        android:id="@+id/textView9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:text="@string/lake_tahoe_title"
        android:textSize="30sp"
        app:layout_constraintLeft_toRightOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView11"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="24dp"
        android:text="@string/lake_discription"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        tools:layout_constraintBottom_creator="1"
        tools:layout_constraintLeft_creator="1"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintTop_creator="1" />

</androidx.constraintlayout.widget.ConstraintLayout>

(j). activity_main.xml

Our activity_main layout.

This layout will show how to use another layout like ScrollView as the root element, with ConstraintLayoyt defined as child.

1. ScrollView
2. ConstraintLayout
3. Button

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.android.constraintlayoutexamples.MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:onClick="show"
            android:tag="constraint_example_1"
            android:text="@string/centering_views"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:layout_constraintLeft_creator="1"
            tools:layout_constraintRight_creator="1" />

        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="8dp"
            android:onClick="show"
            android:tag="constraint_example_2"
            android:text="@string/basic_arrange"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/button"
            tools:layout_constraintLeft_creator="1"
            tools:layout_constraintRight_creator="1" />

        <Button
            android:id="@+id/button15"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:onClick="show"
            android:tag="constraint_example_4"
            android:text="@string/advanced_arrangement"
            app:layout_constraintLeft_toLeftOf="@+id/button30"
            app:layout_constraintRight_toRightOf="@+id/button30"
            app:layout_constraintTop_toBottomOf="@+id/button30"
            tools:layout_constraintLeft_creator="1"
            tools:layout_constraintRight_creator="1" />

        <Button
            android:id="@+id/button18"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:onClick="show"
            android:tag="constraint_example_5"
            android:text="@string/aspect_ratio"
            app:layout_constraintLeft_toLeftOf="@+id/button15"
            app:layout_constraintRight_toRightOf="@+id/button15"
            app:layout_constraintTop_toBottomOf="@+id/button15"
            tools:layout_constraintLeft_creator="1"
            tools:layout_constraintRight_creator="1" />

        <Button
            android:id="@+id/button19"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:onClick="show"
            android:tag="constraint_example_6"
            android:text="@string/basic_chains"
            app:layout_constraintLeft_toLeftOf="@+id/button18"
            app:layout_constraintRight_toRightOf="@+id/button18"
            app:layout_constraintTop_toBottomOf="@+id/button18"
            tools:layout_constraintLeft_creator="1"
            tools:layout_constraintRight_creator="1" />

        <Button
            android:id="@+id/button20"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:onClick="showConstraintSetExample"
            android:tag="constraint_example_7"
            android:text="@string/constraintset"
            app:layout_constraintLeft_toLeftOf="@+id/button19"
            app:layout_constraintRight_toRightOf="@+id/button19"
            app:layout_constraintTop_toBottomOf="@+id/button19"
            tools:layout_constraintLeft_creator="1"
            tools:layout_constraintRight_creator="1" />

        <Button
            android:id="@+id/button21"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:onClick="show"
            android:tag="constraint_example_x1"
            android:text="@string/advanced_chains"
            app:layout_constraintLeft_toLeftOf="@+id/button20"
            app:layout_constraintRight_toRightOf="@+id/button20"
            app:layout_constraintTop_toBottomOf="@+id/button20"
            tools:layout_constraintLeft_creator="1"
            tools:layout_constraintRight_creator="1" />

        <Button
            android:id="@+id/button30"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:onClick="show"
            android:tag="constraint_example_3"
            android:text="@string/guidelines"
            app:layout_constraintLeft_toLeftOf="@+id/button2"
            app:layout_constraintRight_toRightOf="@+id/button2"
            app:layout_constraintTop_toBottomOf="@+id/button2"
            tools:layout_constraintLeft_creator="1"
            tools:layout_constraintRight_creator="1" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

Step 3. Write Code

Finally we need to write our code as follows:

(a). ConstraintSetExampleActivity.java

Our ConstraintSetExampleActivity class.

Create a java file named ConstraintSetExampleActivity.java.

Then create a class that extends AppCompatActivity and add its contents as follows:

We will add imports from android SDK and other packages. Here are some of the imports we will use in this class:

1. Bundle from the android.os package.
2. TransitionManager from the android.transition package.
3. View from the android.view package.
4. AppCompatActivity from the androidx.appcompat.app package.
5. ConstraintLayout from the androidx.constraintlayout.widget package.
6. ConstraintSet from the androidx.constraintlayout.widget package.

We will be overriding the following methods:

1. onCreate(Bundle.
2. onSaveInstanceState(Bundle.

We will be creating the following methods:

1. toggleMode(View v).
2. applyConfig().

Here is the full java code for this class:

package replace_with_your_package_name;

import android.os.Bundle;
import android.transition.TransitionManager;
import android.view.View;

import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.constraintlayout.widget.ConstraintSet;

/**
 * An example activity that show cases the use of {@link ConstraintSet}.
 * It starts out with a single ConstraintLayout which is then transitioned to
 * a different ConstraintLayout using {@link ConstraintSet#applyTo(ConstraintLayout)}.
 */
public class ConstraintSetExampleActivity extends AppCompatActivity {

    private static final String SHOW_BIG_IMAGE = "showBigImage";

    /**
     * Whether to show an enlarged image
     */
    private boolean mShowBigImage = false;
    /**
     * The ConstraintLayout that any changes are applied to.
     */
    private ConstraintLayout mRootLayout;
    /**
     * The ConstraintSet to use for the normal initial state
     */
    private ConstraintSet mConstraintSetNormal = new ConstraintSet();
    /**
     * ConstraintSet to be applied on the normal ConstraintLayout to make the Image bigger.
     */
    private ConstraintSet mConstraintSetBig = new ConstraintSet();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.constraintset_example_main);

        mRootLayout = (ConstraintLayout) findViewById(R.id.activity_constraintset_example);
        // Note that this can also be achieved by calling
        // `mConstraintSetNormal.load(this, R.layout.constraintset_example_main);`
        // Since we already have an inflated ConstraintLayout in `mRootLayout`, clone() is
        // faster and considered the best practice.
        mConstraintSetNormal.clone(mRootLayout);
        // Load the constraints from the layout where ImageView is enlarged.
        mConstraintSetBig.load(this, R.layout.constraintset_example_big);

        if (savedInstanceState != null) {
            boolean previous = savedInstanceState.getBoolean(SHOW_BIG_IMAGE);
            if (previous != mShowBigImage) {
                mShowBigImage = previous;
                applyConfig();
            }
        }
    }

    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        outState.putBoolean(SHOW_BIG_IMAGE, mShowBigImage);
    }

    // Method called when the ImageView within R.layout.constraintset_example_main
    // is clicked.
    public void toggleMode(View v) {
        TransitionManager.beginDelayedTransition(mRootLayout);
        mShowBigImage = !mShowBigImage;
        applyConfig();
    }

    private void applyConfig() {
        if (mShowBigImage) {
            mConstraintSetBig.applyTo(mRootLayout);
        } else {
            mConstraintSetNormal.applyTo(mRootLayout);
        }
    }
}

(b). MainActivity.java

Our MainActivity class.

Create a java file named MainActivity.java.

Then create a class that extends AppCompatActivity and add its contents as follows:

We will add imports from android SDK and other packages. Here are some of the imports we will use in this class:

1. Intent from the android.content package.
2. Configuration from the android.content.res package.
3. Bundle from the android.os package.
4. View from the android.view package.
5. AppCompatActivity from the androidx.appcompat.app package.

We will be overriding the following methods:

1. onCreate(Bundle.
2. onConfigurationChanged(Configuration.
3. onBackPressed().

We will be creating the following methods:

1. show(View v).
2. showConstraintSetExample(View view).
3. setContentView(String tag).

Here is the full java code for this class:

package replace_with_your_package_name;

import android.content.Intent;
import android.content.res.Configuration;
import android.os.Bundle;
import android.view.View;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    private String mTag = "activity_main";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(mTag);
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        setContentView(mTag);
    }

    public void show(View v) {
        mTag = (String) v.getTag();
        setContentView(mTag);
    }

    @Override
    public void onBackPressed() {
        if (!mTag.equals("activity_main")) {
            mTag = "activity_main";
            setContentView(mTag);
        } else {
            super.onBackPressed();
        }
    }

    public void showConstraintSetExample(View view) {
        startActivity(new Intent(this, ConstraintSetExampleActivity.class));
    }

    private void setContentView(String tag) {
        int id = getResources().getIdentifier(tag, "layout", getPackageName());
        setContentView(id);
    }
}

Reference

Below are the reference links:

No.	Link
1.	Read more here.

---

2. Designing Material CardViews using ConstraintLayout

CardView with Material Design using ConstraintLayout.

This sample contains the layout implementation for all the possible CardView combinations listed in Material design guidelines - Content block combinations.

Introduction

Material design guidelines mention that cards can be constructed using blocks of content which include:

• An optional header
• A primary title
• Rich media
• Supporting text
• Actions

• These blocks can be organized to promote different types of content.
  This sample implements layouts for all the possible CardView combinations listed in Material design guidelines - Content block combinations. All the layouts implemented with using ConstraintLayout.

Pre-requisites

• Android Studio 3.+
• Gradle 3.+

Screenshots

Let us look at a full ConstraintLayout Example based on this project.

Step 1. Dependencies

We need to add some dependencies in our app/build.gradle file as shown below:

(a). build.gradle

Our app-level build.gradle.

We Prepare our dependencies as shown below. You may use later versions.

At the top of our app/build.gradle we will apply the following 3 plugins:

1. Our com.android.application plugin.
2. Our kotlin-android plugin.
3. Our kotlin-android-extensions plugin.

We then declare our app dependencies under the dependencies closure, using the implementation statement. We will need the following 5 dependencies:

1. Our Kotlin-stdlib-jdk7 library.
2. Our Appcompat-v7 library.
3. Our Recyclerview-v7 library.
4. Our Cardview-v7 library.
5. Our Constraint-layout library.

Here is our full app/build.gradle:

apply plugin: 'com.android.application'

apply plugin: 'kotlin-android'

apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 27
    defaultConfig {
        applicationId "com.eugenebrusov.cards"
        minSdkVersion 21
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation "com.android.support:appcompat-v7:$rootProject.supportVersion"
    implementation "com.android.support:recyclerview-v7:$rootProject.supportVersion"
    implementation "com.android.support:cardview-v7:$rootProject.supportVersion"
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
}

Step 2. Design Layouts

For this project let's create the following layouts:

(a). item_primarytext_subtext_supportingtext_actions.xml

Our item_primarytext_subtext_supportingtext_actions layout.

This layout will represent our Actions Supportingtext Subtext Primarytext Item's layout. Specify CardView as it's root element then inside it place the following widgets:

1. ConstraintLayout
2. TextView
3. Button

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    style="@style/CardView.Light"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    tools:ignore="ContentDescription">

    <android.support.constraint.ConstraintLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/primary_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:text="@string/primary"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline"
            android:textColor="@color/colorPrimaryTextDefaultMaterialLight"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/sub_text"
            app:layout_constraintVertical_chainStyle="packed" />

        <TextView
            android:id="@+id/sub_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:text="@string/subtext"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
            android:textColor="@color/colorSecondaryTextDefaultMaterialLight"
            app:layout_constraintTop_toBottomOf="@+id/primary_text"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/supporting_text" />

        <TextView
            android:id="@+id/supporting_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:lineSpacingExtra="8dp"
            android:text="@string/expanded_supporting"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
            android:textColor="@color/colorPrimaryTextDefaultMaterialLight"
            app:layout_constraintTop_toBottomOf="@+id/sub_text"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/action_button_1" />

        <Button
            style="@style/Widget.AppCompat.Button.Borderless"
            android:id="@+id/action_button_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:layout_marginStart="8dp"
            android:minWidth="0dp"
            android:paddingStart="8dp"
            android:paddingEnd="8dp"
            android:text="@string/action_1"
            android:textColor="@color/colorPrimaryTextDefaultMaterialLight"
            app:layout_constraintTop_toBottomOf="@+id/supporting_text"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" />

        <Button
            style="@style/Widget.AppCompat.Button.Borderless"
            android:id="@+id/action_button_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:text="@string/action_2"
            android:textColor="@color/colorPrimaryTextDefaultMaterialLight"
            app:layout_constraintTop_toTopOf="@+id/action_button_1"
            app:layout_constraintStart_toEndOf="@+id/action_button_1" />

    </android.support.constraint.ConstraintLayout>

</android.support.v7.widget.CardView>

(b). item_media3x_actions.xml

Our item_media3x_actions layout.

This layout will represent our Actions Media3x Item's layout. Specify CardView as it's root element then inside it place the following widgets:

1. ConstraintLayout
2. ImageView
3. ImageButton

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    style="@style/CardView.Light"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    tools:ignore="ContentDescription">

    <android.support.constraint.ConstraintLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/media_image"
            android:layout_width="240dp"
            android:layout_height="240dp"
            android:layout_marginTop="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginBottom="16dp"
            android:scaleType="centerCrop"
            app:srcCompat="@android:color/darker_gray"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" />

        <ImageButton
            android:id="@+id/favorite_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="16dp"
            android:background="#00FFFFFF"
            android:padding="12dp"
            app:srcCompat="@drawable/ic_favorite_black_24dp"
            app:layout_constraintTop_toTopOf="@+id/media_image"
            app:layout_constraintStart_toEndOf="@+id/media_image"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5" />

        <ImageButton
            android:id="@+id/bookmark_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00FFFFFF"
            android:padding="12dp"
            app:srcCompat="@drawable/ic_bookmark_black_24dp"
            app:layout_constraintEnd_toEndOf="@+id/favorite_button"
            app:layout_constraintTop_toBottomOf="@+id/favorite_button" />

        <ImageButton
            android:id="@+id/share_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00FFFFFF"
            android:padding="12dp"
            app:srcCompat="@drawable/ic_share_black_24dp"
            app:layout_constraintTop_toBottomOf="@+id/bookmark_button"
            app:layout_constraintEnd_toEndOf="@+id/bookmark_button" />

    </android.support.constraint.ConstraintLayout>

</android.support.v7.widget.CardView>

(c). item_media2x_primarytext_subtext_actions.xml

Our item_media2x_primarytext_subtext_actions layout.

This layout will represent our Actions Subtext Primarytext Media2x Item's layout. Specify CardView as it's root element then inside it place the following widgets:

1. ConstraintLayout
2. TextView
3. ImageView
4. Button

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    style="@style/CardView.Light"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    tools:ignore="ContentDescription">

    <android.support.constraint.ConstraintLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/primary_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:text="@string/primary_short"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline"
            android:textColor="@color/colorPrimaryTextDefaultMaterialLight"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/media_image" />

        <TextView
            android:id="@+id/sub_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:text="@string/subtext"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
            android:textColor="@color/colorSecondaryTextDefaultMaterialLight"
            app:layout_constraintTop_toBottomOf="@+id/primary_text"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/media_image" />

        <ImageView
            android:id="@+id/media_image"
            android:layout_width="160dp"
            android:layout_height="160dp"
            android:layout_marginEnd="16dp"
            android:layout_marginTop="16dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@android:color/darker_gray" />

        <Button
            style="@style/Widget.AppCompat.Button.Borderless"
            android:id="@+id/action_button_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:minWidth="0dp"
            android:paddingStart="8dp"
            android:paddingEnd="8dp"
            android:text="@string/action_1"
            android:textColor="@color/colorPrimaryTextDefaultMaterialLight"
            app:layout_constraintTop_toBottomOf="@+id/media_image"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" />

        <Button
            style="@style/Widget.AppCompat.Button.Borderless"
            android:id="@+id/action_button_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:minWidth="0dp"
            android:paddingStart="8dp"
            android:paddingEnd="8dp"
            android:text="@string/action_2"
            android:textColor="@color/colorPrimaryTextDefaultMaterialLight"
            app:layout_constraintTop_toTopOf="@+id/action_button_1"
            app:layout_constraintStart_toEndOf="@+id/action_button_1" />

    </android.support.constraint.ConstraintLayout>

</android.support.v7.widget.CardView>

(d). item_media1x_primarytext_subtext_actions.xml

Our item_media1x_primarytext_subtext_actions layout.

This layout will represent our Actions Subtext Primarytext Media1x Item's layout. Specify CardView as it's root element then inside it place the following widgets:

1. ConstraintLayout
2. TextView
3. ImageView
4. Button

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    style="@style/CardView.Light"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    tools:ignore="ContentDescription">

    <android.support.constraint.ConstraintLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/primary_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:text="@string/primary_short"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline"
            android:textColor="@color/colorPrimaryTextDefaultMaterialLight"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/media_image" />

        <TextView
            android:id="@+id/sub_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:text="@string/subtext"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
            android:textColor="@color/colorSecondaryTextDefaultMaterialLight"
            app:layout_constraintTop_toBottomOf="@+id/primary_text"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/media_image" />

        <ImageView
            android:id="@+id/media_image"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="16dp"
            app:srcCompat="@android:color/darker_gray"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

        <Button
            style="@style/Widget.AppCompat.Button.Borderless"
            android:id="@+id/action_button_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:minWidth="0dp"
            android:paddingStart="8dp"
            android:paddingEnd="8dp"
            android:text="@string/action_1"
            android:textColor="@color/colorPrimaryTextDefaultMaterialLight"
            app:layout_constraintTop_toBottomOf="@+id/media_image"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" />

        <Button
            style="@style/Widget.AppCompat.Button.Borderless"
            android:id="@+id/action_button_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:minWidth="0dp"
            android:paddingStart="8dp"
            android:paddingEnd="8dp"
            android:text="@string/action_2"
            android:textColor="@color/colorPrimaryTextDefaultMaterialLight"
            app:layout_constraintTop_toTopOf="@+id/action_button_1"
            app:layout_constraintStart_toEndOf="@+id/action_button_1" />

    </android.support.constraint.ConstraintLayout>

</android.support.v7.widget.CardView>

(e). item_media1x1_primarytext_subtext_actions.xml

Our item_media1x1_primarytext_subtext_actions layout.

This layout will represent our Actions Subtext Primarytext Media1x1 Item's layout. Specify CardView as it's root element then inside it place the following widgets:

1. ConstraintLayout
2. ImageView
3. View
4. Space
5. TextView
6. Button

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    style="@style/CardView.Light"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    tools:ignore="ContentDescription">

    <android.support.constraint.ConstraintLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/media_image"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:scaleType="centerCrop"
            app:srcCompat="@android:color/darker_gray"
            app:layout_constraintDimensionRatio="H,1:1"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="#7F000000"
            app:layout_constraintTop_toTopOf="@+id/top_space"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" />

        <Space
            android:id="@+id/top_space"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="24dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/primary_text"/>

        <TextView
            android:id="@+id/primary_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:text="@string/primary"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline"
            android:textColor="@color/colorPrimaryTextDefaultMaterialDark"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/sub_text"/>

        <TextView
            android:id="@+id/sub_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:layout_marginBottom="16dp"
            android:text="@string/subtext"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
            android:textColor="@color/colorSecondaryTextDefaultMaterialDark"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/action_button_1" />

        <Button
            style="@style/Widget.AppCompat.Button.Borderless"
            android:id="@+id/action_button_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:minWidth="0dp"
            android:paddingStart="8dp"
            android:paddingEnd="8dp"
            android:text="@string/action_1"
            android:textColor="@color/colorPrimaryTextDefaultMaterialDark"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" />

        <Button
            style="@style/Widget.AppCompat.Button.Borderless"
            android:id="@+id/action_button_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:minWidth="0dp"
            android:paddingStart="8dp"
            android:paddingEnd="8dp"
            android:text="@string/action_2"
            android:textColor="@color/colorPrimaryTextDefaultMaterialDark"
            app:layout_constraintTop_toTopOf="@+id/action_button_1"
            app:layout_constraintStart_toEndOf="@+id/action_button_1" />

    </android.support.constraint.ConstraintLayout>

</android.support.v7.widget.CardView>

(f). item_media16x9_supportingtext.xml

Our item_media16x9_supportingtext layout.

This layout will represent our Supportingtext Media16x9 Item's layout. Specify CardView as it's root element then inside it place the following widgets:

1. ConstraintLayout
2. ImageView
3. TextView

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    style="@style/CardView.Light"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    tools:ignore="ContentDescription">

    <android.support.constraint.ConstraintLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/media_image"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:scaleType="centerCrop"
            app:srcCompat="@android:color/darker_gray"
            app:layout_constraintDimensionRatio="H,16:9"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/supporting_text"
            app:layout_constraintVertical_chainStyle="packed" />

        <TextView
            android:id="@+id/supporting_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:layout_marginBottom="16dp"
            android:text="@string/supporting"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
            android:textColor="@color/colorPrimaryTextDefaultMaterialLight"
            android:lineSpacingExtra="8dp"
            app:layout_constraintTop_toBottomOf="@+id/media_image"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>

    </android.support.constraint.ConstraintLayout>

</android.support.v7.widget.CardView>

(g). item_media16x9_primarytext_subtext_actions_supportingtext.xml

Our item_media16x9_primarytext_subtext_actions_supportingtext layout.

This layout will represent our Supportingtext Actions Subtext Primarytext Media16x9 Item's layout. Specify CardView as it's root element then inside it place the following widgets:

1. ConstraintLayout
2. ImageView
3. TextView
4. Button
5. ImageButton

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    style="@style/CardView.Light"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    tools:ignore="ContentDescription">

    <android.support.constraint.ConstraintLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/media_image"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:scaleType="centerCrop"
            app:srcCompat="@android:color/darker_gray"
            app:layout_constraintDimensionRatio="H,16:9"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/primary_text"
            app:layout_constraintVertical_chainStyle="packed" />

        <TextView
            android:id="@+id/primary_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:text="@string/primary"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline"
            android:textColor="@color/colorPrimaryTextDefaultMaterialLight"
            app:layout_constraintTop_toBottomOf="@+id/media_image"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/sub_text" />

        <TextView
            android:id="@+id/sub_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:text="@string/subtext"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
            android:textColor="@color/colorSecondaryTextDefaultMaterialLight"
            app:layout_constraintTop_toBottomOf="@+id/primary_text"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/action_button_1" />

        <Button
            style="@style/Widget.AppCompat.Button.Borderless"
            android:id="@+id/action_button_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:layout_marginStart="8dp"
            android:minWidth="0dp"
            android:paddingStart="8dp"
            android:paddingEnd="8dp"
            android:text="@string/action_1"
            android:textColor="@color/colorPrimaryTextDefaultMaterialLight"
            app:layout_constraintTop_toBottomOf="@+id/sub_text"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/supporting_text" />

        <Button
            style="@style/Widget.AppCompat.Button.Borderless"
            android:id="@+id/action_button_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:minWidth="0dp"
            android:paddingStart="8dp"
            android:paddingEnd="8dp"
            android:text="@string/action_2"
            android:textColor="@color/colorPrimaryTextDefaultMaterialLight"
            app:layout_constraintTop_toTopOf="@+id/action_button_1"
            app:layout_constraintStart_toEndOf="@+id/action_button_1" />

        <ImageButton
            android:id="@+id/expand_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="0dp"
            android:background="#00FFFFFF"
            android:padding="6dp"
            app:srcCompat="@drawable/ic_expand_more_black_36dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="@+id/action_button_1" />

        <TextView
            android:id="@+id/supporting_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:layout_marginBottom="24dp"
            android:lineSpacingExtra="8dp"
            android:text="@string/expanded_supporting"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
            android:textColor="@color/colorPrimaryTextDefaultMaterialLight"
            app:layout_constraintTop_toBottomOf="@+id/action_button_1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>

    </android.support.constraint.ConstraintLayout>

</android.support.v7.widget.CardView>

(h). item_media16x9_actions.xml

Our item_media16x9_actions layout.

This layout will represent our Actions Media16x9 Item's layout. Specify CardView as it's root element then inside it place the following widgets:

1. ConstraintLayout
2. ImageView
3. ImageButton

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    style="@style/CardView.Light"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    tools:ignore="ContentDescription">

    <android.support.constraint.ConstraintLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/media_image"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:scaleType="centerCrop"
            app:srcCompat="@android:color/darker_gray"
            app:layout_constraintDimensionRatio="H,16:9"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/share_button"
            app:layout_constraintVertical_chainStyle="packed" />

        <ImageButton
            android:id="@+id/favorite_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00FFFFFF"
            android:padding="12dp"
            app:srcCompat="@drawable/ic_favorite_black_24dp"
            app:layout_constraintTop_toTopOf="@+id/bookmark_button"
            app:layout_constraintEnd_toStartOf="@+id/bookmark_button" />

        <ImageButton
            android:id="@+id/bookmark_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00FFFFFF"
            android:padding="12dp"
            app:srcCompat="@drawable/ic_bookmark_black_24dp"
            app:layout_constraintTop_toTopOf="@+id/share_button"
            app:layout_constraintEnd_toStartOf="@+id/share_button" />

        <ImageButton
            android:id="@+id/share_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:background="#00FFFFFF"
            android:padding="12dp"
            app:srcCompat="@drawable/ic_share_black_24dp"
            app:layout_constraintTop_toBottomOf="@+id/media_image"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" />

    </android.support.constraint.ConstraintLayout>

</android.support.v7.widget.CardView>

(i). item_media15x_primarytext_subtext_actions.xml

Our item_media15x_primarytext_subtext_actions layout.

This layout will represent our Actions Subtext Primarytext Media15x Item's layout. Specify CardView as it's root element then inside it place the following widgets:

1. ConstraintLayout
2. TextView
3. ImageView
4. Button

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    style="@style/CardView.Light"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    tools:ignore="ContentDescription">

    <android.support.constraint.ConstraintLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/primary_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:text="@string/primary_short"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline"
            android:textColor="@color/colorPrimaryTextDefaultMaterialLight"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/media_image" />

        <TextView
            android:id="@+id/sub_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:text="@string/subtext"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
            android:textColor="@color/colorSecondaryTextDefaultMaterialLight"
            app:layout_constraintTop_toBottomOf="@+id/primary_text"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/media_image" />

        <ImageView
            android:id="@+id/media_image"
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:layout_marginEnd="16dp"
            android:layout_marginTop="16dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@android:color/darker_gray" />

        <Button
            style="@style/Widget.AppCompat.Button.Borderless"
            android:id="@+id/action_button_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:minWidth="0dp"
            android:paddingStart="8dp"
            android:paddingEnd="8dp"
            android:text="@string/action_1"
            android:textColor="@color/colorPrimaryTextDefaultMaterialLight"
            app:layout_constraintTop_toBottomOf="@+id/media_image"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" />

        <Button
            style="@style/Widget.AppCompat.Button.Borderless"
            android:id="@+id/action_button_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:minWidth="0dp"
            android:paddingStart="8dp"
            android:paddingEnd="8dp"
            android:text="@string/action_2"
            android:textColor="@color/colorPrimaryTextDefaultMaterialLight"
            app:layout_constraintTop_toTopOf="@+id/action_button_1"
            app:layout_constraintStart_toEndOf="@+id/action_button_1" />

    </android.support.constraint.ConstraintLayout>

</android.support.v7.widget.CardView>

(j). item_avatar_media16x9_supportingtext_actions.xml

Our item_avatar_media16x9_supportingtext_actions layout.

This layout will represent our Actions Supportingtext Media16x9 Avatar Item's layout. Specify CardView as it's root element then inside it place the following widgets:

1. ConstraintLayout
2. ImageView
3. TextView
4. Button

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    style="@style/CardView.Light"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    tools:ignore="ContentDescription">

    <android.support.constraint.ConstraintLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/avatar_image"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_marginTop="12dp"
            android:layout_marginStart="12dp"
            android:padding="4dp"
            android:scaleType="centerCrop"
            app:srcCompat="@drawable/ic_avatar_40dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/media_image"
            app:layout_constraintVertical_chainStyle="packed" />

        <TextView
            android:id="@+id/title_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:layout_marginStart="12dp"
            android:layout_marginEnd="16dp"
            android:text="@string/title"
            android:textAppearance="@style/TextAppearance.AppCompat.Body2"
            android:textColor="@color/colorPrimaryTextDefaultMaterialLight"
            app:layout_constraintTop_toTopOf="@+id/avatar_image"
            app:layout_constraintStart_toEndOf="@+id/avatar_image"
            app:layout_constraintEnd_toEndOf="parent" />

        <TextView
            android:id="@+id/subtitle_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="12dp"
            android:layout_marginEnd="16dp"
            android:layout_marginBottom="4dp"
            android:text="@string/subhead"
            android:textAppearance="@style/TextAppearance.AppCompat.Body2"
            android:textColor="@color/colorSecondaryTextDefaultMaterialLight"
            app:layout_constraintStart_toEndOf="@+id/avatar_image"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="@+id/avatar_image" />

        <ImageView
            android:id="@+id/media_image"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginTop="12dp"
            android:scaleType="centerCrop"
            app:srcCompat="@android:color/darker_gray"
            app:layout_constraintDimensionRatio="H,16:9"
            app:layout_constraintTop_toBottomOf="@+id/avatar_image"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/supporting_text"/>

        <TextView
            android:id="@+id/supporting_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:lineSpacingExtra="8dp"
            android:text="@string/supporting"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
            android:textColor="@color/colorPrimaryTextDefaultMaterialLight"
            app:layout_constraintTop_toBottomOf="@+id/media_image"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/action_button_1"/>

        <Button
            style="@style/Widget.AppCompat.Button.Borderless"
            android:id="@+id/action_button_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:layout_marginStart="8dp"
            android:minWidth="0dp"
            android:paddingStart="8dp"
            android:paddingEnd="8dp"
            android:text="@string/action_1"
            android:textColor="@color/colorPrimaryTextDefaultMaterialLight"
            app:layout_constraintTop_toBottomOf="@+id/supporting_text"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>

        <Button
            style="@style/Widget.AppCompat.Button.Borderless"
            android:id="@+id/action_button_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:minWidth="0dp"
            android:paddingStart="8dp"
            android:paddingEnd="8dp"
            android:text="@string/action_2"
            android:textColor="@color/colorPrimaryTextDefaultMaterialLight"
            app:layout_constraintTop_toTopOf="@+id/action_button_1"
            app:layout_constraintStart_toEndOf="@+id/action_button_1" />

    </android.support.constraint.ConstraintLayout>

</android.support.v7.widget.CardView>

(k). item_avatar_media16x9_actions.xml

Our item_avatar_media16x9_actions layout.

This layout will represent our Actions Media16x9 Avatar Item's layout. Specify CardView as it's root element then inside it place the following widgets:

1. ConstraintLayout
2. ImageView
3. TextView
4. Button

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    style="@style/CardView.Light"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    tools:ignore="ContentDescription">

    <android.support.constraint.ConstraintLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/avatar_image"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_marginTop="12dp"
            android:layout_marginStart="12dp"
            android:padding="4dp"
            android:scaleType="centerCrop"
            app:srcCompat="@drawable/ic_avatar_40dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/media_image"
            app:layout_constraintVertical_chainStyle="packed" />

        <TextView
            android:id="@+id/title_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:layout_marginStart="12dp"
            android:layout_marginEnd="16dp"
            android:text="@string/title"
            android:textAppearance="@style/TextAppearance.AppCompat.Body2"
            android:textColor="@color/colorPrimaryTextDefaultMaterialLight"
            app:layout_constraintTop_toTopOf="@+id/avatar_image"
            app:layout_constraintStart_toEndOf="@+id/avatar_image"
            app:layout_constraintEnd_toEndOf="parent" />

        <TextView
            android:id="@+id/subtitle_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="12dp"
            android:layout_marginEnd="16dp"
            android:layout_marginBottom="4dp"
            android:text="@string/subhead"
            android:textAppearance="@style/TextAppearance.AppCompat.Body2"
            android:textColor="@color/colorSecondaryTextDefaultMaterialLight"
            app:layout_constraintStart_toEndOf="@+id/avatar_image"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="@+id/avatar_image" />

        <ImageView
            android:id="@+id/media_image"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginTop="12dp"
            android:scaleType="centerCrop"
            app:srcCompat="@android:color/darker_gray"
            app:layout_constraintDimensionRatio="H,16:9"
            app:layout_constraintTop_toBottomOf="@+id/avatar_image"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/action_button_1" />

        <Button
            style="@style/Widget.AppCompat.Button.Borderless"
            android:id="@+id/action_button_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:minWidth="0dp"
            android:paddingStart="8dp"
            android:paddingEnd="8dp"
            android:text="@string/action_1"
            android:textColor="@color/colorPrimaryTextDefaultMaterialLight"
            app:layout_constraintTop_toBottomOf="@+id/media_image"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/action_button_2" />

        <Button
            style="@style/Widget.AppCompat.Button.Borderless"
            android:id="@+id/action_button_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:minWidth="0dp"
            android:paddingStart="8dp"
            android:paddingEnd="8dp"
            android:text="@string/action_2"
            android:textColor="@color/colorPrimaryTextDefaultMaterialLight"
            app:layout_constraintTop_toBottomOf="@+id/action_button_1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>

    </android.support.constraint.ConstraintLayout>

</android.support.v7.widget.CardView>

(m). activity_main.xml

Our activity_main layout.

This layout will represent our Main Activity's layout. Specify android.support.v7.widget.RecyclerView as it's root element then inside it place the following widgets:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.eugenebrusov.cards.MainActivity" />

Step 3. Write Code

Finally we need to write our code as follows:

(a). MainAdapter.kt

Our MainAdapter class.

Create a Kotlin file named MainAdapter.kt and add the necessary imports. Here are some of the imports we will be using:

1. ViewGroup from the android.view package.
2. ImageButton from the android.widget package.
3. Space from the android.widget package.
4. TextView from the android.widget package.

Then extend the RecyclerView.Adapter<MainAdapter.ViewHolder> and add its contents as follows:

First override these callbacks:

1. onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder.
2. onBindViewHolder(holder: ViewHolder, position: Int).
3. getItemCount(): Int.
4. getItemViewType(position: Int): Int.

Here is the full code:

package replace_with_your_package_name

import android.support.v7.widget.RecyclerView
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageButton
import android.widget.Space
import android.widget.TextView
import kotlinx.android.synthetic.main.item_media16x9_primarytext_subtext_actions_supportingtext.view.*

class MainAdapter : RecyclerView.Adapter<MainAdapter.ViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        when (viewType) {
            MEDIA16x9_SUPPORTINGTEXT_VIEW_TYPE -> {
                return ViewHolder(parent,
                        R.layout.item_media16x9_supportingtext)
            }
            AVATAR_MEDIA16x9_SUPPORTINGTEXT_ACTIONS_VIEW_TYPE -> {
                return ViewHolder(parent,
                        R.layout.item_avatar_media16x9_supportingtext_actions)
            }
            AVATAR_MEDIA16x9_ACTIONS_VIEW_TYPE -> {
                return ViewHolder(parent,
                        R.layout.item_avatar_media16x9_actions)
            }
            MEDIA16x9_PRIMARYTEXT_SUBTEXT_ACTIONS_SUPPORTINGTEXT_VIEW_TYPE -> {
                return ExpandableViewHolder(parent,
                        R.layout.item_media16x9_primarytext_subtext_actions_supportingtext)
            }
            PRIMARYTEXT_SUBTEXT_SUPPORTINGTEXT_ACTIONS_VIEW_TYPE -> {
                return ViewHolder(parent,
                        R.layout.item_primarytext_subtext_supportingtext_actions)
            }
            MEDIA16x9_ACTIONS_VIEW_TYPE -> {
                return ViewHolder(parent,
                        R.layout.item_media16x9_actions)
            }
            MEDIA1x1_PRIMARYTEXT_SUBTEXT_ACTIONS_VIEW_TYPE -> {
                return ViewHolder(parent,
                        R.layout.item_media1x1_primarytext_subtext_actions)
            }
            MEDIA1X_PRIMARYTEXT_SUBTEXT_ACTIONS_VIEW_TYPE -> {
                return ViewHolder(parent,
                        R.layout.item_media1x_primarytext_subtext_actions)
            }
            MEDIA15X_PRIMARYTEXT_SUBTEXT_ACTIONS_VIEW_TYPE -> {
                return ViewHolder(parent,
                        R.layout.item_media15x_primarytext_subtext_actions)
            }
            MEDIA2X_PRIMARYTEXT_SUBTEXT_ACTIONS_VIEW_TYPE -> {
                return ViewHolder(parent,
                        R.layout.item_media2x_primarytext_subtext_actions)
            }
            MEDIA3X_PRIMARYTEXT_SUBTEXT_ACTIONS_VIEW_TYPE -> {
                return ViewHolder(parent,
                        R.layout.item_media3x_actions)
            }
            else -> throw IllegalArgumentException("Inappropriate viewType")
        }
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        /** empty implementation */
    }

    override fun getItemCount(): Int {
        return 11
    }

    override fun getItemViewType(position: Int): Int {
        return when (position) {
            0 -> MEDIA16x9_SUPPORTINGTEXT_VIEW_TYPE
            1 -> AVATAR_MEDIA16x9_SUPPORTINGTEXT_ACTIONS_VIEW_TYPE
            2 -> AVATAR_MEDIA16x9_ACTIONS_VIEW_TYPE
            3 -> MEDIA16x9_PRIMARYTEXT_SUBTEXT_ACTIONS_SUPPORTINGTEXT_VIEW_TYPE
            4 -> PRIMARYTEXT_SUBTEXT_SUPPORTINGTEXT_ACTIONS_VIEW_TYPE
            5 -> MEDIA16x9_ACTIONS_VIEW_TYPE
            6 -> MEDIA1x1_PRIMARYTEXT_SUBTEXT_ACTIONS_VIEW_TYPE
            7 -> MEDIA1X_PRIMARYTEXT_SUBTEXT_ACTIONS_VIEW_TYPE
            8 -> MEDIA15X_PRIMARYTEXT_SUBTEXT_ACTIONS_VIEW_TYPE
            9 -> MEDIA2X_PRIMARYTEXT_SUBTEXT_ACTIONS_VIEW_TYPE
            10 -> MEDIA3X_PRIMARYTEXT_SUBTEXT_ACTIONS_VIEW_TYPE
            else -> -1
        }
    }

    companion object {
        const val MEDIA16x9_SUPPORTINGTEXT_VIEW_TYPE = 0
        const val AVATAR_MEDIA16x9_SUPPORTINGTEXT_ACTIONS_VIEW_TYPE = 1
        const val AVATAR_MEDIA16x9_ACTIONS_VIEW_TYPE = 2
        const val MEDIA16x9_PRIMARYTEXT_SUBTEXT_ACTIONS_SUPPORTINGTEXT_VIEW_TYPE = 3
        const val PRIMARYTEXT_SUBTEXT_SUPPORTINGTEXT_ACTIONS_VIEW_TYPE = 4
        const val MEDIA16x9_ACTIONS_VIEW_TYPE = 5
        const val MEDIA1x1_PRIMARYTEXT_SUBTEXT_ACTIONS_VIEW_TYPE = 6
        const val MEDIA1X_PRIMARYTEXT_SUBTEXT_ACTIONS_VIEW_TYPE = 7
        const val MEDIA15X_PRIMARYTEXT_SUBTEXT_ACTIONS_VIEW_TYPE = 8
        const val MEDIA2X_PRIMARYTEXT_SUBTEXT_ACTIONS_VIEW_TYPE = 9
        const val MEDIA3X_PRIMARYTEXT_SUBTEXT_ACTIONS_VIEW_TYPE = 10
    }

    open class ViewHolder(parent: ViewGroup?, resId: Int)
        : RecyclerView.ViewHolder(LayoutInflater.from(parent?.context).inflate(resId, parent, false))

    class ExpandableViewHolder(parent: ViewGroup?, resId: Int) : ViewHolder(parent, resId) {
        private val supportingTextView: TextView = itemView.supporting_text
        private val expandButton: ImageButton = itemView.expand_button

        init {
            expandButton.setOnClickListener {
                if (supportingTextView.visibility == View.VISIBLE) {
                    expandButton.setImageResource(R.drawable.ic_expand_less_black_36dp)
                    supportingTextView.visibility = View.GONE
                } else {
                    expandButton.setImageResource(R.drawable.ic_expand_more_black_36dp)
                    supportingTextView.visibility = View.VISIBLE
                }
            }
        }

    }
}

(b). MainActivity.kt

Our MainActivity class.

Create a Kotlin file named MainActivity.kt and add the necessary imports. Here are some of the imports we will be using:

1. AppCompatActivity from the android.support.v7.app package.
2. Bundle from the android.os package.
3. LinearLayoutManager from the android.support.v7.widget package.
4. recycler_view from the kotlinx.android.synthetic.main.activity_main package.

Then extend the AppCompatActivity and add its contents as follows:

First override these callbacks:

1. onCreate(savedInstanceState: Bundle?).

Here is the full code:

package replace_with_your_package_name

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v7.widget.LinearLayoutManager
import kotlinx.android.synthetic.main.activity_main.recycler_view

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        recycler_view.setHasFixedSize(true)
        recycler_view.layoutManager = LinearLayoutManager(this)
        recycler_view.adapter = MainAdapter()
    }
}

Reference

Below are the reference links:

No.	Link
1.	Download Full Code
2.	Read more here.
3.	Follow code author here.

---

3. Ticket Booking Layout using ConstraintLayout

Android (Kotlin) app design using ConstraintLayout.

This is an Android sample app created using ConstraintLayout.

Here is the demo GIF:

Main layout

Here is the demo screenshot of the main layout:

Cover layout

Here is the demo screenshot of the cover layout:

Description layout

And here is the demo screenshot of the description layout:

Let us look at a full ConstraintLayout Example based on this project below.

Step 1. Dependencies

We need to add some dependencies in our app/build.gradle file as shown below:

(a). build.gradle

Our app-level build.gradle.

We Prepare our dependencies as shown below. You may use later versions.

At the top of our app/build.gradle we will apply the following 3 plugins:

1. Our com.android.application plugin.
2. Our kotlin-android plugin.
3. Our kotlin-android-extensions plugin.

We then declare our app dependencies under the dependencies closure, using the implementation statement. We will need the following 5 dependencies:

1. Kotlin-stdlib - So that we can use Kotlin as our programming language.
2. Core-ktx - With this we can target the latest platform features and APIs while also supporting older devices.
3. Appcompat - Allows us access to new APIs on older API versions of the platform (many using Material Design).
4. Constraintlayout - This allows us to Position and size widgets in a flexible way with relative positioning.
5. Material - Collection of Modular and customizable Material Design UI components for Android.

Here is our full app/build.gradle:

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 29
    buildToolsVersion "29.0.3"

    defaultConfig {
        applicationId "com.souvikbiswas.ticketbooking"
        minSdkVersion 19
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        android.defaultConfig.vectorDrawables.useSupportLibrary = true
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }

    buildFeatures {
        dataBinding true
    }
}

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
    implementation 'androidx.core:core-ktx:1.3.1'
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.0-rc1'
    implementation 'com.google.android.material:material:1.2.0'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

}

Step 2. Our Android Manifest

We will need to look at our AndroidManifest.xml.

(a). AndroidManifest.xml

Our AndroidManifest file.

Our project will have only a single Activity but we have to register it right here as shown below: We will be defining a meta-data tag as well, which will allow us to apply our custom fonts in our app typography. Here is the full Android Manifest file:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.souvikbiswas.ticketbooking">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <meta-data
            android:name="preloaded_fonts"
            android:resource="@array/preloaded_fonts" />
    </application>

</manifest>

Step 3. Design Layouts

Create a folder known as font inside the res directory and add fonts you want to use in that folder. This project uses three fonts. Here is one of them:

(a). poppins.xml

<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:app="http://schemas.android.com/apk/res-auto"
        app:fontProviderAuthority="com.google.android.gms.fonts"
        app:fontProviderPackage="com.google.android.gms"
        app:fontProviderQuery="Poppins"
        app:fontProviderCerts="@array/com_google_android_gms_fonts_certs">
</font-family>

Step 4. Design Layouts

For this project let's create the following layouts:

(a). description_view.xml

Our description_view layout.

This layout will represent our View Description's layout. Specify androidx.constraintlayout.widget.ConstraintLayout as it's root element then inside it place the following widgets:

1. ImageView
2. ImageButton
3. Guideline
4. TextView
5. Button
6. Barrier
7. View

<?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">

    <ImageView
        android:id="@+id/cover"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="24dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:contentDescription="@string/cover_image"
        android:scaleType="centerCrop"
        app:layout_constraintDimensionRatio="2:3"
        app:layout_constraintEnd_toStartOf="@+id/right_guideline"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/menu_button"
        app:srcCompat="@drawable/red_sparrow" />

    <ImageButton
        android:id="@+id/menu_button"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:background="@null"
        android:contentDescription="@string/menu_button"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_scatter" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/left_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.15" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/right_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.40" />

    <TextView
        android:id="@+id/movie_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:fontFamily="@font/poppins_semibold"
        android:text="@string/movie_title"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        app:layout_constraintBottom_toTopOf="@+id/desc"
        app:layout_constraintStart_toEndOf="@+id/cover"
        app:layout_constraintTop_toBottomOf="@+id/menu_button"
        app:layout_constraintVertical_bias="0.0"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:id="@+id/desc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginBottom="16dp"
        android:fontFamily="@font/poppins"
        android:text="@string/movie_desc"
        app:layout_constraintBottom_toTopOf="@+id/rating"
        app:layout_constraintStart_toEndOf="@+id/cover"
        app:layout_constraintTop_toBottomOf="@+id/movie_title" />

    <TextView
        android:id="@+id/rating"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:fontFamily="@font/poppins_medium"
        android:text="@string/movie_rating"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        app:layout_constraintBottom_toTopOf="@+id/cast"
        app:layout_constraintStart_toEndOf="@+id/cover"
        app:layout_constraintTop_toBottomOf="@+id/desc" />

    <TextView
        android:id="@+id/cast"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:fontFamily="@font/poppins_semibold"
        android:text="@string/cast"
        android:textAppearance="@style/TextAppearance.AppCompat.Small"
        app:layout_constraintBottom_toTopOf="@+id/cast_one"
        app:layout_constraintStart_toEndOf="@+id/cover" />

    <TextView
        android:id="@+id/status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:fontFamily="@font/poppins_semibold"
        android:src="@drawable/transition"
        android:text="@string/movie_status"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        app:layout_constraintEnd_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/menu_button" />

    <ImageView
        android:id="@+id/cast_one"
        android:layout_width="50dp"
        android:layout_height="0dp"
        android:layout_marginStart="16dp"
        android:contentDescription="@string/cast_1"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="@+id/cover"
        app:layout_constraintDimensionRatio="w,1:1"
        app:layout_constraintEnd_toStartOf="@+id/cast_three"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toEndOf="@+id/cover"
        app:srcCompat="@drawable/cast_1" />

    <ImageView
        android:id="@+id/cast_two"
        android:layout_width="50dp"
        android:layout_height="0dp"
        android:contentDescription="@string/cast_2"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="@+id/cast_three"
        app:layout_constraintDimensionRatio="h,1:1"
        app:layout_constraintEnd_toStartOf="@+id/button"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/cast_three"
        app:layout_constraintTop_toTopOf="@+id/cast_three"
        app:srcCompat="@drawable/cast_3" />

    <ImageView
        android:id="@+id/cast_three"
        android:layout_width="50dp"
        android:layout_height="0dp"
        android:contentDescription="@string/cast_3"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="@+id/cast_one"
        app:layout_constraintDimensionRatio="w,1:1"
        app:layout_constraintEnd_toStartOf="@+id/cast_two"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/cast_one"
        app:layout_constraintTop_toTopOf="@+id/cast_one"
        app:srcCompat="@drawable/cast_2" />

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_marginEnd="16dp"
        android:background="@color/gray"
        android:text="@string/more_casts"
        app:layout_constraintBottom_toBottomOf="@+id/cast_two"
        app:layout_constraintDimensionRatio="w,1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/cast_two"
        app:layout_constraintTop_toTopOf="@+id/cast_two" />

    <TextView
        android:id="@+id/movie_info"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginTop="36dp"
        android:layout_marginEnd="24dp"
        android:fontFamily="@font/poppins"
        android:text="@string/movie_info"
        android:textAppearance="@style/TextAppearance.AppCompat.Small"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@id/barrier"
        app:layout_constraintTop_toBottomOf="@+id/cover" />

    <ImageButton
        android:id="@+id/description_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:background="@null"
        android:contentDescription="@string/description_button"
        android:tint="@android:color/black"
        app:layout_constraintStart_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/movie_title"
        app:srcCompat="@drawable/ic_baseline_sort_24" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="cover,cast_two,cast_one,button,cast_three"
        tools:layout_editor_absoluteY="267dp" />

    <View
        android:id="@+id/view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="36dp"
        android:background="@color/gray"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/movie_info"
        app:layout_constraintVertical_bias="0.0" />

    <View
        android:id="@+id/date_selector"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="36dp"
        android:background="@android:color/white"
        android:paddingLeft="@dimen/selector_side_padding"
        android:paddingEnd="@dimen/selector_side_padding"
        android:paddingRight="@dimen/selector_side_padding"
        app:layout_constraintBottom_toBottomOf="@+id/day_1"
        app:layout_constraintEnd_toEndOf="@+id/day_1"
        app:layout_constraintStart_toStartOf="@+id/day_1"
        app:layout_constraintTop_toBottomOf="@+id/movie_info" />

    <View
        android:id="@+id/black_bar"
        android:layout_width="0dp"
        android:layout_height="4dp"
        android:background="@android:color/black"
        app:layout_constraintEnd_toEndOf="@+id/date_selector"
        app:layout_constraintStart_toStartOf="@+id/date_selector"
        app:layout_constraintTop_toTopOf="@+id/date_selector" />

    <TextView
        android:id="@+id/date_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="52dp"
        android:fontFamily="@font/poppins_semibold"
        android:text="20"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        app:layout_constraintEnd_toEndOf="@+id/day_1"
        app:layout_constraintStart_toStartOf="@+id/day_1"
        app:layout_constraintTop_toBottomOf="@+id/movie_info"
        tools:text="20" />

    <TextView
        android:id="@+id/date_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/poppins_semibold"
        android:text="21"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        app:layout_constraintBottom_toBottomOf="@+id/date_1"
        app:layout_constraintEnd_toEndOf="@+id/day_2"
        app:layout_constraintStart_toStartOf="@+id/day_2"
        app:layout_constraintTop_toTopOf="@+id/date_1"
        tools:text="21" />

    <TextView
        android:id="@+id/date_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/poppins_semibold"
        android:text="22"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        app:layout_constraintBottom_toBottomOf="@+id/date_2"
        app:layout_constraintEnd_toEndOf="@+id/day_3"
        app:layout_constraintStart_toStartOf="@+id/day_3"
        app:layout_constraintTop_toTopOf="@+id/date_2"
        tools:text="22" />

    <TextView
        android:id="@+id/date_4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/poppins_semibold"
        android:text="23"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        app:layout_constraintBottom_toBottomOf="@+id/date_3"
        app:layout_constraintEnd_toEndOf="@+id/day_4"
        app:layout_constraintStart_toStartOf="@+id/day_4"
        app:layout_constraintTop_toTopOf="@+id/date_3"
        tools:text="23" />

    <TextView
        android:id="@+id/date_5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/poppins_semibold"
        android:text="24"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        app:layout_constraintBottom_toBottomOf="@+id/date_4"
        app:layout_constraintEnd_toEndOf="@+id/day_5"
        app:layout_constraintStart_toStartOf="@+id/day_5"
        app:layout_constraintTop_toTopOf="@+id/date_4"
        tools:text="24" />

    <TextView
        android:id="@+id/date_6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/poppins_semibold"
        android:text="25"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        app:layout_constraintBottom_toBottomOf="@+id/date_5"
        app:layout_constraintEnd_toEndOf="@+id/day_6"
        app:layout_constraintStart_toStartOf="@+id/day_6"
        app:layout_constraintTop_toTopOf="@+id/date_5"
        tools:text="25" />

    <TextView
        android:id="@+id/date_7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/poppins_semibold"
        android:text="26"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        app:layout_constraintBottom_toBottomOf="@+id/date_6"
        app:layout_constraintEnd_toEndOf="@+id/day_7"
        app:layout_constraintStart_toStartOf="@+id/day_7"
        app:layout_constraintTop_toTopOf="@+id/date_6"
        tools:text="26" />

    <TextView
        android:id="@+id/day_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:paddingLeft="@dimen/selector_side_padding"
        android:paddingRight="@dimen/selector_side_padding"
        android:paddingBottom="@dimen/selector_bottom_padding"
        android:text="@string/sunday"
        app:layout_constraintEnd_toStartOf="@+id/day_2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/date_1" />

    <TextView
        android:id="@+id/day_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="@dimen/selector_side_padding"
        android:paddingRight="@dimen/selector_side_padding"
        android:paddingBottom="@dimen/selector_bottom_padding"
        android:text="@string/tuesday"
        app:layout_constraintBottom_toBottomOf="@+id/day_2"
        app:layout_constraintEnd_toStartOf="@+id/day_4"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/day_2"
        app:layout_constraintTop_toTopOf="@+id/day_2" />

    <TextView
        android:id="@+id/day_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="@dimen/selector_side_padding"
        android:paddingRight="@dimen/selector_side_padding"
        android:paddingBottom="@dimen/selector_bottom_padding"
        android:text="@string/monday"
        app:layout_constraintBottom_toBottomOf="@+id/day_1"
        app:layout_constraintEnd_toStartOf="@+id/day_3"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/day_1"
        app:layout_constraintTop_toTopOf="@+id/day_1" />

    <TextView
        android:id="@+id/day_4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="@dimen/selector_side_padding"
        android:paddingRight="@dimen/selector_side_padding"
        android:paddingBottom="@dimen/selector_bottom_padding"
        android:text="@string/wednesday"
        app:layout_constraintBottom_toBottomOf="@+id/day_3"
        app:layout_constraintEnd_toStartOf="@+id/day_5"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/day_3"
        app:layout_constraintTop_toTopOf="@+id/day_3" />

    <TextView
        android:id="@+id/day_7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="@dimen/selector_side_padding"
        android:paddingRight="@dimen/selector_side_padding"
        android:paddingBottom="@dimen/selector_bottom_padding"
        android:text="@string/saturday"
        app:layout_constraintBottom_toBottomOf="@+id/day_6"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/day_6"
        app:layout_constraintTop_toTopOf="@+id/day_6" />

    <TextView
        android:id="@+id/day_5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="@dimen/selector_side_padding"
        android:paddingRight="@dimen/selector_side_padding"
        android:paddingBottom="@dimen/selector_bottom_padding"
        android:text="@string/thursday"
        app:layout_constraintBottom_toBottomOf="@+id/day_4"
        app:layout_constraintEnd_toStartOf="@+id/day_6"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/day_4"
        app:layout_constraintTop_toTopOf="@+id/day_4" />

    <TextView
        android:id="@+id/day_6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="@dimen/selector_side_padding"
        android:paddingRight="@dimen/selector_side_padding"
        android:paddingBottom="@dimen/selector_bottom_padding"
        android:text="@string/friday"
        app:layout_constraintBottom_toBottomOf="@+id/day_5"
        app:layout_constraintEnd_toStartOf="@+id/day_7"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/day_5"
        app:layout_constraintTop_toTopOf="@+id/day_5" />

    <Button
        android:id="@+id/containedButton"
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:background="@color/brick_red"
        android:fontFamily="@font/poppins"
        android:text="@string/book_button"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:textColor="@android:color/white"
        app:icon="@drawable/ic_baseline_sort_24"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/movie_theater_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/poppins_medium"
        android:text="@string/movie_theater_name"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        app:layout_constraintBottom_toTopOf="@+id/movie_theater_distance"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/date_selector"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:id="@+id/movie_theater_distance"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="2dp"
        android:layout_marginTop="2dp"
        android:fontFamily="@font/poppins"
        android:text="@string/theater_distance"
        android:textAppearance="@style/TextAppearance.AppCompat.Small"
        app:layout_constraintBottom_toTopOf="@+id/containedButton"
        app:layout_constraintEnd_toEndOf="@+id/movie_theater_name"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@+id/movie_theater_name"
        app:layout_constraintTop_toBottomOf="@+id/movie_theater_name" />

</androidx.constraintlayout.widget.ConstraintLayout>

(b). cover_view.xml

Our cover_view layout.

This layout will represent our View Cover's layout. Specify androidx.constraintlayout.widget.ConstraintLayout as it's root element then inside it place the following widgets:

1. ImageView
2. ImageButton
3. Guideline
4. TextView
5. Button
6. View

<?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:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/cover"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:contentDescription="@string/cover_image"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio=""
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        app:srcCompat="@drawable/red_sparrow" />

    <ImageButton
        android:id="@+id/menu_button"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:background="@null"
        android:contentDescription="@string/menu_button"
        android:tint="@android:color/white"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_scatter" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/left_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.15" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/right_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.85" />

    <TextView
        android:id="@+id/movie_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/poppins_semibold"
        android:text="@string/movie_title"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toTopOf="@+id/desc"
        app:layout_constraintStart_toStartOf="@+id/left_guideline"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:id="@+id/desc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:fontFamily="@font/poppins"
        android:text="@string/movie_desc"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toTopOf="@+id/rating"
        app:layout_constraintStart_toStartOf="@+id/left_guideline" />

    <TextView
        android:id="@+id/rating"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="36dp"
        android:fontFamily="@font/poppins_medium"
        android:text="@string/movie_rating"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="@+id/left_guideline" />

    <TextView
        android:id="@+id/status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:fontFamily="@font/poppins_semibold"
        android:text="@string/movie_status"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:textColor="@android:color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/cast_one"
        android:layout_width="50dp"
        android:layout_height="0dp"
        android:layout_marginStart="16dp"
        android:contentDescription="@string/cast_1"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="@+id/cover"
        app:layout_constraintDimensionRatio="w,1:1"
        app:layout_constraintEnd_toStartOf="@+id/cast_three"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toEndOf="parent"
        app:srcCompat="@drawable/cast_1" />

    <ImageView
        android:id="@+id/cast_two"
        android:layout_width="50dp"
        android:layout_height="0dp"
        android:layout_marginBottom="16dp"
        android:contentDescription="@string/cast_2"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toTopOf="@+id/movie_info"
        app:layout_constraintDimensionRatio="h,1:1"
        app:layout_constraintEnd_toStartOf="@+id/button"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/cast_three"
        app:srcCompat="@drawable/cast_3" />

    <ImageView
        android:id="@+id/cast_three"
        android:layout_width="50dp"
        android:layout_height="0dp"
        android:layout_marginBottom="16dp"
        android:contentDescription="@string/cast_3"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toTopOf="@+id/movie_info"
        app:layout_constraintDimensionRatio="w,1:1"
        app:layout_constraintEnd_toStartOf="@+id/cast_two"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/cast_one"
        app:srcCompat="@drawable/cast_2" />

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_marginBottom="16dp"
        android:background="@color/gray"
        android:text="@string/more_casts"
        app:layout_constraintBottom_toTopOf="@+id/movie_info"
        app:layout_constraintDimensionRatio="w,1:1"
        app:layout_constraintStart_toEndOf="@+id/cast_two" />

    <TextView
        android:id="@+id/movie_info"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="24dp"
        android:fontFamily="@font/poppins"
        android:text="@string/movie_info"
        android:textAppearance="@style/TextAppearance.AppCompat.Small"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cover" />

    <ImageButton
        android:id="@+id/description_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        android:background="@null"
        android:contentDescription="@string/description_button"
        android:tint="@android:color/white"
        app:layout_constraintBottom_toTopOf="@+id/movie_title"
        app:layout_constraintEnd_toEndOf="@+id/movie_title"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@+id/left_guideline"
        app:srcCompat="@drawable/ic_baseline_sort_24" />

    <View
        android:id="@+id/view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/gray"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cover" />

    <View
        android:id="@+id/date_selector"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="16dp"
        android:background="@android:color/white"
        android:paddingLeft="@dimen/selector_side_padding"
        android:paddingEnd="@dimen/selector_side_padding"
        android:paddingRight="@dimen/selector_side_padding"
        app:layout_constraintBottom_toBottomOf="@+id/day_1"
        app:layout_constraintEnd_toEndOf="@+id/day_3"
        app:layout_constraintStart_toStartOf="@+id/day_3"
        app:layout_constraintTop_toBottomOf="@+id/movie_info" />

    <View
        android:id="@+id/black_bar"
        android:layout_width="0dp"
        android:layout_height="4dp"
        android:background="@android:color/black"
        app:layout_constraintEnd_toEndOf="@+id/date_selector"
        app:layout_constraintStart_toStartOf="@+id/date_selector"
        app:layout_constraintTop_toTopOf="@+id/date_selector" />

    <TextView
        android:id="@+id/date_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:fontFamily="@font/poppins_semibold"
        android:text="20"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        app:layout_constraintEnd_toEndOf="@+id/day_1"
        app:layout_constraintStart_toStartOf="@+id/day_1"
        app:layout_constraintTop_toBottomOf="@+id/movie_info"
        tools:text="20" />

    <TextView
        android:id="@+id/date_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/poppins_semibold"
        android:text="21"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        app:layout_constraintBottom_toBottomOf="@+id/date_1"
        app:layout_constraintEnd_toEndOf="@+id/day_2"
        app:layout_constraintHorizontal_bias="0.368"
        app:layout_constraintStart_toStartOf="@+id/day_2"
        app:layout_constraintTop_toTopOf="@+id/date_1"
        tools:text="21" />

    <TextView
        android:id="@+id/date_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/poppins_semibold"
        android:text="22"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        app:layout_constraintBottom_toBottomOf="@+id/date_2"
        app:layout_constraintEnd_toEndOf="@+id/day_3"
        app:layout_constraintStart_toStartOf="@+id/day_3"
        app:layout_constraintTop_toTopOf="@+id/date_2"
        tools:text="22" />

    <TextView
        android:id="@+id/date_4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/poppins_semibold"
        android:text="23"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        app:layout_constraintBottom_toBottomOf="@+id/date_3"
        app:layout_constraintEnd_toEndOf="@+id/day_4"
        app:layout_constraintStart_toStartOf="@+id/day_4"
        app:layout_constraintTop_toTopOf="@+id/date_3"
        tools:text="23" />

    <TextView
        android:id="@+id/date_5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/poppins_semibold"
        android:text="24"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        app:layout_constraintBottom_toBottomOf="@+id/date_4"
        app:layout_constraintEnd_toEndOf="@+id/day_5"
        app:layout_constraintStart_toStartOf="@+id/day_5"
        app:layout_constraintTop_toTopOf="@+id/date_4"
        tools:text="24" />

    <TextView
        android:id="@+id/date_6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/poppins_semibold"
        android:text="25"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        app:layout_constraintBottom_toBottomOf="@+id/date_5"
        app:layout_constraintEnd_toEndOf="@+id/day_6"
        app:layout_constraintStart_toStartOf="@+id/day_6"
        app:layout_constraintTop_toTopOf="@+id/date_5"
        tools:text="25" />

    <TextView
        android:id="@+id/date_7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/poppins_semibold"
        android:text="26"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        app:layout_constraintBottom_toBottomOf="@+id/date_6"
        app:layout_constraintEnd_toEndOf="@+id/day_7"
        app:layout_constraintStart_toStartOf="@+id/day_7"
        app:layout_constraintTop_toTopOf="@+id/date_6"
        tools:text="26" />

    <TextView
        android:id="@+id/day_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="@string/sunday"
        app:layout_constraintEnd_toStartOf="@+id/day_2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/date_1" />

    <TextView
        android:id="@+id/day_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/tuesday"
        app:layout_constraintBottom_toBottomOf="@+id/day_2"
        app:layout_constraintEnd_toStartOf="@+id/day_4"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/day_2"
        app:layout_constraintTop_toTopOf="@+id/day_2" />

    <TextView
        android:id="@+id/day_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/monday"
        app:layout_constraintBottom_toBottomOf="@+id/day_1"
        app:layout_constraintEnd_toStartOf="@+id/day_3"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/day_1"
        app:layout_constraintTop_toTopOf="@+id/day_1" />

    <TextView
        android:id="@+id/day_4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/wednesday"
        app:layout_constraintBottom_toBottomOf="@+id/day_3"
        app:layout_constraintEnd_toStartOf="@+id/day_5"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/day_3"
        app:layout_constraintTop_toTopOf="@+id/day_3" />

    <TextView
        android:id="@+id/day_7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/saturday"
        app:layout_constraintBottom_toBottomOf="@+id/day_6"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/day_6"
        app:layout_constraintTop_toTopOf="@+id/day_6" />

    <TextView
        android:id="@+id/day_5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/thursday"
        app:layout_constraintBottom_toBottomOf="@+id/day_4"
        app:layout_constraintEnd_toStartOf="@+id/day_6"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/day_4"
        app:layout_constraintTop_toTopOf="@+id/day_4" />

    <TextView
        android:id="@+id/day_6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/friday"
        app:layout_constraintBottom_toBottomOf="@+id/day_5"
        app:layout_constraintEnd_toStartOf="@+id/day_7"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/day_5"
        app:layout_constraintTop_toTopOf="@+id/day_5" />

    <Button
        android:id="@+id/containedButton"
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_marginTop="16dp"
        android:background="@color/brick_red"
        android:fontFamily="@font/poppins"
        android:text="@string/book_button"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:textColor="@android:color/white"
        app:icon="@drawable/ic_baseline_sort_24"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="parent" />

    <TextView
        android:id="@+id/movie_theater_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/poppins_medium"
        android:text="@string/movie_theater_name"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        app:layout_constraintBottom_toTopOf="@+id/movie_theater_distance"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/date_selector"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:id="@+id/movie_theater_distance"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="2dp"
        android:layout_marginTop="2dp"
        android:fontFamily="@font/poppins"
        android:text="@string/theater_distance"
        android:textAppearance="@style/TextAppearance.AppCompat.Small"
        app:layout_constraintBottom_toTopOf="@+id/containedButton"
        app:layout_constraintEnd_toEndOf="@+id/movie_theater_name"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@+id/movie_theater_name"
        app:layout_constraintTop_toBottomOf="@+id/movie_theater_name" />

</androidx.constraintlayout.widget.ConstraintLayout>

(c). activity_main.xml

Our activity_main layout.

This layout will represent our Main Activity's layout. Specify layout as it's root element, then add the following widgets:

1. ConstraintLayout
2. ImageView
3. ImageButton
4. Guideline
5. Button
6. TextView
7. Barrier
8. View

<?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"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/root"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white">

        <ImageView
            android:id="@+id/cover"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="36dp"
            android:layout_marginEnd="16dp"
            android:contentDescription="@string/cover_image"
            android:scaleType="centerCrop"
            app:layout_constraintDimensionRatio="2:3"
            app:layout_constraintEnd_toStartOf="@+id/right_guideline"
            app:layout_constraintStart_toStartOf="@+id/left_guideline"
            app:layout_constraintTop_toBottomOf="@+id/status"
            app:srcCompat="@drawable/red_sparrow" />

        <ImageButton
            android:id="@+id/menu_button"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:background="@null"
            android:contentDescription="@string/menu_button"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/ic_scatter" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/left_guideline"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.15" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/right_guideline"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.85" />

        <ImageView
            android:id="@+id/cast_one"
            android:layout_width="50dp"
            android:layout_height="0dp"
            android:layout_marginStart="16dp"
            android:contentDescription="@string/cast_1"
            android:scaleType="centerCrop"
            app:layout_constraintBottom_toBottomOf="@+id/cover"
            app:layout_constraintDimensionRatio="w,1:1"
            app:layout_constraintEnd_toStartOf="@+id/cast_three"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/cover"
            app:srcCompat="@drawable/cast_1" />

        <ImageView
            android:id="@+id/cast_two"
            android:layout_width="50dp"
            android:layout_height="0dp"
            android:contentDescription="@string/cast_2"
            android:scaleType="centerCrop"
            app:layout_constraintBottom_toBottomOf="@+id/cover"
            app:layout_constraintDimensionRatio="h,1:1"
            app:layout_constraintEnd_toStartOf="@+id/button"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/cast_three"
            app:layout_constraintTop_toTopOf="@+id/cover"
            app:srcCompat="@drawable/cast_3" />

        <ImageView
            android:id="@+id/cast_three"
            android:layout_width="50dp"
            android:layout_height="0dp"
            android:contentDescription="@string/cast_3"
            android:scaleType="centerCrop"
            app:layout_constraintBottom_toBottomOf="@+id/cover"
            app:layout_constraintDimensionRatio="w,1:1"
            app:layout_constraintEnd_toStartOf="@+id/cast_two"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/cast_one"
            app:layout_constraintTop_toTopOf="@+id/cover"
            app:srcCompat="@drawable/cast_2" />

        <Button
            android:id="@+id/button"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:background="@color/gray"
            android:text="@string/more_casts"
            app:layout_constraintBottom_toBottomOf="@+id/cover"
            app:layout_constraintDimensionRatio="w,1:1"
            app:layout_constraintStart_toEndOf="@+id/cast_two"
            app:layout_constraintTop_toTopOf="@+id/cover" />

        <TextView
            android:id="@+id/movie_info"
            android:layout_width="335dp"
            android:layout_height="104dp"
            android:layout_marginTop="16dp"
            android:fontFamily="@font/poppins"
            android:text="@string/movie_info"
            android:textAppearance="@style/TextAppearance.AppCompat.Small"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/date_4" />

        <TextView
            android:id="@+id/cast"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:fontFamily="@font/poppins_semibold"
            android:text="@string/cast"
            android:textAppearance="@style/TextAppearance.AppCompat.Small"
            app:layout_constraintBottom_toTopOf="@+id/cast_one"
            app:layout_constraintStart_toEndOf="parent" />

        <TextView
            android:id="@+id/movie_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="24dp"
            android:fontFamily="@font/poppins_semibold"
            android:text="@string/movie_title"
            android:textAppearance="@style/TextAppearance.AppCompat.Large"
            app:layout_constraintBottom_toTopOf="@+id/desc"
            app:layout_constraintStart_toStartOf="@+id/left_guideline"
            app:layout_constraintTop_toBottomOf="@+id/cover"
            app:layout_constraintVertical_chainStyle="packed" />

        <TextView
            android:id="@+id/desc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginBottom="16dp"
            android:fontFamily="@font/poppins"
            android:text="@string/movie_desc"
            app:layout_constraintBottom_toTopOf="@+id/rating"
            app:layout_constraintStart_toStartOf="@+id/left_guideline"
            app:layout_constraintTop_toBottomOf="@+id/movie_title" />

        <TextView
            android:id="@+id/rating"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginBottom="16dp"
            android:fontFamily="@font/poppins_medium"
            android:text="@string/movie_rating"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="@+id/left_guideline"
            app:layout_constraintTop_toBottomOf="@+id/desc" />

        <TextView
            android:id="@+id/status"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="8dp"
            android:fontFamily="@font/poppins_semibold"
            android:src="@drawable/transition"
            android:text="@string/movie_status"
            android:textAppearance="@style/TextAppearance.AppCompat.Large"
            app:layout_constraintStart_toStartOf="@+id/left_guideline"
            app:layout_constraintTop_toBottomOf="@+id/menu_button" />

        <androidx.constraintlayout.widget.Barrier
            android:id="@+id/barrier"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="bottom"
            app:constraint_referenced_ids="cover,cast_two,cast_one,button,cast_three" />

        <ImageButton
            android:id="@+id/description_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:tint="@android:color/black"
            app:layout_constraintBottom_toTopOf="@+id/desc"
            app:layout_constraintEnd_toEndOf="@+id/cover"
            app:layout_constraintTop_toTopOf="@+id/movie_title"
            app:srcCompat="@drawable/ic_baseline_sort_24" />

        <View
            android:id="@+id/view"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginTop="16dp"
            android:background="@color/gray"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="parent" />

        <View
            android:id="@+id/date_selector"
            android:layout_width="0dp"
            android:layout_height="2dp"
            android:layout_marginTop="16dp"
            android:background="@android:color/white"
            android:paddingLeft="@dimen/selector_side_padding"
            android:paddingEnd="@dimen/selector_side_padding"
            android:paddingRight="@dimen/selector_side_padding"
            app:layout_constraintBottom_toBottomOf="@+id/day_1"
            app:layout_constraintEnd_toEndOf="@+id/day_1"
            app:layout_constraintStart_toStartOf="@+id/day_1"
            app:layout_constraintTop_toBottomOf="@+id/movie_info" />

        <View
            android:id="@+id/black_bar"
            android:layout_width="0dp"
            android:layout_height="4dp"
            android:background="@android:color/black"
            app:layout_constraintEnd_toEndOf="@+id/date_selector"
            app:layout_constraintStart_toStartOf="@+id/date_selector"
            app:layout_constraintTop_toTopOf="@+id/date_selector" />

        <TextView
            android:id="@+id/date_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/poppins_semibold"
            android:text="20"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
            app:layout_constraintEnd_toEndOf="@+id/day_1"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="@+id/day_1"
            app:layout_constraintTop_toBottomOf="parent"
            tools:text="20" />

        <TextView
            android:id="@+id/date_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/poppins_semibold"
            android:text="21"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
            app:layout_constraintBottom_toBottomOf="@+id/date_1"
            app:layout_constraintEnd_toEndOf="@+id/day_2"
            app:layout_constraintHorizontal_bias="0.368"
            app:layout_constraintStart_toStartOf="@+id/day_2"
            app:layout_constraintTop_toTopOf="@+id/date_1"
            tools:text="21" />

        <TextView
            android:id="@+id/date_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/poppins_semibold"
            android:text="22"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
            app:layout_constraintBottom_toBottomOf="@+id/date_2"
            app:layout_constraintEnd_toEndOf="@+id/day_3"
            app:layout_constraintStart_toStartOf="@+id/day_3"
            app:layout_constraintTop_toTopOf="@+id/date_2"
            tools:text="22" />

        <TextView
            android:id="@+id/date_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/poppins_semibold"
            android:text="23"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
            app:layout_constraintBottom_toBottomOf="@+id/date_3"
            app:layout_constraintEnd_toEndOf="@+id/day_4"
            app:layout_constraintStart_toStartOf="@+id/day_4"
            app:layout_constraintTop_toTopOf="@+id/date_3"
            tools:text="23" />

        <TextView
            android:id="@+id/date_5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/poppins_semibold"
            android:text="24"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
            app:layout_constraintBottom_toBottomOf="@+id/date_4"
            app:layout_constraintEnd_toEndOf="@+id/day_5"
            app:layout_constraintStart_toStartOf="@+id/day_5"
            app:layout_constraintTop_toTopOf="@+id/date_4"
            tools:text="24" />

        <TextView
            android:id="@+id/date_6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/poppins_semibold"
            android:text="25"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
            app:layout_constraintBottom_toBottomOf="@+id/date_5"
            app:layout_constraintEnd_toEndOf="@+id/day_6"
            app:layout_constraintStart_toStartOf="@+id/day_6"
            app:layout_constraintTop_toTopOf="@+id/date_5"
            tools:text="25" />

        <TextView
            android:id="@+id/date_7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/poppins_semibold"
            android:text="26"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
            app:layout_constraintBottom_toBottomOf="@+id/date_6"
            app:layout_constraintEnd_toEndOf="@+id/day_7"
            app:layout_constraintStart_toStartOf="@+id/day_7"
            app:layout_constraintTop_toTopOf="@+id/date_6"
            tools:text="26" />

        <TextView
            android:id="@+id/day_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:paddingLeft="@dimen/selector_side_padding"
            android:paddingRight="@dimen/selector_side_padding"
            android:paddingBottom="@dimen/selector_bottom_padding"
            android:text="@string/sunday"
            app:layout_constraintEnd_toStartOf="@+id/day_2"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/date_1" />

        <TextView
            android:id="@+id/day_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="@dimen/selector_side_padding"
            android:paddingRight="@dimen/selector_side_padding"
            android:paddingBottom="@dimen/selector_bottom_padding"
            android:text="@string/tuesday"
            app:layout_constraintBottom_toBottomOf="@+id/day_2"
            app:layout_constraintEnd_toStartOf="@+id/day_4"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/day_2"
            app:layout_constraintTop_toTopOf="@+id/day_2" />

        <TextView
            android:id="@+id/day_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="@dimen/selector_side_padding"
            android:paddingRight="@dimen/selector_side_padding"
            android:paddingBottom="@dimen/selector_bottom_padding"
            android:text="@string/monday"
            app:layout_constraintBottom_toBottomOf="@+id/day_1"
            app:layout_constraintEnd_toStartOf="@+id/day_3"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/day_1"
            app:layout_constraintTop_toTopOf="@+id/day_1" />

        <TextView
            android:id="@+id/day_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="@dimen/selector_side_padding"
            android:paddingRight="@dimen/selector_side_padding"
            android:paddingBottom="@dimen/selector_bottom_padding"
            android:text="@string/wednesday"
            app:layout_constraintBottom_toBottomOf="@+id/day_3"
            app:layout_constraintEnd_toStartOf="@+id/day_5"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/day_3"
            app:layout_constraintTop_toTopOf="@+id/day_3" />

        <TextView
            android:id="@+id/day_7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="@dimen/selector_side_padding"
            android:paddingRight="@dimen/selector_side_padding"
            android:paddingBottom="@dimen/selector_bottom_padding"
            android:text="@string/saturday"
            app:layout_constraintBottom_toBottomOf="@+id/day_6"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/day_6"
            app:layout_constraintTop_toTopOf="@+id/day_6" />

        <TextView
            android:id="@+id/day_5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="@dimen/selector_side_padding"
            android:paddingRight="@dimen/selector_side_padding"
            android:paddingBottom="@dimen/selector_bottom_padding"
            android:text="@string/thursday"
            app:layout_constraintBottom_toBottomOf="@+id/day_4"
            app:layout_constraintEnd_toStartOf="@+id/day_6"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/day_4"
            app:layout_constraintTop_toTopOf="@+id/day_4" />

        <TextView
            android:id="@+id/day_6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="@dimen/selector_side_padding"
            android:paddingRight="@dimen/selector_side_padding"
            android:paddingBottom="@dimen/selector_bottom_padding"
            android:text="@string/friday"
            app:layout_constraintBottom_toBottomOf="@+id/day_5"
            app:layout_constraintEnd_toStartOf="@+id/day_7"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/day_5"
            app:layout_constraintTop_toTopOf="@+id/day_5" />

        <Button
            android:id="@+id/containedButton"
            android:layout_width="0dp"
            android:layout_height="60dp"
            android:layout_marginTop="16dp"
            android:background="@color/brick_red"
            android:fontFamily="@font/poppins"
            android:text="@string/book_button"
            android:textAppearance="@style/TextAppearance.AppCompat.Large"
            android:textColor="@android:color/white"
            app:icon="@drawable/ic_baseline_sort_24"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="parent" />

        <TextView
            android:id="@+id/movie_theater_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/poppins_medium"
            android:text="@string/movie_theater_name"
            android:textAppearance="@style/TextAppearance.AppCompat.Large"
            app:layout_constraintBottom_toTopOf="@+id/movie_theater_distance"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/date_selector"
            app:layout_constraintVertical_chainStyle="packed" />

        <TextView
            android:id="@+id/movie_theater_distance"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="2dp"
            android:layout_marginTop="2dp"
            android:fontFamily="@font/poppins"
            android:text="@string/theater_distance"
            android:textAppearance="@style/TextAppearance.AppCompat.Small"
            app:layout_constraintBottom_toTopOf="@+id/containedButton"
            app:layout_constraintEnd_toEndOf="@+id/movie_theater_name"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="@+id/movie_theater_name"
            app:layout_constraintTop_toBottomOf="@+id/movie_theater_name" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

Step 5. Write Code

Finally we need to write our code as follows:

(a). MainActivity.kt

Our MainActivity class.

Create a Kotlin file named MainActivity.kt and add the necessary imports. Here are some of the imports we will be using:

1. TextView from the android.widget package.
2. AppCompatActivity from the androidx.appcompat.app package.
3. ConstraintSet from the androidx.constraintlayout.widget package.
4. TransitionManager from the androidx.transition package.
5. * from the kotlinx.android.synthetic.main.activity_main package.

Then extend the AppCompatActivity and add its contents as follows:

First override these callbacks:

1. onCreate(savedInstanceState: Bundle?).

Then we will be creating the following functions:

1. addConstraintSetAnimation().
2. selectDate(day: TextView, destinationConstraint: ConstraintSet).

(a). Our addConstraintSetAnimation() function

Write the addConstraintSetAnimation() function as follows:

    private fun addConstraintSetAnimation() {
        coverImage = cover
        menuButton = menu_button
        movieStatus = status
        movieTitle = movie_title
        movieDescription = desc
        movieRating = rating
        descriptionButton = description_button

        var isCoverView = false
        var isDescriptionView = false

        val initialConstraint = ConstraintSet()
        initialConstraint.clone(root)

        val coverConstraint = ConstraintSet()
        coverConstraint.clone(this, R.layout.cover_view)

        val descriptionConstraint = ConstraintSet()
        descriptionConstraint.clone(this, R.layout.description_view)

        val mapOfDays: Map<TextView, TextView> = mapOf(
            day_1 to date_1,
            day_2 to date_2,
            day_3 to date_3,
            day_4 to date_4,
            day_5 to date_5,
            day_6 to date_6,
            day_7 to date_7
        )

        val days: List<TextView> = listOf(day_1, day_2, day_3, day_4, day_5, day_6, day_7)

        for (day in days) {
            day.setOnClickListener { selectDate(it as TextView, descriptionConstraint) }
        }

        for (day in mapOfDays) {
            day.value.setOnClickListener { selectDate(day.key, descriptionConstraint) }
        }

        coverImage.setOnClickListener {
            if (!isCoverView) {
                TransitionManager.beginDelayedTransition(root)
                coverConstraint.applyTo(root)

                val anim = ValueAnimator()
                anim.setIntValues(Color.BLACK, Color.WHITE)
                anim.setEvaluator(ArgbEvaluator())
                anim.addUpdateListener {
                    menuButton.setColorFilter(it.animatedValue as Int)
                    movieStatus.setTextColor(it.animatedValue as Int)
                    movieTitle.setTextColor(it.animatedValue as Int)
                    movieDescription.setTextColor(it.animatedValue as Int)
                    movieRating.setTextColor(it.animatedValue as Int)
                    descriptionButton.setColorFilter(it.animatedValue as Int)
                }

                anim.duration = 300
                anim.start()
                isCoverView = true
                isDescriptionView = false
            }

        }

        menuButton.setOnClickListener {
            if (isCoverView) {
                TransitionManager.beginDelayedTransition(root)
                initialConstraint.applyTo(root)

                val anim = ValueAnimator()
                anim.setIntValues(Color.WHITE, Color.BLACK)
                anim.setEvaluator(ArgbEvaluator())
                anim.addUpdateListener {
                    menuButton.setColorFilter(it.animatedValue as Int)
                    movieStatus.setTextColor(it.animatedValue as Int)
                    movieTitle.setTextColor(it.animatedValue as Int)
                    movieDescription.setTextColor(it.animatedValue as Int)
                    movieRating.setTextColor(it.animatedValue as Int)
                    descriptionButton.setColorFilter(it.animatedValue as Int)
                }

                anim.duration = 300
                anim.start()
                isCoverView = false
                isDescriptionView = false
            } else if (isDescriptionView) {
                TransitionManager.beginDelayedTransition(root)
                initialConstraint.applyTo(root)

                isCoverView = false
                isDescriptionView = false
            }

        }

        descriptionButton.setOnClickListener {
            if (!isDescriptionView) {
                TransitionManager.beginDelayedTransition(root)
                descriptionConstraint.applyTo(root)

                if (isCoverView) {
                    val anim = ValueAnimator()
                    anim.setIntValues(Color.WHITE, Color.BLACK)
                    anim.setEvaluator(ArgbEvaluator())
                    anim.addUpdateListener {
                        menuButton.setColorFilter(it.animatedValue as Int)
                        movieStatus.setTextColor(it.animatedValue as Int)
                        movieTitle.setTextColor(it.animatedValue as Int)
                        movieDescription.setTextColor(it.animatedValue as Int)
                        movieRating.setTextColor(it.animatedValue as Int)
                        descriptionButton.setColorFilter(it.animatedValue as Int)
                    }

                    anim.duration = 300
                    anim.start()
                    isCoverView = false
                }

                isDescriptionView = true
            }
        }
    }

(b). Our selectDate() function

Write the selectDate() function as follows:

    private fun selectDate(day: TextView, destinationConstraint: ConstraintSet) {
        destinationConstraint.connect(
            date_selector.id,
            ConstraintSet.START,
            day.id,
            ConstraintSet.START
        )
        destinationConstraint.connect(
            date_selector.id,
            ConstraintSet.END,
            day.id,
            ConstraintSet.END
        )
        TransitionManager.beginDelayedTransition(root)
        destinationConstraint.applyTo(root)
    }

Here is the full code:

package replace_with_your_package_name

import android.animation.ArgbEvaluator
import android.animation.ValueAnimator
import android.graphics.Color
import android.os.Bundle
import android.view.View
import android.widget.ImageButton
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import androidx.constraintlayout.widget.ConstraintSet
import androidx.transition.TransitionManager
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    private lateinit var coverImage: View
    private lateinit var menuButton: ImageButton
    private lateinit var movieStatus: TextView
    private lateinit var movieTitle: TextView
    private lateinit var movieDescription: TextView
    private lateinit var movieRating: TextView
    private lateinit var descriptionButton: ImageButton

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        window.decorView.systemUiVisibility = (View.SYSTEM_UI_FLAG_FULLSCREEN)

        setContentView(R.layout.activity_main)

        addConstraintSetAnimation()
    }

    private fun addConstraintSetAnimation() {
        coverImage = cover
        menuButton = menu_button
        movieStatus = status
        movieTitle = movie_title
        movieDescription = desc
        movieRating = rating
        descriptionButton = description_button

        var isCoverView = false
        var isDescriptionView = false

        val initialConstraint = ConstraintSet()
        initialConstraint.clone(root)

        val coverConstraint = ConstraintSet()
        coverConstraint.clone(this, R.layout.cover_view)

        val descriptionConstraint = ConstraintSet()
        descriptionConstraint.clone(this, R.layout.description_view)

        val mapOfDays: Map<TextView, TextView> = mapOf(
            day_1 to date_1,
            day_2 to date_2,
            day_3 to date_3,
            day_4 to date_4,
            day_5 to date_5,
            day_6 to date_6,
            day_7 to date_7
        )

        val days: List<TextView> = listOf(day_1, day_2, day_3, day_4, day_5, day_6, day_7)

        for (day in days) {
            day.setOnClickListener { selectDate(it as TextView, descriptionConstraint) }
        }

        for (day in mapOfDays) {
            day.value.setOnClickListener { selectDate(day.key, descriptionConstraint) }
        }

        coverImage.setOnClickListener {
            if (!isCoverView) {
                TransitionManager.beginDelayedTransition(root)
                coverConstraint.applyTo(root)

                val anim = ValueAnimator()
                anim.setIntValues(Color.BLACK, Color.WHITE)
                anim.setEvaluator(ArgbEvaluator())
                anim.addUpdateListener {
                    menuButton.setColorFilter(it.animatedValue as Int)
                    movieStatus.setTextColor(it.animatedValue as Int)
                    movieTitle.setTextColor(it.animatedValue as Int)
                    movieDescription.setTextColor(it.animatedValue as Int)
                    movieRating.setTextColor(it.animatedValue as Int)
                    descriptionButton.setColorFilter(it.animatedValue as Int)
                }

                anim.duration = 300
                anim.start()
                isCoverView = true
                isDescriptionView = false
            }

        }

        menuButton.setOnClickListener {
            if (isCoverView) {
                TransitionManager.beginDelayedTransition(root)
                initialConstraint.applyTo(root)

                val anim = ValueAnimator()
                anim.setIntValues(Color.WHITE, Color.BLACK)
                anim.setEvaluator(ArgbEvaluator())
                anim.addUpdateListener {
                    menuButton.setColorFilter(it.animatedValue as Int)
                    movieStatus.setTextColor(it.animatedValue as Int)
                    movieTitle.setTextColor(it.animatedValue as Int)
                    movieDescription.setTextColor(it.animatedValue as Int)
                    movieRating.setTextColor(it.animatedValue as Int)
                    descriptionButton.setColorFilter(it.animatedValue as Int)
                }

                anim.duration = 300
                anim.start()
                isCoverView = false
                isDescriptionView = false
            } else if (isDescriptionView) {
                TransitionManager.beginDelayedTransition(root)
                initialConstraint.applyTo(root)

                isCoverView = false
                isDescriptionView = false
            }

        }

        descriptionButton.setOnClickListener {
            if (!isDescriptionView) {
                TransitionManager.beginDelayedTransition(root)
                descriptionConstraint.applyTo(root)

                if (isCoverView) {
                    val anim = ValueAnimator()
                    anim.setIntValues(Color.WHITE, Color.BLACK)
                    anim.setEvaluator(ArgbEvaluator())
                    anim.addUpdateListener {
                        menuButton.setColorFilter(it.animatedValue as Int)
                        movieStatus.setTextColor(it.animatedValue as Int)
                        movieTitle.setTextColor(it.animatedValue as Int)
                        movieDescription.setTextColor(it.animatedValue as Int)
                        movieRating.setTextColor(it.animatedValue as Int)
                        descriptionButton.setColorFilter(it.animatedValue as Int)
                    }

                    anim.duration = 300
                    anim.start()
                    isCoverView = false
                }

                isDescriptionView = true
            }
        }
    }

    private fun selectDate(day: TextView, destinationConstraint: ConstraintSet) {
        destinationConstraint.connect(
            date_selector.id,
            ConstraintSet.START,
            day.id,
            ConstraintSet.START
        )
        destinationConstraint.connect(
            date_selector.id,
            ConstraintSet.END,
            day.id,
            ConstraintSet.END
        )
        TransitionManager.beginDelayedTransition(root)
        destinationConstraint.applyTo(root)
    }
}

Reference

Below are the reference links:

No.	Link
1.	Download Full Code
2.	Read more here.
3.	Follow code author here.

---

More

Here are some more examples related to ConstraintLayout.