Constraint Layout Advantage and example in kotlin

Constraint Layout

The main advantage of ConstraintLayout is allows you to make large and complex layouts with a flat view hierarchy. No nested view groups like inside RelativeLayout or LinearLayout etc. You can make Responsive UI for android using ConstraintLayout and its more flexible compare to RelativeLayout.

Before start if your beginner then follow this tutorial – Build Your First Android App in Kotlin

Add ConstraintLayout to your project

Add the library as a dependency in the same build.gradle file: Then see in the toolbar or sync notification, click Sync Project with Gradle Files.

• Every view must have at least two constraints: one horizontal and one vertical.
• If a view has no constraints when you run your layout on a device, it is drawn at position [0,0] (the top-left corner).

dependencies {
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
}

Example 1: Here is a simple example of using ConstraintLayout

1.  For design support library your needed add dependency in build.gradle (Module: app)

dependencies {
    implementation 'com.android.support:design:26.1.0'
}

2.  Then add following code activity_login.xml layout file

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    tools:context="in.eyehunt.constraintlayout.LoginActivity">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/textInputLayout3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="32dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/textInputLayout4"
        app:layout_constraintTop_toTopOf="parent">

        <AutoCompleteTextView
            android:id="@+id/email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/prompt_email"
            android:inputType="textEmailAddress"
            android:maxLines="1"
            android:singleLine="true" />

    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/textInputLayout4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textInputLayout3">

        <EditText
            android:id="@+id/password"
            android:layout_width="382dp"
            android:layout_height="wrap_content"
            android:hint="@string/prompt_password"
            android:imeActionId="6"
            android:imeActionLabel="@string/action_sign_in_short"
            android:imeOptions="actionUnspecified"
            android:inputType="textPassword"
            android:maxLines="1"
            android:singleLine="true" />
    </android.support.design.widget.TextInputLayout>
    <Button
        android:id="@+id/email_sign_in_button"
        style="?android:textAppearanceSmall"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="56dp"
        android:text="@string/action_sign_in"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textInputLayout4" />

</android.support.constraint.ConstraintLayout>

3. Add code in LoginActivity.kt

package `in`.eyehunt.constraintlayout

import android.support.v7.app.AppCompatActivity
import android.os.Bundle

class LoginActivity : AppCompatActivity(){
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_login)

    }
}

4. Check all dependency build.gradle (Module: app) should have

apply plugin: 'com.android.application'

apply plugin: 'kotlin-android'

apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 26
    defaultConfig {
        applicationId "in.eyehunt.constraintlayout"
        minSdkVersion 15
        targetSdkVersion 26
        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-jre7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support:design:26.1.0'
    testImplementation 'junit:junit:4.12'
    implementation 'com.android.support.constraint:constraint-layout:1.1.0'
}

Run the project

Output Screen :

Note : This example (Project) is developed in Android Studio 3.0.1 ,tested on Android 7.1.1 ( Android Nougat), compile SDK version API 26: Android 8.0 (Oreo)

MinSdkVersion=”15″

TargetSdkVersion=”26″

Coding in Kotlin

Advantages :

• To make handling complex screen designs easier
• To improve the performance of complex layouts
• Drag and drop GUI builder

Bonus : for more about Constraint Layout  details check this tutorial : Differences between ConstraintLayout and RelativeLayout

Download source code Constraint Layout Advantage and example in kotlin

https://github.com/rkkanojia7/ConstraintLayout