Android User Interface

flosssnailsMobile - Wireless

Dec 10, 2013 (3 years and 4 months ago)

76 views

Android User Interface


Mobile Application
Development
Defining Layouts
Your layout is the architecture for the user interface in an
Activity. It defines the layout structure and holds all the
elements that appear to the user. You can declare your
layout in two ways:
Declare UI elements in XML
. Android provides a
straightforward XML vocabulary that corresponds to the
View classes and subclasses, such as those for widgets
and layouts.
Instantiate layout elements at runtime
. Your application
can create View and
ViewGroup
objects (and manipulate
their properties) programmatically.

Advantage of UI defined in XML
§

Better separation of presentation elements from
the code that controls its behavior
§

UI descriptions are externalized, making them
easy to modify or adapt it without having to edit
source code and recompile
§

Ease of layouts for different screen orientations,
different device screen sizes, and different
languages
§

Easier to visualize the structure of your UI, so it is
easier to debug
Naming Scheme: ID attribute
Any View object may have an integer ID associated with it, to uniquely
identify the View within the tree.
When the application is compiled, this ID is referenced as an integer,
but the ID is typically assigned in the layout XML file as a string
Syntax:
android:id
="@+id/
my_button
”!
The at-symbol (@) at the beginning of the string indicates that the XML
parser should parse and expand the rest of the ID string and identify
it as an ID resource.
The plus-symbol (+) means that this is a new resource name that must
be created and added to our resources (in the
R.java
file).
When referencing an Android resource ID, you do not need the plus-
symbol, but must add the android package namespace:
android:id
="@
android:id
/empty"!
ViewGroups

§

Can combine/nest the
ViewGroups

§

LinearLayout
,
AbsoluteLayout
,
TableLayout

RelativeLayout
,
FrameLayout
,
ScrollView

§

Examples of attributes:
<Button>

android:layout_width
=“
fill_parent


android:layout_height
=“
wrap_content

/>
§

See Examples application
Default
main.xml
!
<?xml version=”1.0” encoding=”utf-8”?>!
<
LinearLayout
!
!
xmlns:android
=”http://
schemas.android.com
/
apk
/res/android”!
!
android:orientation
=”vertical”!
!
android:layout_width
=”
fill_parent
”!
!
android:layout_height
=”
fill_parent
”!
!
>!
<
TextView
!
!
android:layout_width
=”
fill_parent
”!
!
android:layout_height
=”
wrap_content
”!
!
android:text
=”@string/hello”!
!
/>!
</
LinearLayout
>!

View Groups
LinearLayout
– most common, orientation can be
horizontal or vertical (default horizontal)
AbsoluteLayout
– deprecated, avoid using
TableLayout
– similar to HTML tables with rows and
columns
RelativeLayout
– specify how child views are
positioned relative to each other
FrameLayout
– Placeholder on screen for single view
ScrollView
– Special
FrameLayout
for scrolling long
lists


Example View Hierarchy
Some Common Attributes for View Groups
Attribute
Description
layout_width

Specifies the width of the View or
ViewGroup

layout_height

Specifies the height of the View or
ViewGroup

layout_marginTop

Specifies extra space on the top side of the View/VG
layout_marginBottom

Specifies extra space on the bottom side of the View/VG
layout_marginLeft

Specifies extra space on the left side of the View/VG
layout_marginRight

Specifies extra space on the right side of the View/VG
layout_gravity

Specifies how child Views are positioned
layout_weight

Specifies how much of the extra space in the layout should
be allocated to the View
layout_x

Specifies the x-coordinate of the View or View Group
layout_y

Specifies the y-coordinate of the View or View Group
Units of Measure
Unit
Description
dp

Density-independent pixel. 160dp == one inch of physical screen
RECOMMENDED measurement unit for views in layouts.
sp

Scale-independent pixel. Similar to
dp
, use for font sizes.
pt

Point. 72 points == 1 inch.
px

Pixel. Corresponds to actual pixels on the screen. NOT
recommended.
TableLayout
Example
<?xml version=
"1.0" encoding="utf-8"?>
<
TableLayout

xmlns:android
=

>
<
TableRow
>

<Button
android:text
=
"1, 1’’ …
/>
<Button
android:text
=
"1, 2’’ …
/>
</
TableRow
>
<
TableRow
>

<
Button

android:text
=
"2, 1’’ …

/>
<
Button

android:text
=
"2, 1’’ …

/>
</
TableRow
>
</
TableLayout
>

RelativeLayout
Example
<
ImageView


android:id
="@+id/
android_icon
"

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


android:layout_toRightOf
="@id/
android_icon
"

android:text
="@string/hello" />
<
ImageView


android:id
="@+id/
my_icon
"

android:layout_below
="@id/
android_icon
"

android:src
="@
drawable
/
wilkins_icon
" />
<
TextView


android:layout_toRightOf
="@id/
my_icon
"

android:layout_below
="@id/
android_icon
"

android:text
="@string/
newicon
" />
FrameLayout
Example
FrameLayout
is a placeholder on screen that
can be used to display a single view
Views in a
FrameLayout
are always anchored
to the top left of the layout
If multiple views are added to a
FrameLayout
,
they are stacked on top of one another

Book Example (to right) uses
Relative Layout, containing:
§

TextView
(This is my lovely dog,
Ookii
)
§

FrameLayout
(positioned below
TextView
)
§

Image (the dog image)
§

Button (Print Picture), stacked
ScrollView
Example
A specialized
FrameLayout

Useful when list of views is bigger
than screen
ScrollView
can contain only one child
view or VG, usually a
LinearLayout

ScrollView

§

LinearLayout

§

Button1
§

Button 2 …
See text for full XML of example to the
left
Next Week
§

No class/lab on Tuesday
§

Work on your Homework assignment, which is
due on Thursday next week.
§

I will be available most of Monday (not 2-3,
during office hours!) and Wednesday.