Topic 4 Lecture 4

1. Application Engineering and Development
Topic: Display Principles
Topic Number:4

2. Key topics / learning outcomes
of this lecture
• make informed design decisions
• learn about Android Versions;
• understand the xml layout file;
• learn about the string variable;
• introduction to common controls;
2

3. History of Android
Android is an operating system purchased
by Google in 2005 and is Open Source
software.
3
Date Version Codename
Apr-09 1.5 Cupcake
Sep-09 1.6 Donut
Jan-10 2.1 Éclair
May-10 2.2 Froyo
Dec-10 2.3 - 2.3.7 Gingerbread
Feb-11 3.2 Honeycomb
Oct-11 4.0.3 - 4.0.4 Ice Cream Sandwich
Jul-12 4.2x Jelly Bean
Sep-13 4.4 KitKat
Android
versions take
on dessert
names

4. Version Numbers correlate to Android
Tools
For example
this is
JellyBean
B4004A L1 4

5. Latest version will have most enhancements
B4004A L1 5
Question:
Which version
should I design
with?
Answer:
Which devices are
you designing for?
Which version do
they run?

6. Device comparison
Nexus 5
Powered by Android 4.4, (KitKat)
4.95 inch screen
1920 x 1080 display (445 ppi)
Nexus 10
Powered by Android 4.2 (Jelly Bean)
10.055 inch screen
2560 x 1600 display (300 ppi)
B4004A L1 6

7. Responsive Design
• Stretches and shrinks
B4004A L1 7

8. Main measurements to use in code
• px is one pixel;
• sp is scale-independent pixels;
• dp is Density-independent pixels (previous
known as “dip”).
Best use:
• Use sp for font sizes;
• Use dp for everything else.
B4004A L1 8

9. css (cascading style sheet) box model
top
left right
bottom
B4004A L1 9
margin
your text here
For coding, start at top of
box model, for example:
margin: 5dp;10dp;15dp;20dp;
padding: 15dp;
padding

10. Pixel count from “0”, from top left
B4004A L1 10
count
starts
here
Useful for games, ie ‘x’
placement and ‘y’ placement.
Screen count starts at 0 in top
left-hand corner for both x & y
axis.
0
y
x

11. Look at Marketplace for Android Apps
https://play.google.com/store/apps?hl=en_GB
Which versions
are selling?
Which devices
do they target?
B4004A L1 11

12. How to make the decision …
• Decide on devices:
– what is the expected end use?
• mobile or tablet?
– selecting only one device?
• will this decision narrow the market for sales of your app?
– collate your measurements and parameters
• Android versions, screen sizes and resolutions;
– Android version is backwards compatible
• select the lowest Android version from your chosen devices for
your app design;
– Emulator
• move on to set up the Emulator with the parameters required so
that the App may be tested to meet the requirements of the end
use device and operating system.
B4004A L1 12

13. IntelliJ – AVD (Android Virtual Device)
• As the parameters are determined, select Tools/Android/AVD
Manager and create the AVDs required for your design.
B4004A L1 13

14. End of basic display information
… next an introduction to files, strings, colours
and layout …
B4004A L1 14

15. First, create a new project in IntelliJ called …
On Your Bike – Chapter3 – Pearson
B4004A L1 15

16. Select preferred AVD
B4004A L1 16

17. If a device is not there … access
Android SDK Tools
B4004A L1 17
Select the
version/s you
want to work
with … and then
install
them

18. ... go back to IntelliJ AVD Manager …
Select ‘Create’
and complete as
required to
create a new AVD
B4004A L1 18

19. Here’s an example
B4004A L1 19
Select
‘Snapshot’ and
the AVD will
load quicker

20. Looking at the file structure …
B4004A L1 20
… these are
the main
files we are
working with
…
We will also be
creating a new file
called color.xml

21. This is file: res/layout/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"
B4004A L1 21
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Hello World
MyActivity"
/>
</LinearLayout>

22. Run the project … this is the result …
B4004A L1 22

23. Now change res/layout/main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/andro
id"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
B4004A L1 23
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Hello World from Pearson!!"
/>
</LinearLayout>

24. … and run the project …
B4004A L1 24
The text
changes to
Hello World
from
Pearson!!

