Mobile Device

Programming

Faculty of IT – UEF
Teacher: Lê Viết Linh
Email: [email protected]

1
1
View, ViewGroup

a View object:
is created from the View class
is responsible for drawing and event handling
the base class for widgets
a ViewGroup object:
a subclass of View
provides invisible container that hold
other Views
other ViewGroups 2
View, ViewGroup
View ViewGroup

View is a simple rectangle box that ViewGroup is the invisible container.

responds to the user’s actions. It holds View and ViewGroup

View is the SuperClass of All ViewGroup is a collection of

component like TextView, EditText, Views(TextView, EditText, ListView,
ListView, etc etc..), somewhat like a container.
A ViewGroup object is a layout, that
A View object is a component of the
is, a container of other ViewGroup
user interface (UI) like a button or a
objects (layouts) and View objects
text box, and it’s also called a widget.
(widgets)
For example, LinearLayout is the
Examples are EditText, Button, ViewGroup that contains
CheckBox, etc. Button(View), and other Layouts
also.

View refers to the android.view.View ViewGroup refers to the

class android.view.ViewGroup class

android.view.View which is the base ViewGroup is the base class for

class of all UI classes. Layouts.

3
Create GUI
Example:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<TextView android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is a TextView" />

<Button android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is a Button" />

<!-- More GUI components go here -->

4
Create GUI
Android layout types:
q Linear layout:
o is a view group that aligns all children in a single direction, vertically or
horizontally.
q Relative layout:
o is a view group that displays child views in relative positions.
q Table layout:
o is a view that groups views into rows and columns.
q Absolute layout:
o enables you to specify the exact location of its children.
q Frame layout:
o is a placeholder on screen that you can use to display a single view
q List View:
o is a view group that displays a list of scrollable items.
q Grid View:
o is a ViewGroup that displays items in a two-dimensional, scrollable grid.

5
Create GUI
Layout attributes:
q android:id :
o is the ID which uniquely identifies the view.
q android:layout_width :
o is the width of the layout.
q android:layout_height :
o is the height of the layout Absolute layout
q android:layout_marginTop
o is the extra space on the top side of the layout.
q android:layout_marginBottom
o is the extra space on the bottom side of the layout.
q android:layout_marginLeft
o is the extra space on the left side of the layout.
q android:layout_marginRight
o is the extra space on the right side of the layout.

6
Create GUI
Layout attributes:
q android:layout_gravity :
o specifies how child Views are positioned.
q android:layout_weight :
o specifies how much of the extra space in the layout should be allocated to
the View.
q android:layout_x :
o specifies the x-coordinate of the layout.
q android:layout_y
o specifies the y-coordinate of the layout.
q android:layout_width
o is the width of the layout.
q android:paddingLeft
o is the left padding filled for the layout.
q android:paddingRight
o is the right padding filled for the layout.

7
Create GUI
Layout attributes:
q android:paddingTop:
o is the top padding filled for the layout.
q android:paddingBottom :
o is the bottom padding filled for the layout.
width/height: can be specified in terms of
o dp (Density-independent Pixels)
o sp ( Scale-independent Pixels)
o pt ( Points which is 1/72 of an inch)
o px( Pixels)
o mm ( Millimeters)
o in (inches).
wdth/height: can be specified in use one of these constants
o android:layout_width=wrap_content
§ tells your view to size itself to the dimensions required by its content.
o android:layout_width=fill_parent
§ tells your view to become as big as its parent view.
8
Create GUI
Gravity attribute: can take one or more (separated by '|') of the following
constant values.
o top (Value = 0x30): Push object to the top of its container, not changing its
size.
o bottom (Value = 0x50): Push object to the bottom of its container, not
changing its size.
o left(Value = 0x03): Push object to the left of its container, not changing its
size.
o right(Value = 0x05): Push object to the right of its container, not changing its
size.
o center_vertical (Value = 0x10): Place object in the vertical center of its
container, not changing its size.
o fill_vertical (Value = 0x70): Grow the vertical size of the object if needed so it
completely fills its container.
o center_horizontal (Value = 0x01): Place object in the horizontal center of its
container, not changing its size.
o fill_horizontal (Value = 0x07): Grow the horizontal size of the object if
needed so it completely fills its container.
o center (Value = 0x11): Place the object in the center of its container in both
the vertical and horizontal axis, not changing its size.
9
Create GUI
o fill (Value = 0x77):Grow the horizontal and vertical size of the object if
needed so it completely fills its container.

o clip_vertical (Value = 0x80): Additional option that can be set to have the top
and/or bottom edges of the child clipped to its container's bounds. The clip
will be based on the vertical gravity: a top gravity will clip the bottom edge,
a bottom gravity will clip the top edge, and neither will clip both edges.

o clip_horizontal(Value = 0x08): Additional option that can be set to have the

left and/or right edges of the child clipped to its container's bounds. The clip
will be based on the horizontal gravity: a left gravity will clip the right edge,
a right gravity will clip the left edge, and neither will clip both edges.

o start(Value = 0x00800003): Push object to the beginning of its container, not

changing its size.

o end (Value = 0x00800005): Push object to the end of its container, not
changing its size.

10
View identication
o The syntax for an ID: android:id="@+id/my_button”
o Following is a brief description of @ and + signs −
o The at-symbol (@) : the XML parser should parse and expand the
rest of the ID string and identify it as an ID resource.
o The plus-symbol (+) means that this is a new resource name that
must be created and added to our resources.
o Create an instance and capture it from the layout
Button myButton = (Button) findViewById(R.id.my_button);

11
Android UI Controls

o TextView:
o is used to display text to the user.
o EditText
o is a predefined subclass of TextView that includes rich editing
capabilities.
o AutoCompleteTextView
o is a view that is similar to EditText, except that it shows a list of
completion suggestions automatically while the user is typing.

12
Android UI Controls
o Button
o A push-button that can be pressed, or clicked, by the user to
perform an action.
o ImageButton
o is an AbsoluteLayout which enables you to specify the exact
location of its children. This shows a button with an image (instead
of text) that can be pressed or clicked by the user.
o CheckBox:
o An on/off switch that can be toggled by the user. You should use
check box when presenting users with a group of selectable options
that are not mutually exclusive.
o ToggleButton
o An on/off button with a light indicator.
o RadioButton
o The RadioButton has two states: either checked or unchecked..
o RadioGroup
o is used to group together one or more RadioButtons.
13
Android UI Controls
o ProgressBar
o provides visual feedback about some ongoing tasks, such as when
you are performing a task in the background.
o Spinner
o A drop-down list that allows users to select one value from a set.
o TimePicker:
o enables users to select a time of the day, in either 24-hour mode or
AM/PM mode.
o DatePicker
o The DatePicker view enables users to select a date of the day.

14
Sum up and homework

View, ViewGroup
• View: is a component of the user interface (UI) like a button or a text
box, and it’s also called a widget.
• ViewGroup: is a layout, that is, a container of other ViewGroup objects
(layouts) and View objects (widgets)

Android supports the following ViewGroups:

• LinearLayout
• Relative layout
• Table layout
• Absolute layout
• Frame layout
• List View
• Grid View
Layout attributes:
android:id / android:layout_width / android:layout_marginTop /
android:layout_gravity / …
Exercise: Create layout using RelativeLaout and Linear Layout
Ref: Exercise_Chapter03.docx/ 15