Android ConstraintLayout and example in kotlin

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

Android ConstraintLayout and example in kotlin

Attributes of Android ConstraintLayout :

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

Relative positioning

ConstraintsLayout is allowing to position views relative to each other. 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
Android ConstraintLayout Relative positioning

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>

Margins

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

Centering positioning and bias

Android ConstraintLayout 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>

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
Android ConstraintLayout 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>

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
  • layout_constraintCircleRadius : the distance to the other widget center
  • layout_constraintCircleAngle : which angle the widget should be at (in degrees, from 0 to 360)
Android ConstraintLayout Circular positioning

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>

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.

Android ConstraintLayout ratio
<?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'
}

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

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>
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>
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)
    }
}
Step 4. Now  Run the application, in emulator or On you android device

Output screenshot Android Constraint Layout example :

Android ConstraintLayout and example in kotlin output tutorial

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 : 


2 thoughts on “Android ConstraintLayout and example in kotlin

  1. Hi,
    can you please explain the following statement “Its similar to RelativeLayout where views are relatively positioned in UI”.

    1. It’s similar to RelativeLayout means – when we positioning any UI component in the layout we passing with ID and position. Similarly, ConstraintLayout looking at the position of it with other component using id.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.