loading... Loading...

Setting Center and Constraint Layout Bias for Android Views

3243

As part of our ongoing tutorials on using Cracker9, today we will cover generating code using the Center and Bias features.

As you may already know, Android Studio allows you to generate code using the Center property. Lets take a look at how we can generate Center code in Cracker9, and in what situations the Bias feature can be applied.

 

 

1. Center in Linear Layout

 

STEP 01 >

Drag the View from the View Panel to the Design Panel.

 

 

STEP 02 >

Select the parent View, and set the Layout value to Linear Layout in the Setting panel on the right (you can choose either Linear Horizontal or Linear Vertical).
Center_01

 

 

STEP 03 >

For an explanation on Gravity and Linear Layouts, first take a look at our previous post on the topic.

 

 

STEP 04 >

Choose the Gravity value by selecting the parent View and selecting the desired Gravity value value from the Setting panel.
Center_02

Center_03

The Center value will place child Views within the parent View to be centered both horizontally and vertically; the Center Horizontal value will only center them horizontally; and the Center Vertical value will only center them vertically.

 

 

STEP 05 >

You can select Gravity values for individual child Views as well, by selecting the View and setting the value in the Setting panel. If the parent View is Linear Layout Horizontal, the child View’s value will be restricted to Vertical (select Center Vertical); if the parent View is Linear Layout Vertical, the child View’s value will be restricted to Horizontal (select Center Horizontal).
Center_04Center_05

 

 

2. Center in Relative Layout

 

STEP 01 >

Drag the View from the View Panel into the Design Panel.

 

 

STEP 02 >

Select the parent View, and set Layout to Relative.

 

 

STEP 03 >

Select the child View.

 

 

STEP 04 >

Select Center -> Center Horizontal from the top Toolbar.
Center_06

 

 

STEP 05 >

Since you selected Center Horizontal, the left/right connection points will not be enabled.
Center_07

 

 

STEP 06 >

If you select Center Vertical, the child View will be centered vertically, with the top/bottom connection points disabled.
Center_08

 

 

3. Center in Constraint Layout

 

STEP 01 >

Select the parent View, and set Layout to Constraint.

 

 

STEP 02 >

Select the child View, and connect its left/right connection points to the parent View’s left/right connection points.
Center_09

 

 

STEP 03 >

This will apply the Center value. For Constaint Layouts, the Center button in the Toolbar will only be enabled after the connection points are connected for the View. For left/right connection points, the value will be Center_Horizontal; for top/bottom connection points, the value will be Center_Vertical. And similarly with the Relative Layout, the View’s position will be automatically updated.

 

 

STEP 04 >

Finally, the text View is also connected.
Center_10

 

 

4. Bias in Constraint Layout

 

STEP 01 >

Bias can only be set in the Constraint Layout. Center is set automically when a View is selected and its left/right connection points are connected. However, if Center is not what you were after, then you will need to change the Bias value.
Center_11

 

 

STEP 02 >

Select Bias from the Toolbar.
Center_12

Similar to Center, Bias will be set to Bias_Horizontal when the left/right points are connected, and Bias_Vertical when the top/bottom points are connected.

 

 

STEP 03 >

The View – which was set to Center – will be moved back to its original position, with its Bias value set accordingly.
Center_13

 

 

STEP 04 >

Select the Generate Code button in the Setting panel.
Center_14

 

 

STEP 05 >

Check the generated code in the Code Result Panel.
Center_15

Setting Center and Constraint Layout Bias for Android Views

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