Learning Android in 30 Days. Tutorial 2 of 30: Layouts and widgets

Go back to tutorial 1

On the last tutorial, we made a basic setup for our project and now that we tested it and its running let's add more sparkles to our layouts.

Android uses XML resources or files named layouts for displaying graphic interfaces for the user and those files are stored under the res directory in your project.

Open the navigator with <Alt+1>

As we saw in the first tutorial, Android Studio created a layout with a sample text on it, open the layout named activity_home.xml and let's play around with the elements.

This is the preview of the layout.

All of the layouts have a root element which defines how the widgets will align and behave inside. Although there are many root layouts we will start focusing on 2 elements:

Relative Layout.

 

A relatively free layout. It allows to align widgets with a relation with others; for example, place a button above that other, align this text entry at the bottom of the layout and push it to the right or place this button always to the right of this other element.

LinearLayout.

The LinearLayout aligns every element inside a single line so there cannot be 2 elements in one line. In this layout you don't need to add the relative directions for an element as they are inserted as they are written in the XML code; one after one.

If you followed step by step the first tutorial you are much likely to have a RelativeLayout as the root element. Try to add a new Button from the palette at the left of the preview. Drag and drop it and see what happens.

Drag and drop from the pallete.

When you start dragging the element from the palette you can see the green lines indicating the relation it will have with the current layout. As you can see the button is being placed at the right of the text, with a margin of 77 pixels below it. When you release it, the preview will add the element and the code will be modified accordingly. Try adding as many elements as you want and see how the RelativeLayout behaves.

Notice the relation between the widgets.

One of the cons of this layout is that is hard to maintain when you need to make some changes. With the elements aligned, move just one and see how the relation affects the rest of the elements.

Hard to maintain layout.

By moving the button to the right, all of the elements that were dependent on its position also moved because the position is relative to that button.

The graphic editor will help you a lot because its as simple as drag and drop but there is another view that you must use to set a lot of additional properties in the layout. Open the text view by clicking on the Text tab at the bottom of the preview.

The XML code allows you to edit more properties.

The XML code defines every aspect of the layout. Every element you see in the graphic editor is defined in this code. As the tutorial continues you will learn more and more properties that can be tweaked to display color, size, and images but now let's take a look at how Android uses this code to create the layout.



The root element of this layout is a RelativeLayout. The properties layout_height and layout_width must be present in all elements; they define the size of the element and in this particular case is defined to match_parent which of course means to be the same size as their direct container. Since there is no container then we are talking about the screen size.

Another valid value for layout_height and layout_width is wrap_content which makes the element just big enough to wrap all of their elements inside it and no more. There is also a numeric to define the size for an element and its using a measure in dp like 30dp or 220dp. Those measures represent a pixel depending on the pixel density of the screen and should never be used to define the size of the root layout.

Another property to consider is the padding. When the element defines a padding it separates the border from the content; meaning that the given measure will separate any element from the border using the given distance in pixels. In this case, Android Studio is using a saved value defined under a specific folder to be more suitable for maintenance. We will talk about saving values in resources files in another tutorial but now you can try and replace the given parameter for a more explicit value like 20dp.

As you maybe already find out, every change made in the XML code will update the layout if its correct. Any wrong adjust will make unavailable the layout and it will not be usable in the app, in fact Android Studio will not run the app in such case.

Let's change now the RelativeLayout so it becomes a LinearLayout. Navigate to the element and replace the name of the XML property from LinearLayout to RelativeLayout.

The immediate change will take place and now you will see the widgets aligned one in each line. Android Studio now will highlight every property that was used by the relative layout to define the position of the widget.

We have made a mess in this tutorial so let's clean it. To erase elements from a layout you can erase the complete node in the XML code or you can go back to the Design tab again, select one and hit Delete.

Delete elements until we are left only with the TextView that says "Hello World". We will build our main layout in the next tutorial.

The bell rings.

We have been doing mess with the layout. Right now we are using a RelativeLayout that allow different elements inside to be aligned using relations between each other.

A LinearLayout will align the elements one in each line. I didn't menctioned but there are 2 kinds of LinearLayout; horizontal and vertical.

All of the elements must have a layout_height and layout_width declared, otherwise Android Studio wont run the app.

Finally, you can edit the layout in the graphic or in the code, both work the same way.

Thank you for reading.

Next Tutorial.