Android Basic XML Layouts

(1)

Android

Basic XML Layouts

Victor Matos

Cleveland State University

Notes are based on:

The Busy Coder's Guide to Android Development by Mark L. Murphy

&

Android Developers

(2)

2 2

Designing Complex Uis

• Arguably, LinearLayout is the most common modeling tool. It

offers a "box" model similar to the Java-Swing Box-Layout.

• Generally, complex UI designs result from the combination of

simpler nested boxes that show their inner pieces using a

(3)

Summary of Commonly-used Android containers

1. LinearLayout (the box model),

2. RelativeLayout (a rule-based model), and

3. TableLayout (the grid model), along with

4. ScrollView, a container designed to assist with implementing scrolling containers.

(4)

4 4

Before we get started …

1. Android’s simplest layout manager is called: Frame Layout.

2. A Frame Layout is a rectangular container that pins each child

to its upper left corner.

(5)

Before we get started …

(6)

6 6 HierarchyViewer

(7)

1. Linear Layout

LinearLayout is a box model – widgets or child containers are lined

up in a column or row, one after the next.

To configure a LinearLayout, you have five main areas of control besides the container's contents:

• orientation,

• fill model,

• weight,

• gravity,

• padding ,

(8)

8 8

1. Linear Layout

Orientation

indicates whether the LinearLayout represents a row or a column.

Add the android:orientation property to your LinearLayout

element in your XML layout, setting the value to be horizontal for a

row or vertical for a column.

The orientation can be modified at runtime by invoking

(9)

1.1 Linear Layout: Orientation

indicates whether the LinearLayout represents a row (HORIZONTAL)

or a column (VERTICAL).

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

<LinearLayout

android:id="@+id/myLinearLayout"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="#ff0033cc"

android:padding="4dip"

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

android:orientation="horizontal" >

<TextView

android:id="@+id/labelUserName"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="#ffff0066"

android:text="User Name"

android:textSize="16sp"

android:textStyle="bold"

android:textColor="#ff000000"

> </TextView> <EditText

android:id="@+id/ediName"

> </EditText> <Button

android:id="@+id/btnGo"

android:text="Go"

(10)

10 10 1.2 Linear Layout: Fill Model

• Widgets have a "natural" size based on their accompanying text.

• When their combined sizes does not exactly match the width of the Android

device's screen, we may have the issue of what to do with the remaining space.

(11)

1.2 Linear Layout: Fill Model

All widgets inside a LinearLayout must supply dimensional attributes

android:layout_width and android:layout_height

to help address the issue of empty space.

Values used in defining height and width are:

1. Specific a particular dimension, such as 125dip (device independent pixels)

2. Provide wrap_content, which means the widget should fill up its natural

space, unless that is too big, in which case Android can use word-wrap as

needed to make it fit.

3. Provide fill_parent, which means the widget should fill up all available space

(12)

12 12 1.2 Linear Layout: Fill Model

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

<LinearLayout

android:id="@+id/myLinearLayout" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ff0033cc" android:padding="4dip"

android:orientation="vertical"

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

<TextView

android:id="@+id/labelUserName" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#ffff0066" android:text="User Name" android:textSize="16sp" android:textStyle="bold" android:textColor="#ff000000" >

</TextView> <EditText

android:id="@+id/ediName"

android:layout_width="fill_parent" android:layout_height="wrap_content" android:textSize="18sp"

>

</EditText> <Button

android:id="@+id/btnGo" android:layout_width="125dip"

android:layout_height="wrap_content" android:text="Go"

android:textStyle="bold" >

</Button> </LinearLayout>

125 dip

entire row (320 dip on G1)

(13)

1.2 Linear Layout: Weight

It is used to proportionally assign space to widgets in a view.

You set android:layout_weight to a value (1, 2, 3, …) to indicates what proportion

of the free space should go to that widget.

Example

Both the TextView and the Button widgets have been set as in the previous example. Both have the additional property

android:layout_weight="1"

whereas the EditText control has

android:layout_weight="2"

Default value is 0

(14)

14 14 1.3 Linear Layout: Gravity

• It is used to indicate how a control will align on the screen.

• By default, widgets are left- and top-aligned.

• You may use the XML property

android:layout_gravity=“…”

to set other possible arrangements:

left, center, right, top, bottom, etc.

(15)

1.3 CAUTION: gravity vs. layout_gravity

The difference between:

android:gravity

specifies how to place the content of an object, both on the x- and y-axis, within the object itself.

