Android - Lesson 2

Daniela da Cruz

Universidade Lusófona do Porto

September, 2012

1 of 35

Android Application Overview

Activity Lifecycle

Basic Android User Interface componentsActivityFragmentsView and ViewGroup

Layouts

XML Layout Attributes

Dimensions

Exercise

2 of 35

Layout

Android Application Overview

Activity Lifecycle

Basic Android User Interface componentsActivityFragmentsView and ViewGroup

Layouts

XML Layout Attributes

Dimensions

Exercise

3 of 35

Android Application Overview

An Android application consists of various functionalities. Someexamples are editing a note, playing a music file, ringing an alarm, oropening a phone contact.These functionalities can be classified intofour different Android components:

Every application is made up of one or more of these components.

4 of 35

Layout

Android Application Overview

Activity Lifecycle

Basic Android User Interface componentsActivityFragmentsView and ViewGroup

Layouts

XML Layout Attributes

Dimensions

Exercise

5 of 35

Activity Lifecycle

6 of 35

Activity Lifecycle

Note the following:

• Changing the screen orientation destroys and recreates the activityfrom scratch.

• Pressing the Home button pauses the activity, but does not destroyit.

• Pressing the Application icon might start a new instance of theactivity, even if the old one was not destroyed.

• Letting the screen sleep pauses the activity and the screenawakening resumes it. (This is similar to taking an incoming phonecall.)

7 of 35

Layout

Android Application Overview

Activity Lifecycle

Basic Android User Interface componentsActivityFragmentsView and ViewGroup

Layouts

XML Layout Attributes

Dimensions

Exercise

8 of 35

Activity

An Activity represents the visual representation of an Androidapplication.

Activities use Views and Fragments to create the user interface andto interact with the user.

An Android application can have several Activities.

9 of 35

Fragments

Fragments are components which run in the context of an Activity.

Fragment components encapsulate application code so that it is easierto reuse it and to support different sized devices.

Fragments are optional, you can use Views and ViewGroups directly inan Activity but in professional applications you always use them toallow the reuse of your user interface components on different sizeddevices.

10 of 35

View and ViewGroup

Views are user interface widgets, e.g. buttons or text fields. Viewshave attributes which can be used to configure their appearance andbehavior.

A ViewGroup is responsible for arranging other Views. ViewGroups isalso called layout managers.

ViewGroups can be nestled to create complex layouts. You should notnestle ViewGroups too deeply as this has a negative impact on theperformance.

11 of 35

View and ViewGroup

The user interface for each component of your app is defined using ahierarchy of View and ViewGroup objects.

The easiest and most effective way to define a layout is with an XMLfile.

12 of 35

Layout

Android Application Overview

Activity Lifecycle

Basic Android User Interface componentsActivityFragmentsView and ViewGroup

Layouts

XML Layout Attributes

Dimensions

Exercise

13 of 35

Layouts

An Android layout is a class that handles arranging the way itschildren appear on the screen. Anything that is a View (or inheritsfrom View) can be a child of a layout. All of the layouts inherit fromViewGroup (which inherits from View) so you can nest layouts.The standard Layouts are:• AbsoluteLayout• FrameLayout• LinearLayout• RelativeLayout• TableLayout

14 of 35

AbsoluteLayout (deprecated)

AbsoluteLayout is based on the simple idea of placing each control atan absolute position. You specify the exact x and y coordinates onthe screen for each control.

15 of 35

FrameLayout

FrameLayout is designed to display a single item at a time. You canhave multiple elements within a FrameLayout but each element will bepositioned based on the top left of the screen. Elements that overlapwill be displayed overlapping.

16 of 35

LinearLayout

LinearLayout is a view group that aligns all children in a singledirection, vertically or horizontally.You specify whether that line is vertical or horizontal usingandroid:orientation.

17 of 35

RelativeLayout (1)

RelativeLayout lays out elements based on their relationships with oneanother, and with the parent container. RelativeLayout is verypowerful but the most complicated one, and we need severalproperties to actually get the layout we want.

18 of 35

RelativeLayout (2)

These properties will layout elements relative to the parentcontainer:

• android:layout_alignParentBottom — Places the bottom ofthe element on the bottom of the container.

• android:layout_alignParentLeft — Places the left of theelement on the left side of the container.

• android:layout_alignParentRight — Places the right of theelement on the right side of the container.

• android:layout_alignParentTop — Places the element at thetop of the container.

