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.
STEP 02 >
Select the first child View of the parent View, and connect its left connection point to the left of the parent.
STEP 03 >
Connect the child View’s top point to the top of the parent View.
STEP 04 >
Select the second child View, and connect its left point to the left of the first child View.
STEP 05 >
Connect the top of the second child View to the bottom of the first child View.
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.
STEP 07 >
Connect the right of the third child View to the left of the fourth child View.
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.
STEP 09 >
Connect the right of the fourth child View to the right of the parent View.
STEP 10 >
With all the Views connected, you should see a screen similar to the one below.
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.
STEP 13 >
Select Generate Code in the Setting Panel.
STEP 14 >
Check the generated code in the Code Result Panel.
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