loading... Loading...

Using Weight in Constraint Layout

4212

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.
Constraint_W01

 

 

STEP 03 >

Select Weight_Horizontal from the top Toolbar.
Constraint_W02

 

 

STEP 04 >

While in Weight Edit Mode, click on the number box to change it to arrows, as shown here.
Constraint_W03

 

 

STEP 05 >

Select Save.

 

 

STEP 06 >

Check the Weight value under the Weight list in the Setting Panel on the right.
Constraint_W04

 

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.
Constraint_W05

 

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.
Constraint_W06

 

 

STEP 07 >

Select the Generate Code button in the Setting panel.
Constraint_W07

 

 

STEP 08 >

Check the generated code in the Code Result Panel.
Constraint_W08

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

 

Back to list
Login
Register
Send message