android:layout_gravity

positions the view with respect to its parent (i.e. what the view is contained in).

android:gravity="center"

(16)

16 16

1.4 Linear Layout: Padding

• The padding specifies how much space there is between the boundaries of

the widget's "cell" and the actual widget contents.

• If you want to increase the internal whitespace between the edges of the

and its contents, you will want to use the:

• android:padding property

• or by calling setPadding() at runtime on the widget's Java object.

(17)

(18)

18 18 1.3 Linear Layout: Internal Margins Using Padding

Example:

The EditText box has been changed to display 30dip of padding all around

<EditText

android:layout_width="fill_parent" android:layout_height="wrap_content" android:textSize="18sp"

android:padding="30dip“ >

(19)

1.4 Linear Layout: (External) Marging

• By default, widgets are tightly packed next to each other.

• To increase space between them use the android:layout_margin attribute

<EditText

android:layout_width="fill_parent" android:layout_height="wrap_content" android:textSize="18sp"

android:layout_margin=“6dip“ >

</EditText> ...

(20)

20 20

2. Relative Layout

RelativeLayout places widgets based on their relationship to other widgets in the container and the parent container.

A

C

B

Example:

(21)

2. Relative Layout - Referring to the container

Some positioning XML (boolean) properties mapping a widget according to its

location respect to the parent’s place are:

• android:layout_alignParentTopsays the widget's top should align with the top of the

container

• android:layout_alignParentBottom the widget's bottom should align with the bottom of the

container

• android:layout_alignParentLeft the widget's left side should align with the left side of the

container

• android:layout_alignParentRightthe widget's right side should align with the right side of

the container

• android:layout_centerInParent the widget should be positioned both horizontally and

vertically at the center of the container

• android:layout_centerHorizontal the widget should be positioned horizontally at the center

of the container

• android:layout_centerVerticalthe widget should be positioned vertically at the center of the

(22)

22 22

2. Relative Layout – Referring to other widgets

The following properties manage positioning of a widget respect to other

widgets:

• android:layout_above indicates that the widget should be placed above the widget referenced in the property

• android:layout_below indicates that the widget should be placed below the widget referenced in the property

• android:layout_toLeftOf indicates that the widget should be placed to the left of the widget referenced in the property

(23)

2. Relative Layout – Referring to other widgets – cont.

• android:layout_alignTop indicates that the widget's top should be aligned with the top of the widget referenced in the property

• android:layout_alignBottom indicates that the widget's bottom should be aligned

with the bottom of the widget referenced in the property

• android:layout_alignLeftindicates that the widget's left should be aligned with the left of the widget referenced in the property

• android:layout_alignRight indicates that the widget's right should be aligned with the right of the widget referenced in the property

(24)

24 24

2. Relative Layout – Referring to other widgets

In order to use Relative Notation in Properties you need to consistently:

1. Put identifiers (_android:id attributes) on all elements that you will

need to address.

2. Syntax is: @+id/... (for instance an EditText box could be XML called:

android:id="@+id/ediUserName")

3. Reference other widgets using the same identifier value (@+id/...) already

given to a widget. For instance a control below the EditText box could say:

(25)

2. Relative Layout – Example

<RelativeLayout

android:id="@+id/myRelativeLayout" android:layout_width="fill_parent"

android:background="#ff000099"

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

<TextView

android:id="@+id/lblUserName" android:layout_width="fill_parent"

android:layout_alignParentTop="true"

android:layout_alignParentLeft="true">

</TextView>

<EditText

android:id="@+id/ediUserName" android:layout_width="fill_parent"

android:layout_below="@+id/lblUserName"

android:layout_alignParentLeft="true"

android:layout_alignLeft="@+id/myRelativeLayout"

android:padding="20dip">

</EditText>

<Button

android:id="@+id/btnGo"

android:layout_below="@+id/ediUserName"

android:layout_alignRight="@+id/ediUserName"

android:text="Go"

android:textStyle="bold">

</Button>

<Button

android:id="@+id/btnCancel"

android:layout_toLeftOf="@+id/btnGo"

android:layout_below="@+id/ediUserName"

android:text="Cancel"

android:textStyle="bold">

</Button>

(26)

26

2. Relative Layout – Comment (as of Aug. 2009)

Use the Eclipse ADT Layout Editor for laying out RelativeLayouts.

DroidDraw is of very little help in this respect.

(27)

3. Table Layout

