As part of our ongoing tutorials on using Cracker9, today we will cover generating Constraint Layout code.
In our previous post on Linear Layouts, we mentioned that setting Weight is different in Linear and Constraint Layouts. Lets take a look at how we can use Weight in the Constraint Layout.
STEP 01 >
Drag the View from the View Panel to the Design Panel.
STEP 02 >
To set the Weight in the Constraint Layout, the child View (and not the parent View) must be selected. And instead of selecting all child Views, you can set Weight to a subset which are variable. You can select multiple child Views by holding down the Ctrl key while selecting the Views.
STEP 03 >
Select Weight_Horizontal from the top Toolbar.
STEP 04 >
While in Weight Edit Mode, click on the number box to change it to arrows, as shown here.
STEP 05 >
Select Save.
STEP 06 >
Check the Weight value under the Weight list in the Setting Panel on the right.
If you were to set Weight values in the Constraint Layout via code, you would typically set layout_width or layout_height to 0dp in the chain direction.
android:layout_width="0dp"or
android:layout_height="0dp"
You would then set the Weight, which would set the position based on the weight ratio.
app:layout_constraintVertical_weight="1"or
app:layout_constraintHorizontal_weight="1"
In Cracker9, you simply set the Weight; this will propogate the Weight value down the chain automatically.
The connections in orange indicate the chain. The gaps here are too small to show the connected chain – the image below has a much larger gap, and clearly shows the chained connection.
STEP 07 >
Select the Generate Code button in the Setting panel.
STEP 08 >
Check the generated code in the Code Result Panel.
Using Weight 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