Android ConstraintLayout is added in Android to overcome the issues of existing layout. Its provide a Flat view hierarchy , exactly no more nested views (inside RelativeLayout many layout or LinearLayout etc). Using ConstraintLayout will increase your android application performance. Its similar to RelativeLayout where views are relatively positioned in UI.

Attributes of Android ConstraintLayout :

Here are some attributes of constraint layout to make your app UI awesome.

Relative positioning

ConstraintsLayout is allowing to position view relatively to each others. You can give constrain Horizontal and vertical axis to a widget.

Horizontal Axis: left, right, start and end sides

Vertical Axis: top, bottom sides and text baseline

Here is app:layout_constraintStart_toEndOf="@+id/button2" Button start after Button.

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="84dp" android:layout_marginStart="84dp" android:text="Button" app:layout_constraintStart_toEndOf="@+id/button2" tools:layout_editor_absoluteY="16dp" tools:ignore="MissingConstraints" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" tools:layout_editor_absoluteX="16dp" tools:layout_editor_absoluteY="16dp" tools:ignore="MissingConstraints" /> </android.support.constraint.ConstraintLayout> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <? xml version = "1.0" encoding = "utf-8" ?> < android . support . constraint . ConstraintLayout xmlns : android = "http://schemas.android.com/apk/res/android" xmlns : app = "http://schemas.android.com/apk/res-auto" xmlns : tools = "http://schemas.android.com/tools" android : layout_width = "match_parent" android : layout_height = "match_parent" tools : context = ".MainActivity" > < Button android : id = "@+id/button" android : layout_width = "wrap_content" android : layout_height = "wrap_content" android : layout_marginLeft = "84dp" android : layout_marginStart = "84dp" android : text = "Button" app : layout_constraintStart_toEndOf = "@+id/button2" tools : layout_editor_absoluteY = "16dp" tools : ignore = "MissingConstraints" / > < Button android : id = "@+id/button2" android : layout_width = "wrap_content" android : layout_height = "wrap_content" android : text = "Button" tools : layout_editor_absoluteX = "16dp" tools : layout_editor_absoluteY = "16dp" tools : ignore = "MissingConstraints" / > < / android . support . constraint . ConstraintLayout >

Margins

You can set a margin Between a widget or parent layout , same as a others layouts. Margin can only be positive or equals to zero, and takes a Dimension .

Centering positioning and bias

Widget will be centered in the parent container if constraints pulling opposite the widget apart equally. See this example and apply similarly for vertical constraints.

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button 1" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" tools:ignore="MissingConstraints" /> </android.support.constraint.ConstraintLayout> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <? xml version = "1.0" encoding = "utf-8" ?> < android . support . constraint . ConstraintLayout xmlns : android = "http://schemas.android.com/apk/res/android" xmlns : app = "http://schemas.android.com/apk/res-auto" xmlns : tools = "http://schemas.android.com/tools" android : layout_width = "match_parent" android : layout_height = "match_parent" tools : context = ".MainActivity" > < Button android : id = "@+id/button1" android : layout_width = "wrap_content" android : layout_height = "wrap_content" android : text = "Button 1" app : layout_constraintEnd_toEndOf = "parent" app : layout_constraintStart_toStartOf = "parent" tools : ignore = "MissingConstraints" / > < / android . support . constraint . ConstraintLayout >

Bias

The default when encountering such opposite constraints is to center the widget; but you can tweak the positioning to favor one side over another using the bias attributes:

layout_constraintHorizontal_bias

layout_constraintVertical_bias

For example the following will make the left side with a 30% bias instead of the default 50%, such that the left side will be shorter, with the Button leaning more toward the left side

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button 1" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.3" app:layout_constraintStart_toStartOf="parent" tools:ignore="MissingConstraints" /> </android.support.constraint.ConstraintLayout> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <? xml version = "1.0" encoding = "utf-8" ?> < android . support . constraint . ConstraintLayout xmlns : android = "http://schemas.android.com/apk/res/android" xmlns : app = "http://schemas.android.com/apk/res-auto" xmlns : tools = "http://schemas.android.com/tools" android : layout_width = "match_parent" android : layout_height = "match_parent" tools : context = ".MainActivity" > < Button android : id = "@+id/button1" android : layout_width = "wrap_content" android : layout_height = "wrap_content" android : text = "Button 1" app : layout_constraintEnd_toEndOf = "parent" app : layout_constraintHorizontal_bias = "0.3" app : layout_constraintStart_toStartOf = "parent" tools : ignore = "MissingConstraints" / > < / android . support . constraint . ConstraintLayout >

Circular positioning (Added in 1.1)

You can constrain a widget center relative to another widget center, at an angle and a distance. This allows you to position a widget on a circle, the following attributes can be used:

layout_constraintCircle : references another widget id

: references another widget id layout_constraintCircleRadius : the distance to the other widget center

: the distance to the other widget center layout_constraintCircleAngle : which angle the widget should be at (in degrees, from 0 to 360)

