User Interface
Babylon University , IT College , SW Dep. , Android
Assist. Lecturer : Wadhah R. Baiee
(2014)
Ref: Wei-Meng Lee, “BEGINNING ANDROID™ 4 APPLICATION
DEVELOPMENT “, Ch3 , John Wiley & Sons , 2012
Understanding The Components Of A Screen
An activity displays the user interface of your
application, which may contain widgets such as
buttons, labels, textboxes, and so on.
 Typically, you define your UI using an XML fi le
(e.g., the main.xml file located in the res/layout
folder of your project)

Understanding The Components Of A Screen
During runtime, you load the XML UI in the
onCreate() method handler in your Activity
class,
 using the setContentView() method of the
Activity class:

Understanding The Components Of A Screen
During compilation, each element in the XML
file is compiled into its equivalent Android GUI
class, with attributes represented by methods.
 The Android system then creates the UI of the
activity when it is loaded

Views and ViewGroups
An activity contains views and ViewGroups .
 One or more views can be grouped together
into a ViewGroup.
 A ViewGroup (which is itself a special type of
view) provides the layout in which you can
order the appearance and sequence of views.

Views and ViewGroups

Android supports the following ViewGroups:
➤
LinearLayout
➤ AbsoluteLayout
➤ TableLayout
➤ RelativeLayout
➤ FrameLayout
➤ ScrollView
LinearLayout
The LinearLayout arranges views in a single
column or a single row.
 Child views can be arranged either vertically
or horizontally.

LinearLayout

Each View and ViewGroup has a set of common attributes,
some of which are described in Table
LinearLayout
LinearLayout
LinearLayout



It has a 4-inch screen
(diagonally), with a
screen width of 2.04
inches.
Its resolution is 480
(width) 800 (height)
pixels.
With 480 pixels
spread across a width
of 2.04 inches, the
result is a pixel density
of about 235 dots per
inch (dpi).
LinearLayout
LinearLayout



Your device will fall into one of the densities defined
in the preceding list.
For example, the Nexus S is regarded as a hdpi
device, as its pixel density is closest to 240 dpi.
The HTC Hero, however, has a 3.2-inch (diagonal)
screen size and a resolution of 320 x 480. Its pixel
density works out to be about 180 dpi. Therefore, it
would be considered an mdpi device, as its pixel
density is closest to 160 dpi.
LinearLayout
LinearLayout




Using the dp unit ensures that your views are always
displayed in the right proportion regardless of the screen
density
Android automatically scales the size of the view depending
on the density of the screen.
Using the Button as an example, if it is displayed on a 180
dpi screen (a 180 dpi screen is treated just like a 160 dpi
screen), its width would be 160 pixels.
However, if it is displayed on a 235 dpi screen (which is
treated as a 240 dpi screen), then its width would be 240
pixels.
LinearLayout
LinearLayout


Figure 3-6 shows what the Label and Button look
like on a 235 dpi screen.
Figure 3-7 shows the same views on a 180 dpi
screen. In this case, Android does not perform
any conversion
LinearLayout
TableLayout
The TableLayout groups views into rows and
columns. You use the <TableRow> element to
designate a row in the table.
 Each row can contain one or more views.
 Each view you place within a row forms a cell.
 The width of each column is determined by the
largest width of each cell in that column.

TableLayout
RelativeLayout

The RelativeLayout enables you to specify how child
views are positioned relative to each other.
RelativeLayout

The RelativeLayout enables you to specify how child
views are positioned relative to each other.
RelativeLayout
ScrollView
A ScrollView is a special type of FrameLayout
in that it enables users to scroll through a list of
views that occupy more space than the physical
display.
 The ScrollView can contain only one child view
or ViewGroup, which normally is a
LinearLayout.

ScrollView


Because the EditText automatically gets the focus, it fi
lls up the entire activity (as the height was set to
600dp).
To prevent it from getting the focus, add the following
two attributes to the <LinearLayout> element
ScrollView


Because the EditText automatically gets the focus, it fi
lls up the entire activity (as the height was set to
600dp).
To prevent it from getting the focus, add the following
two attributes to the <LinearLayout> element