using layouts

7/31/2019 Using Layouts

1/20

A7, Stephanos Tower, Eachamukku, Kakkanadu,Kochi

Android Application Development Training Tutorial

For more info visit

http://www.zybotech.in
http://www.zybotech.in/http://www.zybotech.in/http://www.zybotech.in/


2/20


Using Layouts

A layout is a class that handles arranging the way its children appear on the screen. Anything that is a View can

be a child of a layout. All of the layouts inherit from ViewGroup.

The standard layouts are:

Table layout

Linear layout

Frame layout

Relative layout

Absolute layout

ScrollView

Absolute layout:Absolute layout is based on the simple idea of placing each control at an absolute position. You specify

the exact x and y co-ordinates on the screen for each control.

XML layout using AbsoluteLayout -:


3/20


android:layout_x="150px"

android:layout_y="150px"

android:width="100px"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>


4/20


Output of Absolute Layout:

Frame LayoutFrameLayout is designed to display a single item at a time. You can have multiple elements within a

FrameLayout but each element will be positioned based on the top left of the screen. Elements that overlap will

be displayed overlapping.

XML layout using FrameLayout-


5/20


android:layout_width="fill_parent"

android:gravity="center"/>


6/20


Output of FrameLayout:

Linear Layout:LinearLayout organizes elements along a single line. You specify whether that line is verticle or

horizontal using android: orientation.

Inside the tags and is the place where we put the widgets. As we see, this

code has some properties. Lets have a look at them:

android:layout_width Defines the width of the Layout. The values it can hold are:

fill_parent The layout fill al the parent width, if there is no parent, it will fill all the screen wrap_contentDepending on the content of the layout, the width will be fixed to it Xpx Where X is a number. You can determine the width of our layout in pixels

android:layout_height The same as the layout_width, but considering the Height of the layout

android:id This string is consider the identifier of the layout. When we have more than one layout or

widget, its interesting to have them identified.


7/20


android:orientation this is the parameter we were talking before. Here we can change the orientation of the

layout: horizontal or vertical.

All layouts that are we going to see next are similar to theLinearLayout. They only change in the way of

displaying the widgets.

XML layout using LinearLayout -:


8/20



9/20


Output of Linear Layout:

Relative LayoutRelativeLayout lays out elements based on their relationships with one another, and with the parent container.

This is arguably the most complicated layout, and we need several properties to actually get the layout we want.

Relative To Container:

These properties will layout elements relative to the parent container.

android:layout_alignParentBottomPlaces the bottom of the element on the bottom of the container android:layout_alignParentLeftPlaces the left of the element on the left side of the container android:layout_alignParentRightPlaces the right of the element on the right side of the container android:layout_alignParentTopPlaces the element at the top of the container android:layout_centerHorizontalCenters the element horizontally within its parent container android:layout_centerInParentCenters the element both horizontally and vertically within its

container

android:layout_centerVerticalCenters the element vertically within its parent container

Relative To Other Elements:


10/20


These properties allow you to layout elements relative to other elements on screen. The value for each of these

elements is the id of the element you are using to layout the new element. Each element that is used in this way

must have an ID defined using android:id=@+id/XXXXX where XXXXX is replaced with the desired id.

You use @id/XXXXX to reference an element by its id. One thing to remember is that referencing an

element before it has been declared will produce an error.

android:layout_abovePlaces the element above the specified element android:layout_belowPlaces the element below the specified element android:layout_toLeftOfPlaces the element to the left of the specified element android:layout_toRightOfPlaces the element to the right of the specified element

Alignment With Other Elements:

These properties allow you to specify how elements are aligned in relation to other elements.

android:layout_alignBaselineAligns baseline of the new element with the baseline of the specifiedelement

android:layout_alignBottomAligns the bottom of new element in with the bottom of the specifiedelement

android:layout_alignLeftAligns left edge of the new element with the left edge of the specifiedelement