19 of 35

RelativeLayout (3)

(cont.)• android:layout_centerHorizontal — Centers the elementhorizontally within its parent container.

• android:layout_centerInParent — Centers the element bothhorizontally and vertically within its container.

• android:layout_centerVertical — Centers the elementvertically within its parent container.

20 of 35

RelativeLayout (4)

These properties allow you to layout elements relative to otherelements on screen.

• android:layout_above — Places the element above the specifiedelement.

• android:layout_below — Places the element below the specifiedelement

21 of 35

RelativeLayout (5)

(cont.)

• android:layout_toLeftOf — Places the element to the left ofthe specified element.

• android:layout_toRightOf — Places the element to the right ofthe specified element.

The value for each of these elements must be a reference to anotherresource, in the form “@[+][package:]type:name”.

22 of 35

RelativeLayout (6)

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

• android:layout_alignBaseline — Aligns baseline of the newelement with the baseline of the specified element.

• android:layout_alignBottom — Aligns the bottom of newelement in with the bottom of the specified element.

• android:layout_alignLeft — Aligns left edge of the newelement with the left edge of the specified element.

23 of 35

RelativeLayout (7)

(cont.)

• android:layout_alignRight — Aligns right edge of the newelement with the right edge of the specified element.

• android:layout_alignTop — Places top of the new element inalignment with the top of the specified element.

24 of 35

RelativeLayout (8)

25 of 35

TableLayout

TableLayout organizes content into rows and columns. The rows aredefined in the layout XML, and the columns are determinedautomatically by Android. This is done by creating at least onecolumn for each element.

26 of 35

Layout

Android Application Overview

Activity Lifecycle

Basic Android User Interface componentsActivityFragmentsView and ViewGroup

Layouts

XML Layout Attributes

Dimensions

Exercise

27 of 35

XML Layout Attributes

At compile time, references to the resources are gathered into anauto-generated wrapper class called R.java. The Android AssetPackaging Tool (aapt) autogenerates this file.

The syntax for an ID, inside an XML tag is:

android:id="@+id/my_button"

The at-symbol (@) at the beginning of the string indicates that theXML parser should parse and expand the rest of the ID string andidentify it as an ID resource. The plus-symbol (+) means that this is anew resource name that must be created and added to the R.java file.

28 of 35

XML Layout Attributes

When referencing an Android resource ID, you do not need theplus-symbol, but must add the android package namespace, like so:

android:id="@android:id/empty"

With the android package namespace in place, we’re now referencingan ID from the android.R resources class, rather than the localresources class.

29 of 35

Layout

Android Application Overview

Activity Lifecycle

Basic Android User Interface componentsActivityFragmentsView and ViewGroup

Layouts

XML Layout Attributes

Dimensions

Exercise

30 of 35

Dimensions

A dimension is specified with a number followed by a unit of measure.The following units of measure are supported by Android:• dp — Density-independent Pixels: An abstract unit that is based onthe physical density of the screen. These units are relative to a 160dpi (dots per inch) screen, on which 1dp is roughly equal to 1px.When running on a higher density screen, the number of pixels usedto draw 1dp is scaled up by a factor appropriate for the screen’s dpi.

• sp — Scale-independent Pixels: This is like the dp unit, but it isalso scaled by the user’s font size preference.

• pt — Points: 1/72 of an inch based on the physical size of thescreen.

31 of 35

Dimensions

(cont.)

• px — Pixels: Corresponds to actual pixels on the screen. This unitof measure is not recommended because the actual representationcan vary across devices.

• mm — Millimeters: Based on the physical size of the screen.• in — Inches: Based on the physical size of the screen.

32 of 35

Layout

Android Application Overview

Activity Lifecycle

Basic Android User Interface componentsActivityFragmentsView and ViewGroup

Layouts

XML Layout Attributes

Dimensions

Exercise

33 of 35

Exercise

Create your first Android application to understand the activitylifecycle.

You should display a message as soon as an event (onCreate,onStart, etc) is fired.

To display messages use the class android.widget.Toast.

34 of 35

Slides made using the help of:

• http://developer.android.com/• Programming Android. Zigurd Mednieks, Laird Dornin, G. BlakeMeike, Masumi Nakamura. O’Reilly Media. July 2011.

• The Android Developer’s Cookbook: Building Applications with theAndroid SDK. James Steele, Nelson To.

• http://www.learn-android.com

35 of 35