191 Lecture 4

7/30/2019 191 Lecture 4

1/18

Android Programming

Lecture 4

9/14/2011

7/30/2019 191 Lecture 4

2/18

Layouts

Layouts are ViewGroupswhich are used to holdother Views

Invisible

Allowpositioning ofdifferent elements

Layouts can be nestedinside of each other

Common layouts:

FrameLayout

LinearLayout

TableLayout

RelativeLayout

Gallery

import android.widget.NAME;

http://developer.android.com/guide/topics/ui/layout-objects.html
http://developer.android.com/guide/topics/ui/layout-objects.htmlhttp://developer.android.com/guide/topics/ui/layout-objects.html

7/30/2019 191 Lecture 4

3/18

Specifying Layouts in XML

It is very common to specify layouts in a text instead

of code format

For main activity, layout specified in

res/layout/main.xml

XML: Extensible Markup Language

Similar to HTML Markup tags (< >, opening, /closing), Attributes=Values

(x=y), Content (text [rare actually])

Nesting

7/30/2019 191 Lecture 4

4/18

Specifying Layouts in XML

Code and XML approaches

that generate the same interface

In XML version, the two Buttons areNested inside the LinearLayout

(between )

7/30/2019 191 Lecture 4

5/18

StopWatch: XML Layout

Layout width, height, and weight

parameters set as previously written in

code

Other initial features of the Views can alsobe set, such as the initial text

Ids are auto-generated and can be

referenced in code

Tricky: 1) ids dont map to 0,1,2,3

2) weights in XML are integer strings, in

code floats

@+id/button1 means

- Go to the ID resource

- Add a newID value for

Button1

7/30/2019 191 Lecture 4

6/18

Using the XML Spec in Code The XML is compiled into resources

The view resource created can auto-magically beinflated at runtime

Can programmatically access other definitions, such asIDs, made in XML

To make use of XML specified layout in code: Use the layout as your layout for the Activity:

Reference the layout Resource specified in the main.xml file

setContentView(R.layout.main);

Access parts of layout by id: Reference the id Resource, get View associated with that id

button = (Button)findViewById(R.id.button1);

7/30/2019 191 Lecture 4

7/18

Using the XML Spec in Code

7/30/2019 191 Lecture 4

8/18

Why Use XML?

Separation of appearance (presentation) from

actual meaningful state-changing code

Can change interface without having to

completely recompile Java code

Can just recompile XML

View Resource is inflated at runtime

7/30/2019 191 Lecture 4

9/18

Speaking of XML:

Applications and Activities

How does the Application know the initial

Activity to call?

Stored in application manifest: AndroidManifest.xml

Managed by Eclipse for us

Indication that the

activity is the first target

7/30/2019 191 Lecture 4

10/18

Speaking of XML:

Applications and Activities

A manifest for an Application with two Activity

components

7/30/2019 191 Lecture 4

11/18

RelativeLayout

A Layout where the location for Views that areadded can be described:

Relative to other Views added (to the left of X)

Relative to the RelativeLayout container (aligned tothe container bottom)

Very flexible

Suggested for use over nested LinearLayouts More complex the nesting of a layout, the longer to

inflate

7/30/2019 191 Lecture 4

12/18

RelativeLayout: Layout Parameters

Remember, two styles:

Relative to some other view (layout_below)

Relative to RelativeLayout container parent (alignParentLeft)

7/30/2019 191 Lecture 4

13/18

ClearingStopWatch: LinearLayout

(Homework Review)

7/30/2019 191 Lecture 4

14/18

ClearingStopWatch: RelativeLayout

(Homework Review)

7/30/2019 191 Lecture 4

15/18


Exploiting Relative Controls

Why is this layout

difficult with a linear

layout?

7/30/2019 191 Lecture 4

16/18



Why is this layout difficultwith a linear layout?

Would need to nest twolayouts Row of Buttons

TextView

If row of Buttons useshorizontal LinearLayout,would be next to each otherinstead of pushed toborders of screen

7/30/2019 191 Lecture 4

17/18



7/30/2019 191 Lecture 4

18/18

ClearingStopWatch:

RelativeLayout XML

Documents

191 Lecture 4