android:layout_alignRightAligns right edge of the new element with the right edge of the specifiedelement

android:layout_alignTopPlaces top of the new element in alignment with the top of the specifiedelement

XML layout using Relative Layout-


11/20


android:id="@+id/lastName"

android:text="Last Name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@id/firstName"/>


12/20


Output of Relative Layout:

Table LayoutTableLayout organizes content into rows and columns. The rows are defined in the layout XML, and the

columns are determined automatically by Android. This is done by creating at least one column for each

element. So, for example, if you had a row with two elements and a row with five elements then you would

have a layout with two rows and five columns.

You can specify that an element should occupy more than one column using android:layout_span. This can

increase the total column count as well, so if we have a row with two elements and each element has

android:layout_span=3 then you will have at least six columns in your table.

By default, Android places each element in the first unused column in the row. You can, however, specify the

column an element should occupy using android:layout_column.

XML layout using Relative Layout-


13/20


android:layout_height="fill_parent"

xmlns:android="http://schemas.android.com/apk/res/android">


14/20



15/20


Output of TableLayout

ScrollViewA ScrollView is a special type ofFrameLayout in that it allows users to scroll through a list of views that

occupy more space than the physical display. The ScrollView can contain only one child view or ViewGroup,

which normally is a LinearLayout.

Note: Do not use a ListView together with the ScrollView. The ListView is designed for showing a list ofrelated information and is optimized for dealing with large lists.

The following main.xml content shows a ScrollView containing a LinearLayout, which in turn contains

some Button and EditText views:


16/20


android:layout_width="310px"

android:layout_height="wrap_content"

android:orientation="vertical"

>


17/20



18/20


Output of ScrollView:

Other Layouts parameters

To finish this article we will see some other Layouts parameters that can be used in some of the layouts showed

above. Some of this parameters are used in the widgets too.

android:gravity With this parameter specify the place of the object inside a bigger container. For example a

LinearLayout inside the screen. It can have some values:

-top Puts the object on the top of the container

-bottom Puts the object on the bottom of the container

-center Puts the object on the center of the container

-right Puts the object on the right of the container

-left Puts the object on the left of the container


19/20


android:background You can set the background of the layout, it can be a picture (drawable resource) or a

color, #FFFFFFFF

android:visibility With this parameter we can control the visibility of the layout. It can be

-visible visible on the screen

-invisible not visible but It takes account in the layout disposition.

-gone The same as if you didn't have use this layout.

Summary

Layouts are containers of elements in the User Interface. Every time we define a .xml file with a specific user

interface, we need to use this elements to hold hierarchy view tree. As I have wrote in other article, we can finddifferent layouts kinds, depending its properties and relationship with the elements its holds. Layouts can be

nested one inside other.

LinearLayout

In LinearLayouts we can add children in one direction. We can add them horizontally or vertically (depending

the property we have set on the LinearLayout). Inside the tags and is the

place where we put the widgets.

AbsoluteLayout

With this layout, we can put the widgets wherever we want, just with the coordinates. Considering that the

point (0,0) is in the top-left.

RelativeLayout

In theRelativeLayout, we set the place of the widgets in relation to others widgets or the parent. Here it is

important the android:id parameter.

For example. If we have a button in the middle of the screen, we can add other widget10px to the right of this

initial button.

TableLayout

We can set the position of the widgets in rows and columns. The TableLayoutholds TableRows elements. Each

of this TableRows can hold one or more columns.

FrameLayout

FrameLayout is designed to display a single item at a time. You can have multiple elements within a

FrameLayout but each element will be positioned based on the top left of the screen.


20/20

A7 Stephanos To er Eacham kk Kakkanad Kochi

ScrollView

A ScrollView is a special type of FrameLayout in that it allows users to scroll through a list of views that

occupy more space than the physical display. The ScrollView can contain only one child view or ViewGroup,

which normally is a LinearLayout.

using layouts

Documents