25. Open this file again:
res/values/strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">On Your Bike - Chapter3 - Pearson</string>
</resources>
– add another line of code so it looks like the code
below:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">On Your Bike - Chapter3 - Pearson</string>
<string name="explanation">Explanation</string>
</resources>
B4004A L1 25

26. Then, create a new file color.xml in
‘values’
Hexadecimal
color number
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="string_color">#ff00ff77</color>
</resources>
B4004A L1 26
right-click values
to create new file

27. Add to file: res/layout/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="Hello World from Pearson!!"
•
• />
•
• <TextView android:layout_width="fill_parent"
• android:layout_height="wrap_content"
• android:text="@string/explanation"
• android:textColor="@color/string_color"
• />
• </LinearLayout>
Add this
<TextView />
block of code
B4004A L1 27

28. Run the project again…
B4004A L1 28
Here we see
‘Explanation’
and the
hexadecimal
color

29. Simplified view of code structure to achieve
<string name="explanation">Explanation</string>
<color name="string_color">#ff00ff77</color>
B4004A L1 29
strings.xml
android:text="@string/explanation”
android:textColor="@color/string_color"
color.xml
main.xml
this text and color (colour)

30. MyActivity.java calls main shown in
last line of code
B4004A L1 30

31. … turning now to the Graphical Interface
B4004A L1 31

32. These are Common Controls
Control Type Description Related Classes
Button A push-button that can be pressed, or clicked,
by the user to perform an action.
Button
Text Field An editable text field. You can use the
AutoCompleteTextView widget to create a text
entry widget that provides auto-complete
suggestions
EditText
AutoCompleteTextView
Checkbox An on/off switch, or series of switches that can
be selected
CheckBox
Radio button Similar to checkbox, but only one option in
group can be selected
RadioGroup
RadioButton
Toggle button On/off button with light ToggleButton
Spinner Drop down list, can select one value Spinner
Pickers DatePicker widget to select dates from calendar DatePicker
TimePicker
B4004A L1 32

33. Graphical Interface
B4004A L1 33
Select Design
tab in IntelliJ

34. Drag a button over to the graphical
interface
B4004A L1 34

35. This code is automatically added to the
file main.xml
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button"/>
Note the id, this is how this
button control element
communicates with java code,
by using this identifier
B4004A L1 35

36. The button is included, and now the
layout, needs reformatting
B4004A L1 36

37. Use the Component Tree, and the
Properties to create layout design.
B4004A L1 37
Tip: select frame
layout first,
before putting
any components
on the screen

38. Layout may be controlled by IntelliJ’s
Component Tree, or by xml
B4004A L1 38

39. This is the xml behind the layout
• <?xml version="1.0" encoding="utf-8"?>
• <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
• android:layout_width="wrap_content"
• android:layout_height="wrap_content"
• android:baselineAligned="false">
• <RelativeLayout
• android:layout_width="fill_parent"
• android:layout_height="364dp">
• <TextView
• android:layout_width="fill_parent"
• android:layout_height="wrap_content"
• android:text="Hello World from Pearson!!"
•
• android:id="@+id/textView" android:layout_above="@+id/textView2" android:layout_alignParentStart="true"
• android:layout_marginBottom="51dp" android:gravity="center_horizontal"/>
• <TextView android:layout_width="wrap_content"
• android:layout_height="wrap_content"
• android:text="@string/explanation"
• android:textColor="@color/string_color"
• android:layout_above="@+id/button" android:layout_centerHorizontal="true"
• android:layout_marginBottom="39dp" android:id="@+id/textView2"/>
• <Button
• android:layout_width="wrap_content"
• android:layout_height="wrap_content"
• android:text="New Button"
• android:id="@+id/button" android:gravity="center_vertical|center_horizontal"
• android:layout_gravity="center"
• android:layout_alignParentBottom="true" android:layout_centerHorizontal="true"
• android:layout_marginBottom="136dp"/>
• </RelativeLayout>
•
•
• </LinearLayout>
B4004A L1 39

40. The Seminar following this lecture provides
online materials to work through layout
principles.
B4004A L1 40

41. Essential work for next week
• Please consult the OLE for details of:
– Essential readings*
– Seminar/workshop preparation work*
– Recommended further readings
– Any additional learning
* Essential readings and preparation work must always be completed in time
for the next session
41

42. End of presentation
© Pearson College 2013

43. B4004A L1 43