loading... Loading...

Setting Relations in Relative Layout

1092

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

 

 

1. The Relative Layout

 

The Relative Layout positions elements in positions relative to the child or parent Views. For a detailed explanation on the Relative Layout, take a look at the following document: https://developer.android.com/guide/topics/ui/layout/relative

 

If we have a reference View A and a second View B as below:
Relative01

 

The image below is described as having B placed to the left of A. The corresponding code would be android:layout_toLeftOf=A.
Relative02

 

This image shows B above A. The corresponding code would be android:layout_above=A.
Relative03

 

And this image aligns B to the left of A. The corresponding code would be android:layout_alignLeft=A.
Relative04

 

If View A is a parent View containing a child View B, this image aligns B to the parent’s left. The corresponding code would be android:layout_alignParentLeft=True.
Relative05

 

This image centers B both vertically and horizontally relative to its parent. The corresponding code would be android:layout_centerParent=True.
Relative06

 

Relative Layouts require Relations between parent Layout and child View – or child Views. Cracker9 allows you to set these Relations easily without any coding whatsoever.

 

 

2. Setting Relations in Cracker9

 

STEP 01 >

Select the Views to set Relative, and drag them to the Design Panel.
Relative07

 

 

STEP 02 >

Set the Layout value to Relative in the Setting Panel on the right.
Relative08

 

 

STEP 03 >

Select the first child View. Once a View applicable for Relations is selected, it will be shown as above.
Relative09

 

Connection status will be indicated as below.
Relative10

 

 

STEP 04 >

Once selected, connect the left connection point to the left of the parent View.
Relative11

 

 

STEP 05 >

Connect the top to the parent’s top.
Relative12

 

 

STEP 06 >

Select the second child View, and connect its left to the right of the first child View.
Relative13

 

 

STEP 07 >

Connect the second child View’s top to the top of the parent View.
Relative14

 

 

STEP 08 >

Select the third child View, and connect its left to the left of the second child View.
Relative15

 

 

STEP 09 >

Connect the third child View’s top to the top of the parent View.
Relative16

 

 

STEP 10 >

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

 

 

STEP 11 >

You can check the connections of the individual Views by selecting them, or by viewing them in Settings Panel -> Relation.
Relative17

 

 

STEP 12 >

Select Generate Code in the Setting Panel.
Relative18

 

 

STEP 13 >

Check the generated code in the Code Result Panel.
Relative19

Setting Relations in Relative 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