Lesson 6. Types of Layouts. Key differences and properties.

Lesson 6. Types of Layouts. Key differences and properties.


The location of the View items on the screen depends on ViewGroup (Layout) in which they are. In this lesson, we will cover the main types Layout.

LinearLayout – Displays View items as a single row (if Horizontal) or a single column (if it is Vertical) I used this in the past lesson when demonstrating the use of layout files when changing orientation.

TableLayout – Displays table, row and column items.

RelativeLayout – for each element, its position relative to the other elements is adjusted.

AbsoluteLayout – for each element, an explicit position on the screen in the coordinate system (x, y) is indicated

Consider these types

LinearLayout (LL)

This kind of ViewGroup is offered by default when creating new layout files. It is really comfortable and flexible enough to create screens of varying complexity. LL has an Orientation property that determines how the child elements will be positioned – horizontal or vertical.

Let’s make a simple and clear example.

Create a project:

Project name: P0061_Layouts
Build Target: Android 2.3.3
Application name: Layouts
Package name: ru.startandroid.develop.layouts
Create Activity: MainActivity

Open the layout file main.xml, And put the following code in it:



Now the root element we have is LinearLayout with vertical orientation.

Drag the left button in the LinearLayout root three buttons. They were lined up vertically.

Now in Properties we change the property for LL Orientation on horizontal and save (CTRL + SHIFT + S) – the buttons are lined up horizontally.

GroupView can be invested in each other. We will put two others in one LL. Delete all items (three buttons) in main.xml except the root LL. Specify the root LL orientation vertically and add two new horizontal LLs to it. In the list of items on the left, they are in the Layouts section. I remind you that you can drag items from the list not only to the screen, but also to a specific item in the Outline tab.

Add three buttons to each horizontal LL. There are two horizontal row of buttons. Make sure that in horizontal LinearLayout, height is set to wrap_content.

TableLayout (TL)

TL consists of strings TableRow (TR). Each TR, in turn, contains View-elements that form columns. That is, the View count in TR is the number of columns. But the number of columns in the table must be equal for all rows. Therefore, if different TRs have different number of View elements (columns), then the total number is determined by TR with the maximum number. Consider the example.

Let’s create a layout file tlayout.xml. with the TableLayout root element

Add three TableRow rows (from the Layouts section on the left) in the TableLayout root and add two buttons to each row. The result: our table has three rows and two columns.

Add a couple more buttons to the first line. The number of columns for all rows is now 4 because it is determined by the row with the maximum number of elements, that is, the first row. For the second and third rows, the third and fourth columns are simply blank.

In the second line we add TextView and Button, and we will make the text in the added TextView blank. In the third line, do the same. We see that these elements fit into the third and fourth columns. And so TextView we have no text and the screen is not visible, it seems that the third column in the second and third row is empty.

The width of a column is determined by the widest element from that column. Let’s enter the text into one of the TextView and see that it has expanded the column.

I will remove the elements of the fourth column and build such a screen. Try to do the same as exercise.

TL can contain not only TR but also normal View. For example, add Button directly to TL, not TR, and you’ll see that it stretches the width of the entire table.

RelativeLayout (RL)

In this Layout view, each View element can be positioned in a certain way relative to the specified View element.

Types of relationships:

1) left, right, top, bottom of the specified element (layout_toLeftOf, layout_toRightOf, layout_above, layout_below)

2) aligned on the left, right, top, bottom edge of the specified element (layout_alignLeft, layout_alignRight, layout_alignTop, layout_alignBottom)

3) is aligned on the left, right, top, bottom edge of the parent (layout_alignParentLeft, layout_alignParentRight, layout_alignParentTop, layout_alignParentBottom)

4) aligned centered vertically, centered horizontally, centered vertically, and horizontally relative to the parent (layout_centerVertical, layout_centerHorizontal, layout_centerInParent)

You can read in detail in help.

let’s create rlayout.xml and copy the following xml code there:



    
    
    
    
    
    

Here we have the root element – RelativeLayout.

The following screen was displayed:

We are interested in xml code. I will briefly describe unfamiliar attributes and their meanings:

android: layout_width=“Match_parent”
android: layout_height=“Wrap_content”
android: id=“@ + Id / entry”

– word android in the name of each attribute is namespace, I will omit it for explanations.
– id is the element ID,
– layout_width (Element width) and layout_height (Element Height) can be specified in absolute values, and can be as follows: fill_parent (The maximum width or height possible within one parent) and wrap_content (Width or height is determined by the content of the element). The help indicates that there is more match_parent. This is the same as fill_parent. For some reason, the developers of the system decided that the name match_parent is more convenient and will gradually abandon fill_parent. In the meantime, it was left for compatibility. So remember that match_parent = fill_parent and in the future we will try to use match_parent. We will dwell on this later and explore in more detail.

Now back to our elements. In the example we see TextView, EditText and two Button – OK and Cancel. Let’s take a closer look at the attributes we are interested in.

TextView
android: id=“@ + Id / label” – ID
android: layout_width=“Match_parent” – occupies all the width available to it (though it is not visible on the screen);
android: layout_height=“Wrap_content” – height in content;
does not belong to anything

EditText
android: id=“@ + Id / entry” – ID
android: layout_width=“Match_parent” – all width available to him
android: layout_height=“Wrap_content” – height in content
android: layout_below=“@ + Id / label” – located lower TextView (ID link)

Button_OK
android: id=“@ + Id / ok” – ID
android: layout_width=“Wrap_content” – width in content
android: layout_height=“Wrap_content” – height in content
android: layout_below=“@ + Id / entry” – located below EditText
android: layout_alignParentRight=“True”aligned to the right edge of the parent
android: layout_marginLeft=“10dip” – has an indent on the left (so that Button_Cancel is not tight)

Button_Cancel
android: layout_width=“Wrap_content” – width in content
android: layout_height=“Wrap_content” – height in content
android: layout_toLeftOf=“@ + Id / ok” – located left by Button_OK
android: layout_alignTop=“@ + Id / ok”aligned on the top edge Button_OK

You can add elements and experiment with their placement.

Note that the View item may not have an ID (android: id). For example, TextView is not usually needed because they are mostly static and we almost never access them when running the program. Another thing is EditText – we work with the contents of the text box, and Button – we need to handle the click and accordingly know which button is pressed. In the future, we will see another need to specify an ID for the View element.

AbsoluteLayout (AL)

Provides absolute positioning of elements on the screen. You specify the coordinates for the upper left corner of the component.

let’s create alayout.xml with the AbsoluteLayout root

Now try dragging different elements to the screen. They don’t line up like LinearLayout or TableLayout, but lie where you dragged them. That is absolute positioning.

We open the xml code and see that they are used to specify the coordinates layout_x and layout_y.



    
    
    
    
    
    
    

At first, it seems to be the most convenient and intuitive way to position the elements on the screen – they are immediately located where you need them. But this is only when you are designing for a screen with a specific resolution. If you open the application on another screen, all the items will move and it will not work out as you planned. Therefore, this Layout is not recommended for use. And its compatibility with future versions of Android is not guaranteed.

There are many more species of ViewGroup, and we will gradually master them. Until we have enough of these.

In this lesson we:

Considered the main types of Layout: LinearLayout, TableLayout, RelativeLayout, AbsoluteLayout

In the next lesson:

Let’s take a look at some of the Layout properties of View items that allow you to customize their layout in ViewGroup.




Discuss in the forum [98 replies]

Leave a Comment