In this example Button 2 with circle angle 45 and Button 3 is with circle angle 135 , relatively to Button 1.

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button 1" tools:ignore="MissingConstraints" tools:layout_editor_absoluteX="147dp" tools:layout_editor_absoluteY="66dp" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button 2" app:layout_constraintCircle="@+id/button1" app:layout_constraintCircleRadius="100dp" app:layout_constraintCircleAngle="45" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button 3" app:layout_constraintCircle="@+id/button1" app:layout_constraintCircleRadius="100dp" app:layout_constraintCircleAngle="135" /> </android.support.constraint.ConstraintLayout> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <? xml version = "1.0" encoding = "utf-8" ?> < android . support . constraint . ConstraintLayout xmlns : android = "http://schemas.android.com/apk/res/android" xmlns : app = "http://schemas.android.com/apk/res-auto" xmlns : tools = "http://schemas.android.com/tools" android : layout_width = "match_parent" android : layout_height = "match_parent" tools : context = ".MainActivity" > < Button android : id = "@+id/button1" android : layout_width = "wrap_content" android : layout_height = "wrap_content" android : text = "Button 1" tools : ignore = "MissingConstraints" tools : layout_editor_absoluteX = "147dp" tools : layout_editor_absoluteY = "66dp" / > < Button android : id = "@+id/button2" android : layout_width = "wrap_content" android : layout_height = "wrap_content" android : text = "Button 2" app : layout_constraintCircle = "@+id/button1" app : layout_constraintCircleRadius = "100dp" app : layout_constraintCircleAngle = "45" / > < Button android : id = "@+id/button3" android : layout_width = "wrap_content" android : layout_height = "wrap_content" android : text = "Button 3" app : layout_constraintCircle = "@+id/button1" app : layout_constraintCircleRadius = "100dp" app : layout_constraintCircleAngle = "135" / > < / android . support . constraint . ConstraintLayout >

Ratio

You can also define one dimension of a widget as a ratio of the other one. In order to do that, you need to have at least one constrained dimension be set to 0dp , and set the attribute layout_constraintDimensionRatio to a given ratio.

To constrain one specific side based on the dimensions of another, you can pre append W, ” or H, to constrain the width or height respectively.

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="0dp" android:text="Button 1" app:layout_constraintDimensionRatio="h,1:1" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" /> </android.support.constraint.ConstraintLayout> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <? xml version = "1.0" encoding = "utf-8" ?> < android . support . constraint . ConstraintLayout xmlns : android = "http://schemas.android.com/apk/res/android" xmlns : app = "http://schemas.android.com/apk/res-auto" xmlns : tools = "http://schemas.android.com/tools" android : layout_width = "match_parent" android : layout_height = "match_parent" tools : context = ".MainActivity" > < Button android : id = "@+id/button1" android : layout_width = "wrap_content" android : layout_height = "0dp" android : text = "Button 1" app : layout_constraintDimensionRatio = "h,1:1" app : layout_constraintEnd_toEndOf = "parent" app : layout_constraintStart_toStartOf = "parent" / > < / android . support . constraint . ConstraintLayout >

There is many more attribute and updating in google android doc , you can check this doc link: https://developer.android.com/reference/android/support/constraint/ConstraintLayout for more details.

Let’s Build a Complete Example of Android ConstraintLayout :

Step 1. Create new project “ Build Your First Android App in Kotlin

Step 2. 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.

dependencies { implementation 'com.android.support.constraint:constraint-layout:1.1.2' } 1 2 3 dependencies { implementation 'com.android.support.constraint:constraint-layout:1.1.2' }

Ensure you have the maven.google.com repository declared in your module-level build.gradle file:

repositories { google() } 1 2 3 repositories { google ( ) }

Step 3. Add String in res/values/strings.xml file

adding the email, password and login strings, its a recommend to define your string in resource values.

<resources> <string name="app_name">Android ConstraintLayout</string> <string name="email">Email</string> <string name="password">Password</string> <string name="login">Login</string> </resources> 1 2 3 4 5 6 < resources > < string name = "app_name" > Android ConstraintLayout < / string > < string name = "email" > Email < / string > < string name = "password" > Password < / string > < string name = "login" > Login < / string > < / resources >

