Mobile Programming - Android

1. User Interface
TK2323 Mobile Programming
Sem 1 2017/2018
Lam Meng Chun
lammc@ukm.edu.my (H-04-10)

2. Outline
View & Viewgroup Layout
▹Linear Layout
▹Relative Layout
▹Constraint Layout
Design for Multiple Screens
▸Px,dp,sp
▸Smallest-width Qualifier
▸Orientation Qualifiers
2
Attributes
▸ID
▸layout_width
▸layout_height
▸layout_margin
▸padding
▸background
▸layout_gravity
▸gravity
▸textSize
▸layout_weight

3. User Interface3

4. Viewgroup/ View
4

5. View
▹All user interface elements in an Android app are built
using View and ViewGroup objects.
▹A View is an object that draws something on the screen
that the user can interact with.
▸Button
▸EditText
▸TextView
5

6. Viewgroup
6
A ViewGroup is an object that holds other View (and ViewGroup)
objects in order to define the layout of the interface.
▸Relative Layout
▸Linear Layout
▸Constraint Layout
▸Grid Layout

7. Viewgroup
7

8. Layout Group
8

9. Layout
9

10. Layout
10

11. Linear Layout
11 Horizontal Vertical

12. Linear Layout
12

13. 13
Linear Layout
Exercise
▹LinearLayout (_______)
▸TextView (How to…)
▸LinearLayout (_______)
⬩TextView (Game)
⬩TextView (Education)
⬩TextView (Sport)
13

14. Relative Layout
▹RelativeLayout is a view group that displays child views in
relative positions.
▹The position of each view can be specified as relative to
sibling elements (such as to the left-of or below another
view) or in positions relative to the parent RelativeLayout
area (such as aligned to the bottom, left or center).
14

15. Relative
Layout
15
Relative to parent Relative to other children

16. Relative Layout (Relative to
parent)
▹Relative to parent
▸ android:layout_alignParentLeft="true"
▸ android:layout_alignParentRight=“false“
▸ android:layout_alignParentTop=“true“
▸ android:layout_alignParentBottom=“false“
16

17. Relative Layout (Relative to
parent)
▹Relative to child
▸android:layout_below="@+id/…"
▸android:layout_above="@+id/…"
▸android:layout_alignLeft="@+id/…"
▸android:layout_alignRight="@+id/…"
▸android:layout_alignBottom="@+id/…"
▸android:layout_alignTop="@+id/…“
▸android:layout_toLeftOf="@+id/…"
▸android:layout_toRightOf="@+id/…"
17

18. Constraint Layout
▹ConstraintLayout allows you to create large and complex
layouts with a flat view hierarchy (no nested view groups).
▹ It's similar to RelativeLayout in that all views are layed
out according to relationships between sibling views and
the parent layout, but it's more flexible than RelativeLayout
and easier to use with Android Studio's Layout Editor.
18

19. Constraint
Layout
19
https://developer.android.com/training/constraint-
layout/index.html#add-constraintlayout-to-your-project

20. Constraint Layout
▹ Wrap Content: The view expands exactly as needed
to fit its contents.
▹ Fixed: You specify the dimension in the text box
below or by resizing the view in the editor.
20

21. Constraint Layout
▹ Any Size: The view expands exactly as needed to
match the constraints. The actual value is 0dp because the
view has no desired dimensions, but it resizes as needed to
meet the constraints. However, if the given dimension has
only one constraint, then the view expands to fit its
contents. Another way to think of it is "match constraints"
(instead of match_parent) because it expands the view as
much as possible after accounting for the limits of each
constraint and its margins.
21

22. 22
Relative
Layout
Exercise
▹Relative to parent
▸ android:layout_alignParentLeft=“___"
▸ android:layout_alignParentRight=“____“
▸ android:layout_alignParentTop=“____“
▸ android:layout_alignParentBottom=“____“
22

23. Layouts
23

24. Layout
▹A layout defines the visual structure for a user interface,
such as the UI for an activity or app widget. You can declare
a layout in two ways:
24

25. Layout
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.
25

26. Project UI
source code
(XML file)
26

27. Write XML Resource :
Structure
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, I am a TextView" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, I am a Button" />
</LinearLayout>
27

28. XML Resource
<Button
android:id="@+id/main_btn_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Send" />
28
▹What’s the name of the XML element?
▹List all attribute names (Not attribute value)
▹Where is the open tag and close tag?

29. Project
source code
(java file)
29

30. Load the XML Layout
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
// load the UI’s XML Layout
setContentView(R.layout.activity_main_layout);
}
30
What happened when we call setContentView() method
https://www.youtube.com/watch?v=j-23-3mYno0&feature=youtu.be

31. Create an instance of the
view object
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main_layout);
// initialize the Button with View’s ID
Button myButton = (Button) findViewById(R.id.main_btn_send);
}
31

32. Create using Java Code32

33. Attributes
33

34. 34
Sr.No View & description Example Value
layout_width
Specifies the width of the View or ViewGroup
wrap_content
match_parent
layout_height Specifies the height of the View or ViewGroup
wrap_content
match_parent
layout_margin
Specifies extra space on side of the View or ViewGroup
8dp
padding Sets the padding, in pixels, of all four edges. 8dp
background A drawable to use as the background/ color. #000000
layout_gravity
Specifies how child Views are positioned
Center, Bottom, Top
Left, Right
text Text to display in view @string/foo
textSize Size of the text 21sp
layout_weight
Specifies how much of the extra space in the layout
should be allocated to the View
1

35. Layout width and height
▹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, in the id attribute.
35

