Tutorial details

Lesson 6. Layout types. Key differences and properties | App Code for Sale | Preview

Lesson 6. Layout types. Key differences and properties | Android Tutorial

How to manage different types of Layouts

Overview PAGE TOP

Positioning of View-elements on the screen depends on the ViewGroup (layout), inside which they are located. In this lesson we will observe main types of Layouts.

LinearLayout - displays View-elements as a single row (if it is Horizontal) or a single column (if it is Vertical). I used it in the previous lesson, when demonstrating usage of layout-files during screen orientation change.

TableLayout - displays elements in the form of a table, with rows and columns.

RelativeLayout - each element’s position is configured relatively to other elements.

AbsoluteLayout - each element is specified an absolute position on the screen in the coordinate system (x, y)

Lets observe these types

LinearLayout (LL) PAGE TOP

This type of a ViewGroup is set as default when creating new layout-files. It is really convenient and flexible enough to create screens of different complexity. LL has an Orientation property, which defines how will the child elements be positioned - in a vertical or horizontal line.

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 main.xml layout-file and place the following code inside:

<?xml version="1.0" encoding="utf-8"?>

Now we have a LinearLayout with vertical orientation as a root element.

Drag three buttons from the left to the root LinearLayout. They are positioned horizontally.


Now change Orientation property to horizontal for LL in Properties and save (CTRL+SHIFT+S) - buttons are positioned horizontally


A ViewGroup can be inserted into another ViewGroup. Let’s place two other LL into one. Delete all the elements from main.xml (three buttons) except of the root LL. Specify vertical orientation for the root LL and add two new horizontal LL inside it. They are located in the Layouts section in the list of elements on the left. Let me remind you, that you can drag and drop elements from the list not only to the screen, but also to the specific element in the Outline tab.

Add three buttons inside each horizontal LL. Now we have got two horizontals rows of buttons.


TableLayout (TL) PAGE TOP

TableLayout consists of rows TableRow (TR). And each TR contains View elements that form columns. So the number of Views in TR is a number of columns. But the number of columns in a table must be equal for all rows. That’s why, when different TRs have different numbers of View-elements (columns), the overall number of columns is defined by the TR with the maximum number. Let’s observe an example.

Create layout-file tlayout.xml with TableLayout as a root element.


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


Add a few more buttons to the first row. The number of columns now equals 4, as it is defined by the row with the maximum number of elements and it is the first row in our case. For the second and the third rows the third and the fourth columns are empty.


Add a TextView and a Button to the second row and make text in the added TextView empty. Do the same with the third row. We can see that these elements are now placed in the third and the fourth column. And because TextView is empty and not seen on the screen, it seems like the third column in the second and third rows is empty.


The width of the column is defined by the widest element in this column. Enter some text into one of the TextViews and we can see that it has made a column wider.


Now I will remove elements of the fourth column and build a screen like this. Try to do it on your own as an exercise.


TL can contain not only TRs, but also simple Views. For example, add Button just into the TL, not into TR and you will see how it stretches to the width of the whole table.

RelativeLayout (RL) PAGE TOP

In this type of Layout, each View-element can be positioned in a specific way relatively to the specified View-element.

Types of relationships:

1) to the left, right, above or below the specified element (layouttoLeftOf, layouttoRightOf, layoutabove, layoutbelow)

2) aligned by the left, right, top or bottom edge of the specified element (layoutalignLeft, layoutalignRight, layoutalignTop, layoutalignBottom)

3) aligned by the left, right, top or bottom edge of a parent (layoutalignParentLeft, layoutalignParentRight, layoutalignParentTop, layoutalignParentBottom)

4) centered vertically, centered horizontally, centered vertically and horizontally relative to its parent (layoutcenterVertical, layoutcenterHorizontal, layout_centerInParent)

More details are available in help.

Create rlayout.xml and copy and paste this xml-code:

<?xml version="1.0" encoding="utf-8"?>
 android:text="Type here:">

RelativeLayout is a the root element here.

We will get such a screen:


We are interested in xml-code. I will now shortly describe unknown attributes and their meanings:

android:layoutwidth="matchparent" android:layoutheight="wrapcontent" android:id="@+id/entry"

  • the android word in the name of each element is a namespace, I will omit it in the explanations.
  • id - the element ID,
  • layoutwidth (the width of the element) and layoutheight (the height of the element) can be specified in absolute values or can be the following: fillparent (maximum available width or height in the bounds of its parent) and wrapcontent (width of height is defined by the content of an element). Help states that there is also matchparent. It is the same as fillparent. For some reasons, developers of the system decided that matchparent name is more convenient and they will stop using fillparent soon. For now, it’s left for compatibility. So remember that matchparent = fillparent and we will be trying to use match_parent further. Later we will stop on this and analyze it in more detail.

Now let’s get back to our elements. In the example we can see a TextView, EditText, and two Buttons - OK and Cancel. Let’s look through the attributes we are interested in.

TextView android:id="@+id/label" - ID android:layoutwidth="matchparent" - occupies all the available width (even though, it’s not visible on the screen) android:layoutheight="wrapcontent" - height defined by the content it is not related to anything

EditText android:id="@+id/entry" - ID android:layoutwidth="matchparent" - occupies all the available width android:layoutheight="wrapcontent" - height defined by the content android:layout_below="@id/label" - located below the TextView (reference by ID)

ButtonOK android:id="@+id/ok" – ID android:layoutwidth="wrapcontent" - width defined by the content android:layoutheight="wrapcontent" – height defined by the content android:layoutbelow="@id/entry" - is located below EditText android:layoutalignParentRight="true" - is aligned by the right edge of the parent android:layoutmarginLeft="10dip" – has a margin on the left (for Button_Cancel not to be adjacent)

ButtonCancel android:layoutwidth="wrapcontent" - width defined by the content android:layoutheight="wrapcontent" – height defined by the content android:layouttoLeftOf="@id/ok" - located to the left of ButtonOK android:layoutalignTop="@id/ok" - aligned by the top edge of Button_OK

You can add some more elements and experiment with their locations.

Pay your attention, that a View element can have no ID (android:id). For example, it is not usually needed for a TextView, because most of the times they are static and we rarely refer to them in the application. EditText is different - we work with the text field content, and a Button - we need to process clicks and to know exactly which Button has been pressed. In the future, we will see one more reason to specify an ID for a View-element

AbsoluteLayout (AL) PAGE TOP

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

Create alayout.xml with AbsoluteLayout as a root element


Now try to add different elements by dragging them to the screen. They are not aligned as in LinearLayout or in TableLayout, but placed where you dragged them. So it is absolute positioning.


Open xml-code and note that for specifying coordinates layoutx and layouty properties are used

<?xml version="1.0" encoding="utf-8"?>

First you might think that this is the most convenient and intuitive method of placing elements on the screen - they are placed wherever you want at once. But this is only in the case when you develop for the screen with a specific resolution. If you look at such application on the other screen, all the elements will be shifted and their positioning will be different from what you have planned. That’s why it is not recommended to use this Layout. And it’s compatibility with future Android versions is not guaranteed.

There are lots of ViewGroup types, and we will master them one by one. But for now, these are enough.

In this lesson we have: - looked through main types of Layouts: LinearLayout, TableLayout, RelativeLayout, AbsoluteLayout

Reference PAGE TOP


0 Comments Leave a comment

Please login in order to leave a comment.

Newest first

to your Chupamobile Account.

The Easiest way to Launch your next App or Game.

Join Chupamobile and get instant access to thousands of ready made App and Game Templates.

Creating an account means you’re okay with Chupamobile’s Terms of Service and Privacy Policy.