Build a Responsive UI with ConstraintLayout

Google introduced ConstraintLayout, a new layout for Android at their I/O developer latest event

ConstraintLayout combines a simple, expressive and flexible layout system with the the powerful features built into the Android Studio Designer tool. It makes it easier to create responsive user interface layouts that adapt automatically to different screen sizes and changing device orientations.

The aim of the ConstraintLayout is to help reduce the number of nested views, which will improve the performance of our layout files. The layout class also makes it easier for us to define layouts than when using a RelativeLayout as we can now anchor any side of a view with any side of another, rather than having to place a whole view to any side of another.

Why did we need ConstraintLayout?

1. It make handling complex screen designs easier. It also improves the performance of complex layouts.
2. With ConstraintLayout, even complex screen designs with nested layouts can be fast.
3. ConstraintLayout provides a level of flexibility that allows many of the features of older layouts to be achieved with a single layout instance. Before, you needed to nest multiple layouts.
4. This has the benefit of avoiding many problems inherent in nesting layouts. It allowing to design so-called flat or shallow layout hierarchies. This leads to less complex layouts and improved user interface rendering performance at runtime.
5. ConstraintLayout is also implemented with an eye toward addressing the wide range of Android device screen sizes available on the market today.
6. The flexibility of ConstraintLayout makes it easier for user interfaces to be designed that respond and adapt to the device on which the app is running.

Setting up

Before we get started, there’s a few things you’ll need to do if you want to try out the new ConstraintLayout.

• To begin with, you’ll need to download Android Studio 2.2 preview from here.
• You’ll also need to add the dependancy for the ConstraintLayout from the support library:

compile 'com.android.support.constraint:constraint-layout:1.0.1'

For example, the attributes of a relative layout allow us to position a view using:

• layout_toRightOf
• layout_toLeftOf
• layout_toTopOf
• layout_toBottomOf

However, the ConstraintLayout features several more attributes:

• layout_constraintTop_toTopOf — Align the top of the desired view to the top of another.
• layout_constraintTop_toBottomOf — Align the top of the desired view to the bottom of another.
• layout_constraintBottom_toTopOf — Align the bottom of the desired view to the top of another.
• layout_constraintBottom_toBottomOf — Align the bottom of the desired view to the bottom of another.
• layout_constraintLeft_toTopOf — Align the left of the desired view to the top of another.
• layout_constraintLeft_toBottomOf — Align the left of the desired view to the bottom of another.
• layout_constraintLeft_toLeftOf — Align the left of the desired view to the left of another.
• layout_constraintLeft_toRightOf — Align the left of the desired view to the right of another.
• layout_constraintRight_toTopOf — Align the right of the desired view to the top of another.
• layout_constraintRight_toBottomOf — Align the right of the desired view to the bottom of another.
• layout_constraintRight_toLeftOf — Align the right of the desired view to the left of another.
• layout_constraintRight_toRightOf — Align the right of the desired view to the right of another.
• If desired, attributes supporting start and end are also available in place of left and right alignment.

More Constraint Layout example from here.

Special thanks for Exploring android.

Thanks for reading this article.