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:
The image below is described as having B placed to the left of A. The corresponding code would be android:layout_toLeftOf=A.
This image shows B above A. The corresponding code would be android:layout_above=A.
And this image aligns B to the left of A. The corresponding code would be android:layout_alignLeft=A.
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.
This image centers B both vertically and horizontally relative to its parent. The corresponding code would be android:layout_centerParent=True.
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.
STEP 02 >
Set the Layout value to Relative in the Setting Panel on the right.
STEP 03 >
Select the first child View. Once a View applicable for Relations is selected, it will be shown as above.
Connection status will be indicated as below.
STEP 04 >
Once selected, connect the left connection point to the left of the parent View.
STEP 05 >
Connect the top to the parent’s top.
STEP 06 >
Select the second child View, and connect its left to the right of the first child View.
STEP 07 >
Connect the second child View’s top to the top of the parent View.
STEP 08 >
Select the third child View, and connect its left to the left of the second child View.
STEP 09 >
Connect the third child View’s top to the top of the parent View.
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.
STEP 12 >
Select Generate Code in the Setting Panel.
STEP 13 >
Check the generated code in the Code Result Panel.
Cracker9 aims to continue helping designers and developers concentrate on being creative.
For further information on Cracker9, please feel free to contact us directly: firstname.lastname@example.org