Step 4. Add following code in activity_main.xml resource file

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="8dp" android:layout_marginStart="8dp" android:layout_marginTop="16dp" android:text="@string/email" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="8dp" android:layout_marginStart="8dp" android:layout_marginTop="36dp" android:text="@string/password" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/textView" /> <EditText android:id="@+id/editText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="8dp" android:layout_marginLeft="36dp" android:layout_marginRight="8dp" android:layout_marginStart="36dp" android:ems="10" android:hint="@string/email" android:inputType="textEmailAddress" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@+id/textView" app:layout_constraintTop_toTopOf="parent" /> <EditText android:id="@+id/editText2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="8dp" android:layout_marginLeft="12dp" android:layout_marginRight="8dp" android:layout_marginStart="12dp" android:layout_marginTop="8dp" android:ems="10" android:hint="@string/password" android:inputType="textPassword" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@+id/textView2" app:layout_constraintTop_toBottomOf="@+id/editText" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="8dp" android:layout_marginLeft="8dp" android:layout_marginRight="8dp" android:layout_marginStart="8dp" android:layout_marginTop="24dp" android:text="@string/login" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/editText2" /> </android.support.constraint.ConstraintLayout> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 <? xml version = "1.0" encoding = "utf-8" ?> < android . support . constraint . ConstraintLayout xmlns : android = "http://schemas.android.com/apk/res/android" xmlns : app = "http://schemas.android.com/apk/res-auto" xmlns : tools = "http://schemas.android.com/tools" android : layout_width = "match_parent" android : layout_height = "match_parent" tools : context = ".MainActivity" > < TextView android : id = "@+id/textView" android : layout_width = "wrap_content" android : layout_height = "wrap_content" android : layout_marginLeft = "8dp" android : layout_marginStart = "8dp" android : layout_marginTop = "16dp" android : text = "@string/email" app : layout_constraintStart_toStartOf = "parent" app : layout_constraintTop_toTopOf = "parent" / > < TextView android : id = "@+id/textView2" android : layout_width = "wrap_content" android : layout_height = "wrap_content" android : layout_marginLeft = "8dp" android : layout_marginStart = "8dp" android : layout_marginTop = "36dp" android : text = "@string/password" app : layout_constraintStart_toStartOf = "parent" app : layout_constraintTop_toBottomOf = "@+id/textView" / > < EditText android : id = "@+id/editText" android : layout_width = "wrap_content" android : layout_height = "wrap_content" android : layout_marginEnd = "8dp" android : layout_marginLeft = "36dp" android : layout_marginRight = "8dp" android : layout_marginStart = "36dp" android : ems = "10" android : hint = "@string/email" android : inputType = "textEmailAddress" app : layout_constraintEnd_toEndOf = "parent" app : layout_constraintStart_toEndOf = "@+id/textView" app : layout_constraintTop_toTopOf = "parent" / > < EditText android : id = "@+id/editText2" android : layout_width = "wrap_content" android : layout_height = "wrap_content" android : layout_marginEnd = "8dp" android : layout_marginLeft = "12dp" android : layout_marginRight = "8dp" android : layout_marginStart = "12dp" android : layout_marginTop = "8dp" android : ems = "10" android : hint = "@string/password" android : inputType = "textPassword" app : layout_constraintEnd_toEndOf = "parent" app : layout_constraintStart_toEndOf = "@+id/textView2" app : layout_constraintTop_toBottomOf = "@+id/editText" / > < Button android : id = "@+id/button" android : layout_width = "wrap_content" android : layout_height = "wrap_content" android : layout_marginEnd = "8dp" android : layout_marginLeft = "8dp" android : layout_marginRight = "8dp" android : layout_marginStart = "8dp" android : layout_marginTop = "24dp" android : text = "@string/login" app : layout_constraintEnd_toEndOf = "parent" app : layout_constraintStart_toStartOf = "parent" app : layout_constraintTop_toBottomOf = "@+id/editText2" / > < / android . support . constraint . ConstraintLayout >

Step 5. Open “MainActivity.kt” and setContentView resource layout

package `in`.eyehunt.androidconstraintlayout import android.support.v7.app.AppCompatActivity import android.os.Bundle class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) } } 1 2 3 4 5 6 7 8 9 10 11 12 package ` in ` . eyehunt . androidconstraintlayout import android . support . v7 . app . AppCompatActivity import android . os . Bundle class MainActivity : AppCompatActivity ( ) { override fun onCreate ( savedInstanceState : Bundle ? ) { super . onCreate ( savedInstanceState ) setContentView ( R . layout . activity_main ) } }

Step 4. Now Run the application, in emulator or On you android device

Output screenshot Android Constrain Layout example :

Download source code Android ConstraintLayout in kotlin

https://github.com/EyeHunts/AndroidConstraintLayout

Do comment if you have any doubt and suggestion on this tutorial.

Note: Android ConstraintLayout example (Project) is developed in Android Studio 3.1.3 . Tested on Android 9 ( Android-P), compile SDK version API 26: Android 8.0 (Oreo) MinSdkVersion=”15″ TargetSdkVersion=”27″ Coding in Kotlin

Bouns :

Must read Constrain Layout Advantage

Read most Hotest topic in 2018 – Differences between ConstraintLayout and RelativeLayout

Degree in Computer Science and Engineer: App Developer and has multiple Programming languages experience. Enthusiasm for technology & like learning technical.

Share this: Facebook

WhatsApp

LinkedIn

More

Twitter

Print



Reddit

Tumblr



Pinterest

Pocket



Telegram

Skype



Email