36. Layout width and height
▹width and height of a view can be:
▸wrap_content : exactly large enough to fit the widget's
content
▸match_parent : as wide or tall as 100% of the screen or
layout
▸a specific fixed width such as 64dp (not usually
recommended)
dp = device pixels; sp = scaling pixels
36

37. Layout width
and height
37

38. Padding and Margin
Padding
is for inside/within
components
Margin
is to be applied for the
on-outside of the
components.
38

39. Padding39

40. Margin40

41. Layout
Gravity
41
android:layout_gravity
sets the gravity of the View
or Layout in its parent.

42. Layout
Gravity
42

43. Layout
Weight
43

44. Layout
Weight
44
android:layout_width
Set to 0 (Horizontal)
android:layout_height
Set to 0 (Vertical)

45. 45
Linear Layout
Exercise
▹Attribute
▸Background
▸Weight
▸Width
▸textAlignment
45

46. Design for Multiple
Screens
(Density)
46

47. Units
Pixels:
The exact number of
'dots' both
horizontally and
vertically that make up
the file.
▸This is
the actual resolution of
the file.
DPI (Dots per inch):
The number of 'dots'
or pixels per each inch
of a printed or scanned
document.
47
Density-independent
pixel (dp)
A virtual pixel unit that
you should use when
defining UI layout, to
express layout
dimensions or position
in a density-
independent way.
▸px = dp * (dpi / 160)
▸240 dpi screen, 1 dp
equals 1.5 physical
pixels

48. Units of Measurement48
Sr.No Unit & description
1 dp
Density-independent pixel.
1 dp is equivalent to one pixel on a 160 dpi screen.
2 sp
Scale-independent pixel.
This is similar to dp and is recommended for specifying font
sizes.
3 px
Pixel. Corresponds to actual pixels on the screen

49. Pixel
49
▹(px units), so the views are physically larger on a low-density
screen and smaller on a high-density screen.
▹This is because although the actual screen sizes may be the
same, the high-density screen has more pixels per inch (the
same amount of pixels fit in a smaller area).

50. Dp
50
▹the layout dimensions are specified in density-independent
pixels (dp units). Because the baseline for density-independent
pixels is a medium-density screen, the device with a medium-
density screen looks the same.
▹For the low-density and high-density screens, however, the
system scales the density-independent pixel values down and
up, respectively, to fit the screen as appropriate.

51. Dp
51

52. Dp
52

53. Design for Multiple Screens
▹In most cases, you can ensure density independence in
your application simply by specifying all layout dimension
values in density-independent pixels (dp units) or
with "wrap_content", as appropriate.
▹The system then scales bitmap drawables as appropriate
in order to display at the appropriate size, based on the
appropriate scaling factor for the current screen's density.
53

54. Design for Multiple Screens
▹However, bitmap scaling can result in blurry or
pixelated bitmaps, which you might notice in the above
screenshots.
▹To avoid these artifacts, you should provide alternative
bitmap resources for different densities.
▹For example, you should provide higher-resolution
bitmaps for high-density screens and the system will use
those instead of resizing the bitmap designed for medium-
54

55. Size and Orientation
▹Using new size qualifiers
▹The fundamental size of a screen, as indicated by the
shortest dimension of the available screen area.
▹Specifically, the device's smallestWidth is the shortest of
the screen's available height and width (you may also think
of it as the "smallest possible width" for the screen).
55

56. Size and Orientation
▹“sw” (smallest possible width)
▹Specifically, the device's smallestWidth is the shortest of
the screen's available height and width
▹The smallestWidth is a fixed screen size characteristic of
the device
56

57. Size and Orientation
▹the device's smallestWidth does not change when the
screen's orientation changes.
▹Thus, using sw<N>dp is a simple way to specify the overall
screen size available for your layout by ignoring the screen's
orientation
57

58. Size and Orientation
▹320dp: a typical phone screen (240x320 ldpi, 320x480
mdpi, 480x800 hdpi, etc).
▹480dp: a tweener tablet like the Streak (480x800 mdpi).
▹600dp: a 7” tablet (600x1024 mdpi).
▹720dp: a 10” tablet (720x1280 mdpi, 800x1280 mdpi, etc).
58

59. Size and Orientation
▹This means that devices whose smallest width is greater
than or equal to 600dp will select the layout-
sw600dp/main.xml (two-pane) layout, while smaller screens
will select the layout/main.xml (single-pane) layout
59

60. Size and
Orientation
60

61. Preparing Resources
▹A set of six generalized densities:
▸ldpi (low) ~120dpi
▸mdpi (medium) ~160dpi
▸hdpi (high) ~240dpi
▸xhdpi (extra-high) ~320dpi
▸xxhdpi (extra-extra-high) ~480dpi
▸xxxhdpi (extra-extra-extra-high) ~640dpi
61

62. Preparing Resources
▹Use wrap_content, fill_parent, or the dp unit for layout
dimensions
▹Do not use hard-coded pixel values in your application
code
62

63. Preparing Resources
▹To generate these images, you should start with your raw
resource in vector format and generate the images for each
density using the following size scale:
63

64. Preparing
Resources
64
▹This means that if you generate a 200x200 image
for xhdpi devices, you should generate the same
resource in 150x150 for hdpi, 100x100 for mdpi and
finally a 75x75 image for ldpi devices.
Mdpi = 200/2*1 , xxxhdpi=200/2*4

65. Design for
Multiple
Screens:
Useful Tool
65
▹http://romannurik.github.io/AndroidAssetStudio/index.html

66. Design for
Multiple
Screens:
Useful Tool
66
▹http://romannurik.github.io/AndroidAssetStudio/index.html

67. Exercise
67