loading... Loading...

Using Linear Layout

1257

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

 

1. In Cracker9

 

STEP 01 >

Select the Views you wish to set layouts to from the View Panel on the left. You can Shift and drag the area you want, or Ctrl (or Cmd) click to select multiple Views.

 

 

STEP 02 >

Drag the selected Views to the Design Panel on the right.

 

 

STEP 03 >

Set the layout of the top most (parent) View to Linear Horizontal from the Setting Panel on the right (note that Constraint is the default Layout in Cracker).

There are 2 ways in which the Linear Layout aligns its child Views: Horizontal and Vertical. Since the samples in this post aligns child Views horizontally, set the value to Linear Horizontal.

 

 

STEP 04 >

The Gravity value defines where the components of the current View will be placed, whereas Layout_Gravity defines where within the parent View will the child Views be placed. Cracker9 allows you to set ‘android:gravity’ in the parent View, and ‘android:layout_gravity’ in the child Views.

Since Gravity is not essential for this sample, lets skip it.

 

 

STEP 05 >

Select Generate Code in the Setting Panel.

 

 

STEP 06 >

Check the generated code in the Code Result Panel.

 

 

2. In Android Studio

 

We’re almost done! Lets now take a look at how we can use the generated code in Android Studio.

 

STEP 01 >

Select Copy in the Code Result Panel

 

 

STEP 02 >

Paste the code (Ctrl + V) into Android Studio.

 

 

STEP 03 >

If you notice any code displayed in red, it is due to the corresponding resource files not being in the correct folders. Since Cracker9 generated drawable resource, lets create the drawable resource file in Android Studio.


Select Copy for draw1 in Cracker9.

 

 

STEP 04 >

Back in Android Studio, right click on Project Panel -> app -> res -> drawable, and create the drawable resource file as shown below.

 

 

STEP 05 >

Enter the XML file name. Note that this needs to be identical to the name generated by Cracker9.

 

STEP 06 >

Check that draw.xml was created successfully under the drawable folder.

 

 

STEP 07 >

Paste the code as before (Ctrl + V).

 

 

STEP 08 >

Color resources are even easier. Double click on color.xml which is already visible in the Project Panel, and copy and paste the code from Cracker9.

Linear15

 

If there are other code in Color, use your mouse to select and copy only the required code from Cracker9.

Linear16

 

 

STEP 09 >

Finally, lets add an Asset. Find the Asset Download button near the top in Cracker9, and download the Asset to a folder of your choice.

 

 

STEP 10 >

Select the Asset files for the desired resolution, and move them to the drawable folder of the project directory created by Android Studio.

 

 

STEP 11 >

You should be able to see the Asset resources in Android Studio.

 

We’ve covered how to make use of the Linear Layout, and use the generated code in Android Studio. You can use Cracker9 to easily generate other code, and use it in the same fashion that we have shown here.

Using Linear 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