Download - Lecture 4 display_principles
![Page 1: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/1.jpg)
App Design for Business
Topic: Display Principles
Topic Number:4
![Page 2: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/2.jpg)
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;
![Page 3: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/3.jpg)
3
History of Android
Android is an operating system purchasedby Google in 2005 and is Open Source software.
Date Version Codename
Apr-09 1.5 CupcakeSep-09 1.6 DonutJan-10 2.1 ÉclairMay-10 2.2 FroyoDec-10 2.3 - 2.3.7 GingerbreadFeb-11 3.2 HoneycombOct-11 4.0.3 - 4.0.4 Ice Cream SandwichJul-12 4.2x Jelly BeanSep-13 4.4 KitKat
Android versions take
on dessert names
![Page 4: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/4.jpg)
B4004A L1 4
Version Numbers correlate to Android Tools
For example this is
JellyBean
![Page 5: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/5.jpg)
B4004A L1 5
Latest version will have most enhancements
Question: Which version should I design
with?
Answer:Which devices are you designing for?Which version do
they run?
![Page 6: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/6.jpg)
B4004A L1 6
Device comparison
Nexus 10Powered by Android 4.2 (Jelly Bean)10.055 inch screen2560 x 1600 display (300 ppi)
Nexus 5Powered by Android 4.4, (KitKat)4.95 inch screen1920 x 1080 display (445 ppi)
![Page 7: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/7.jpg)
B4004A L1 7
Responsive Design
• Stretches and shrinks
![Page 8: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/8.jpg)
B4004A L1 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.
![Page 9: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/9.jpg)
B4004A L1 9
css (cascading style sheet) box modeltop
rightleft
bottom
margin
your text hereFor coding, start at top of box model, for example:margin: 5dp;10dp;15dp;20dp;padding: 15dp;
padding
![Page 10: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/10.jpg)
B4004A L1 10
Pixel count from “0”, from top leftcount 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
![Page 11: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/11.jpg)
B4004A L1 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?
![Page 12: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/12.jpg)
B4004A L1 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.
![Page 13: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/13.jpg)
B4004A L1 13
IntelliJ – AVD (Android Virtual Device)
• As the parameters are determined, select Tools/Android/AVD Manager and create the AVDs required for your design.
![Page 14: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/14.jpg)
B4004A L1 14
End of basic display information
… next an introduction to files, strings, colours and layout …
![Page 15: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/15.jpg)
B4004A L1 15
First, create a new project in IntelliJ called …
On Your Bike – Chapter3 – Pearson
![Page 16: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/16.jpg)
B4004A L1 16
Select preferred AVD
![Page 17: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/17.jpg)
B4004A L1 17
If a device is not there … access Android SDK Tools
Select the version/s you want to work
with … and then install them
![Page 18: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/18.jpg)
B4004A L1 18
... go back to IntelliJ AVD Manager …
Select ‘Create’ and complete as
required to create a new AVD
![Page 19: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/19.jpg)
B4004A L1 19
Here’s an example of setting up AVD
Select ‘Snapshot’ and
the AVD will load quicker
![Page 20: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/20.jpg)
B4004A L1 20
IntelliJ - Looking at the file structure …
… these are the main
files we are working with
…
We will also be creating a new file
called color.xml
![Page 21: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/21.jpg)
B4004A L1 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" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Hello World MyActivity" /> </LinearLayout>
![Page 22: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/22.jpg)
B4004A L1 22
Run the project … this is the result …
![Page 23: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/23.jpg)
B4004A L1 23
Now change 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!!" /> </LinearLayout>
![Page 24: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/24.jpg)
B4004A L1 24
… and run the project …
The text changes to Hello World
from Pearson!!
![Page 25: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/25.jpg)
B4004A L1 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>
![Page 26: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/26.jpg)
B4004A L1 26
Then, create a new file color.xml in ‘values’
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="string_color">#ff00ff77</color> </resources>
Hexadecimal color number
right-click values to create new file
![Page 27: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/27.jpg)
B4004A L1 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
![Page 28: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/28.jpg)
B4004A L1 28
Run the project again…
Here we see ‘Explanation’
and the hexadecimal
color
![Page 29: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/29.jpg)
B4004A L1 29
strings.xml
android:text="@string/explanation” android:textColor="@color/string_color"
<color name="string_color">#ff00ff77</color>
<string name="explanation">Explanation</string>
color.xml
main.xml
Simplified view of code structure to achieve this text and color (colour)
![Page 30: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/30.jpg)
B4004A L1 30
MyActivity.java calls main.xml shown in last line of code
![Page 31: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/31.jpg)
B4004A L1 31
… turning now to the Graphical Interface
![Page 32: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/32.jpg)
B4004A L1 32
These are Common ControlsControl 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
EditTextAutoCompleteTextView
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
RadioGroupRadioButton
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 DatePickerTimePicker
![Page 33: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/33.jpg)
B4004A L1 33
Graphical Interface
Select Design tab in IntelliJ
![Page 34: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/34.jpg)
B4004A L1 34
Drag a button over to the graphical interface
![Page 35: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/35.jpg)
B4004A L1 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
![Page 36: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/36.jpg)
B4004A L1 36
The button is included, and now the layout, needs reformatting
![Page 37: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/37.jpg)
B4004A L1 37
Use the Component Tree, and the Properties to create layout design.
Tip: select frame layout first,
before putting any components
on the screen
![Page 38: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/38.jpg)
B4004A L1 38
Layout may be controlled by IntelliJ’s Component Tree, or by xml
![Page 39: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/39.jpg)
B4004A L1 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>
![Page 40: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/40.jpg)
B4004A L1 40
… turning to ‘Activities’….
![Page 41: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/41.jpg)
B4004A L1 41
App Components
• Activities– an activity represents a single screen;
• Services– a service runs in the background;;
• Content providers– manages persistent data;
• Broadcast Receivers– respond to system-wide broadcast
announcements;
![Page 42: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/42.jpg)
B4004A L1 42
Create a New Activity
• Create new project as you would a “Hello World”, and name it “Create New Activity”
![Page 43: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/43.jpg)
B4004A L1 43
Create a New Button using the GUI
TIP: Select the file main.xml and then click the Design tab
![Page 44: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/44.jpg)
B4004A L1 44
Here’s the xml for the New Button
![Page 45: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/45.jpg)
B4004A L1 45
Change the text on the button
![Page 46: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/46.jpg)
B4004A L1 46
Start to create the Activity 2 Java class file
![Page 47: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/47.jpg)
B4004A L1 47
Complete, do not tick boxes, click ok
![Page 48: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/48.jpg)
B4004A L1 48
You now have a new class file, called Activity2.java
![Page 49: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/49.jpg)
B4004A L1 49
Copy this line of code over to Activity2
![Page 50: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/50.jpg)
B4004A L1 50
Change ‘main’ to activity2
TIP: ‘activity2’ is coloured red by IntelliJ because at the moment, the file activity2.xml does not exist.
![Page 51: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/51.jpg)
B4004A L1 51
Navigate to ‘layout’ and create new file named ‘activity2’
![Page 52: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/52.jpg)
B4004A L1 52
… and here it is with default xml created for you …
![Page 53: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/53.jpg)
B4004A L1 53
.. activity2.xml is called from the java Class file Activity2
TIP: activity2 is no longer coloured red by IntelliJ as we have now created activity2.xml. The file ending ‘xml’ is not needed in the code.
![Page 54: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/54.jpg)
B4004A L1 54
Using GUI, insert ‘Small Text’ on activity2.xmlChange text to ‘This is Activity 2 text’
![Page 55: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/55.jpg)
B4004A L1 55
Add this block of code ‘buttonOnClick’
![Page 56: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/56.jpg)
B4004A L1 56
Link the button ‘onClick’ to the method
![Page 57: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/57.jpg)
B4004A L1 57
select buttonOnClick
This then calls the code block as shown below. TIP: if you want the button to do something else, this is where you would code it below;
![Page 58: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/58.jpg)
B4004A L1 58
Run the code, view in Emulator, click the button …
![Page 59: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/59.jpg)
B4004A L1 59
… and here is the second activity …
![Page 60: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/60.jpg)
B4004A L1 60
Seminar / Workshop
The Seminar following this lecture provides online materials to work through layout principles,
building an interactive app.
The Workshop following this lecture will ask students to read through layout information
http://developer.android.com/guide/topics/ui/declaring-layout.html.
![Page 61: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/61.jpg)
61
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
![Page 62: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/62.jpg)
End of presentation
© Pearson College 2013
![Page 63: Lecture 4 display_principles](https://reader036.vdocuments.us/reader036/viewer/2022081519/5584fa68d8b42a8f078b48f7/html5/thumbnails/63.jpg)
B4004A L1 63