Android ConstraintLayout and example in kotlin

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.

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

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

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

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.

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

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.

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

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.

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

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.

Step 4. Add following code in activity_main.xml resource file
Step 5. Open MainActivity.kt” and setContentView resource layout 
Step 4. Now  Run the application, in emulator or On you android device

Output screenshot Android Constrain 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.