3. Understanding the components of a
screen
• To define UI we use XML (easier) or Java
(dynamically-almost used in games) .
• UI contains widgets like buttons, text views.
• XML UI is loaded during activity
onCreate(), using setContentView() method.
• During compilation time XML file is complied
to equivalent Android GUI class.
Open source Training (Android Course)
March 29, 2012
Adham Enaya
4. Common Attributes for Views &
ViewGroups
• layout_width :the width of the View or ViewGroup
• layout_height : the height of the View or ViewGroup
• layout_marginTop: extra space on the top side of
• layout_marginBottom : extra space on the bottom side
• layout_marginLeft :extra space on the left side
• layout_marginRight :extra space on the right side
• layout_gravity :Specifies how child Views are positioned.
• layout_x : the x-coordinate of the View or ViewGroup
• layout_y : the y-coordinate of the View or ViewGroup
Open source Training (Android Course)
March 29, 2012
Adham Enaya
5. Views and ViewGroups
• Activity contains:
– View:
• Class name: android.view.View.
• i.e. : buttons, text boxes (EditText), labels (TextView).
– ViewGroup:
• Class name: android.view.ViewGroup
• Special type of view.
• Groups the widgets together and order them.
Open source Training (Android Course)
March 29, 2012
Adham Enaya
6. Android ViewGroups
1. LinearLayout
2. AbsoluteLayout
3. TableLayout
4. RelativeLayout
5. FrameLayout
6. ScrollView
Open source Training (Android Course)
March 29, 2012
Adham Enaya
7. Measurements Unites
• dp and dip:
– Density independent pixel.
– Recommended when specifying the dimension of views in your
layout.
– The dimensions of view don’t change when the device
resolution.
• sp:
– Scale independent pixel, similar to dp
– Recommended when specifying font size.
• pt:
– Point, 1/72 of an inch
• px:
– The actual pixel on the screen
Open source Training (Android Course)
March 29, 2012
Adham Enaya
8. LinearLayout
• The LinearLayout arranges views in a single
column or a single row.
– android:orientation: vertical or horizontal.
– layout_gravity:
Open source Training (Android Course)
March 29, 2012
Adham Enaya
9. AbsoluteLayout
• enables you to specify the exact location.
– android:layout_x: x-pixel.
– android:layout_y: y-pixel.
• Deprecated since android 1.5, and not
supported in the latest version.
• Has problem when viewing the activity in
high-resolution screen.
Open source Training (Android Course)
March 29, 2012
Adham Enaya
10. TableLayout
• groups views into rows and columns.
– <TableRow> element to designate a row in the
table.
– Each row can contain one or more views.
Open source Training (Android Course)
March 29, 2012
Adham Enaya
11. RelativeLayout
• specifies how child views are positioned relative to
each other.
– android:layout_alignParentTop: true or false
– android:layout_alignParentLeft: true or false
– android:layout_centerHorizontal: true or false
– android:layout_alignLeft
– android:layout_alignRight
– android:layout_below
– android:layout_above
– android:layout_toLeftOf
– The value for each of these attributes is the ID for the view
that you are referencing.
Open source Training (Android Course)
March 29, 2012
Adham Enaya
12. Framelayout
• placeholder on screen that you can use to
display a single view.
• always anchored to the top left of the layout.
• You can add multiple views to a FrameLayout,
but each will be stacked on top of the previous
one. This is useful in cases where you want to
animate series of images, with only one visible
at a time.
Open source Training (Android Course)
March 29, 2012
Adham Enaya
13. Scrollview
• special type of FrameLayout
• The ScrollView can contain only one child view
or ViewGroup.
• Do not use a ListView together with the
ScrollView. (ListView is optimized for dealing
with large lists).
Open source Training (Android Course)
March 29, 2012
Adham Enaya
14. Any Question ?
Best,
Open source Training (Android Course)
March 29, 2012
Adham Enaya