01 08 - graphical user interface - layouts

Android

Graphical User Interface

Agenda

Familiarize with the main types of GUI components

Layouts

Widgets

Menus

What is an XML Layout?

An XML-based layout is a specification of the various UI components (widgets) and

the relationships to each other –and to their containers –all written in XML format.

Android considers XML-based layouts to be

resources, and as such layout files are stored in

the res/layout

directory inside your Android project.

Each XML file contains a tree of elements specifying a

layout of widgets and containers that make up one

View (shown later).

The attributes of the XML elements are properties,

describing how a widget should look or how a container

should behave.

Example: If a Button element has an attribute value of

android:textStyle= "bold"

that means that the text appearing on the face of the

button should be rendered in a boldface font style.

Using @ in XML Layouts

The button application introduced

<?xmlversion="1.0"encoding="utf-8"?>

<Buttonxmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/myButton"

android:text=""

android:layout_width="fill_parent"

android:layout_height="fill_parent"

/>

Anything you do want to use in your Java source needs an

android:id=“…”

The convention is to use @+id/nnn as the id value, where the nnn represents your

locally-unique name for the widget (eg. @+id/myButton).

Attaching Layouts to Java Code

Assume res/layout/main.xml has been created. This layout could be

called by an application using the statement

setContentView(R.layout.main);

Individual widgets, such as myButton could be accessed by the

application using the statement findViewByID(...) as in

Button btn= (Button) findViewById(R.id.myButton);

Where R is a class automatically generated to keep track of resources

available to the application. In particular R.id... is the collection of

widgets defined in the XML layout.

Attaching Layouts to Java Code

Attaching Listeners to the Widgets

The button of our example could now be used, for instance a listener for the click event

could be written as:

btn.setOnClickListener(newOnClickListener() {

@Override

Public void onClick(View v) {

updateTime();

}

});

Private void updateTime() {

btn.setText(newDate().toString());

}

Android Layouts

An Android layout is a class that handles arranging the way its

children appear on the screen.

Anything that is a View (or inherits from View) can be a child of a

layout.

The most common way to define layout and express the view

hierarchy is with an XML layout file.

There are five basic types of Layouts:

– Linear Layout

– Absolute Layout

– Table Layout

– Relative Layout

– Frame Layout

– Scroll View Layout

Frame Layout

Frame Layout is the simplest type of layout object. It's basically a blank space on

your screen that you can later fill with a single object —for example, a picture that

you'll swap in and out.

Views that you add to a Frame Layout is always anchored to the top left of the

layout.

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

<AbsoluteLayout android:id="@+id/widget68"



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

<FrameLayout android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_x="40px"

android:layout_y="35px"

>

<ImageView android:src = "@drawable/androidlogo"

android:layout_width="wrap_content"


/>

</FrameLayout>

</AbsoluteLayout>

Linear Layout

A Linear Layout is a View Group that will lay child View elements

vertically or horizontally depending on the android:orientation attribute.

All children are stacked one after the other, so a

Vertical list will only have one child per row, no matter

how wide they are, and a

Horizontal list will only be one row high (the height of

the tallest child, plus padding).

Linear Layout

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

<LinearLayout



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

>

<TextView

android:layout_width="105px"


android:text="@string/hello"

/>

<Button

android:layout_width="100px"


android:text="Button"

/>

</ LinearLayout >

The default orientation of Linear Layout is set to

horizontal.

If you want to change its orientation to vertical, set the orientation

attribute to vertical

Linear Layout

<LinearLayout



android:orientation="vertical"

xmlns:android="http://schemas.android.

com/apk/res/android"

>

Relative Layout

A Relative Layout is a ViewGroup that allows you to layout child elements in

positions relative to the parent or siblings elements.

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

android:layout_toRightOf indicates that the widget should be placed to the

right of the widget referenced in the property

Relative Layout

14

Relative Layout

<?xml version="1.0" encoding="utf-8"?><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"android:layout_height="fill_parent"><TextView

android:id="@+id/label"android:layout_width="fill_parent"android:layout_height="wrap_content"android:text="Type here:"/>

<EditTextandroid:id="@+id/entry"android:layout_width="fill_parent"android:layout_height="wrap_content"android:background="@android:drawable/editbox_backg

round"android:layout_below="@id/label"/>

<Buttonandroid:id="@+id/ok"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@id/entry"android:layout_alignParentRight="true"android:layout_marginLeft="10dip"android:text="OK" />

<Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_toLeftOf="@id/ok"android:layout_alignTop="@id/ok"android:text="Cancel" />

</RelativeLayout>

Table Layout

A Table Layout is a View Group that that will lay child View elements into rows

and columns.

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

<TableLayoutxmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"android:layout_height="fill_parent"android:stretchColumns="1">

<TableRow><TextView

android:layout_column="1"android:text="Open..."android:padding="3dip" />

<TextViewandroid:text="Ctrl-O"android:gravity="right"android:padding="3dip" />

</TableRow>

<TableRow><TextView

android:layout_column="1"android:text="Save..."android:padding="3dip" />

<TextViewandroid:text="Ctrl-S"android:gravity="right"android:padding="3dip" />

</TableRow>

<TableRow><TextView

android:layout_column="1"android:text="Save As..."android:padding="3dip" />

<TextViewandroid:text="Ctrl-Shift-S"android:gravity="right"android:padding="3dip" />

</TableRow>

<Viewandroid:layout_height="2dip"android:background="#FF909090

" />

[………………………]</TableLayout>

Absolute Layout

The Absolute Layout lets you specify the exact location of its children.

Consider the following UI defined in main.xml

the two Button views located at their specified positions using the android_layout_x

and android_layout_y attributes

Absolute Layout<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent” android:layout_height="fill_parent">

<Button

android:id="@+id/backbutton"

android:text="Back” android:layout_x="10px” android:layout_y="5px"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

<TextView

android:layout_x="10px” android:layout_y="110px"

android:text="First Name” android:layout_width="wrap_content"


<EditText


android:width="100px” android:layout_width="wrap_content"


<TextView


android:text="Last Name” android:layout_width="wrap_content"


<EditText


android:width="100px"

android:layout_width="wrap_content” android:layout_height="wrap_content" />

</AbsoluteLayout>

Scroll View Layout

A Scroll View is a special type of Frame Layout in that it allows

users to scroll through a list of views that occupy more space than

the physical display.

The Scroll View can contain only one child view or View Group,

which normally is a Linear Layout.

Note: Do not use a List View together with the Scroll View. The List

View is designed for showing a list of related information and is

optimized for dealing with large lists.

Scroll View

Questions?

Technology

01 08 - graphical user interface - layouts