1. Android's TableLayout allows you to position your widgets in a

grid made of identifiable rows and columns.

2. Columns might shrink or stretch to accommodate their contents.

3. TableLayout works in conjunction with TableRow.

4. TableLayout controls the overall behavior of the container, with

the widgets themselves positioned into one or more TableRow

(28)

28

3. Table Layout

Rows are declared by you by putting widgets as children of a

TableRow inside the overall TableLayout.

The number of columns is determined by Android ( you control the number of columns in an indirect way).

So if you have three rows, one with two widgets, one with three widgets, and one with four widgets, there will be at least four columns.

28

0 1

0 1 2

(29)

3. Table Layout

However, a single widget can take up more than one column by

including the android:layout_span property, indicating the number

of columns the widget spans (this is similar to the colspan attribute

one finds in table cells in HTML)

<TextView android:text="URL:" /> <EditText

android:id="@+id/entry"

(30)

30

3. Table Layout

Ordinarily, widgets are put into the first available column of each row.

In the example below, the label (“URL”) would go in the first column

(column 0, as columns are counted starting from 0), and the TextField would go into a spanned set of three columns (columns 1 through 3).

30

Label

(URL)

EditText EditText-span EditText-span

Column 0 Column 1 Column 2 Button

Cancel

Column 3 Button

OK

android:layout_span="3"

(31)

3. Table Layout

–

Example

android:id="@+id/myTableLayout"

android:orientation="vertical"

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

<TableRow>

<TextView

android:text="URL:" />

<EditText android:id="@+id/ediUrl"

android:layout_span="3"/> </TableRow>

<View

android:layout_height="3dip"

android:background="#0000FF" />

<TableRow>

<Button android:id="@+id/cancel"

android:layout_column="2"

android:text="Cancel" /> <Button android:id="@+id/ok"

android:text="OK" /> </TableRow>

<View

android:layout_height="3dip"

android:background="#0000FF" />

</TableLayout>

Skip columns: 0, 1 Strech up to column 3

Note to the reader:

(32)

32

3. Table Layout

By default, each column will be sized according to the "natural" size

of the widest widget in that column.

If your content is narrower than the available space, you can use

the TableLayout property:

android:stretchColumns =“…”

Its value should be a single column number (0-based) or a comma-delimited list of column numbers. Those columns will be stretched to take up any available space yet on the row.

(33)

3. Table Layout

In our running example we stretch columns 2, 3, and 4 to fill the rest of the row.

...

<TableLayout

android:id="@+id/myTableLayout"

android:orientation="vertical"

android:stretchColumns ="2,3,4"

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

>

...

(34)

34

4. ScrollView Layout

When we have more data than what can be shown on a single

screen you may use the ScrollView control.

It provides a sliding or scrolling access to the data. This way the user can only see part of your layout at one time, but the rest is available via scrolling.

This is similar to browsing a large web page that forces the user to scroll up the page to see the bottom part of the form.

(35)

4. Example ScrollView Layout

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

<ScrollView

android:id="@+id/myScrollView1"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="#ff009999"

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

<LinearLayout

android:id="@+id/myLinearLayoutVertical"

android:orientation="vertical" >

<LinearLayout

android:id="@+id/myLinearLayoutHorizontal1"

android:orientation="horizontal" >

<ImageView

android:id="@+id/myPicture"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/icon" />

<TextView

android:id="@+id/textView1"

android:text="Line1"

android:textSize="70dip" />

</LinearLayout> <View

android:layout_height="6dip"

android:background="#ffccffcc" />

<TextView

<View

<TextView

<View

<TextView

<View

<TextView

(36)

36

4. Example ScrollView Layout

36

Scroller

Combining an

ImageView & TextView

in a horizontal Linear Layout Simple

(37)

5. Miscellaneous.

Absolute Layout

• A layout that lets you

specify exact locations (x/y coordinates) of its children.

• Absolute layouts are less

flexible and harder to

(38)

38

5. Miscellaneous Absolute Layout

(cont.)

38

<AbsoluteLayout

android:id="@+id/myLinearLayout"

android:padding="4dip"

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

>

<TextView

android:id="@+id/tvUserName"

android:layout_x="0dip"

android:layout_y="10dip"

>

</TextView> <EditText

android:id="@+id/etName"

android:layout_y="38dip"

>

</EditText>

<Button

android:layout_width="120dip" android:text="Go"

android:id="@+id/btnGo"

android:layout_y="170dip" />

(39)