loading... Loading...

Setting Relations in Constraint Layout

1012

As part of our ongoing tutorials on using Cracker9, today we will cover generating code using the Constraint Layout.

 

 

1. The Constraint Layout

 

First introducted in 2016 at Google I/O, the Constraint Layout allows developers to use of the available interface in a variety of different ways. For a detailed explanation on the Constraint Layout, take a look at the following document: https://developer.android.com/reference/android/support/constraint/ConstraintLayout

 

 

2. Relations in Cracker9

 

Setting Relations is identical to our previous tutorial on Relative Layouts.

 

STEP 01 >

Select the target View from the View Panel and drag it to the Design Panel.
Constraint00

 

 

STEP 02 >

Select the first child View of the parent View, and connect its left connection point to the left of the parent.
Constraint01

 

 

STEP 03 >

Connect the child View’s top point to the top of the parent View.
Constraint02

 

 

STEP 04 >

Select the second child View, and connect its left point to the left of the first child View.
Constraint03

 

 

STEP 05 >

Connect the top of the second child View to the bottom of the first child View.
Constraint04

 

 

STEP 06 >

Select the third child View and connect it to the top of the parent View, and connect its bottom to the bottom of the parent View to Center it.
Constraint05
Constraint05

 

 

STEP 07 >

Connect the right of the third child View to the left of the fourth child View.
Constraint06

 

 

STEP 08 >

Select the fourth child View, and Center it by connecting its top and bottom to the parent View’s top and bottom, respectively.
Constraint07
Constraint07

 

 

STEP 09 >

Connect the right of the fourth child View to the right of the parent View.
Constraint08

 

 

STEP 10 >

With all the Views connected, you should see a screen similar to the one below.
Constraint09

 

 

STEP 11 >

Take a look at this video for a detailed step-by-step explanation.

 

 

STEP 12 >

The Constraint Layout also allows you to select the individual Views and check their connections in Setting Panel -> Relations. Note that the values here will be different to the Relative Layout.
Constraint11

 

 

STEP 13 >

Select Generate Code in the Setting Panel.
Constraint12

 

 

STEP 14 >

Check the generated code in the Code Result Panel.
Constraint13

Setting Relations in Constraint Layout

Cracker9 aims to continue helping designers and developers concentrate on being creative.
For further information on Cracker9, please feel free to contact us directly: hello@cracker9.io

 

Back to list
Login
Register
Send message