lecture 4 display_principles
DESCRIPTION
L4TRANSCRIPT
App Design for Business
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;
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
B4004A L1 4
Version Numbers correlate to Android Tools
For example this is
JellyBean
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?
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)
B4004A L1 7
Responsive Design
• Stretches and shrinks
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.
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
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
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?
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.
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.
B4004A L1 14
End of basic display information
… next an introduction to files, strings, colours and layout …
B4004A L1 15
First, create a new project in IntelliJ called …
On Your Bike – Chapter3 – Pearson
B4004A L1 16
Select preferred AVD
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
B4004A L1 18
... go back to IntelliJ AVD Manager …
Select ‘Create’ and complete as
required to create a new AVD
B4004A L1 19
Here’s an example of setting up AVD
Select ‘Snapshot’ and
the AVD will load quicker
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
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>
B4004A L1 22
Run the project … this is the result …
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>
B4004A L1 24
… and run the project …
The text changes to Hello World
from Pearson!!
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>
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
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
B4004A L1 28
Run the project again…
Here we see ‘Explanation’
and the hexadecimal
color
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)
B4004A L1 30
MyActivity.java calls main.xml shown in last line of code
B4004A L1 31
… turning now to the Graphical Interface
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
B4004A L1 33
Graphical Interface
Select Design tab in IntelliJ
B4004A L1 34
Drag a button over to the graphical interface
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
B4004A L1 36
The button is included, and now the layout, needs reformatting
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
B4004A L1 38
Layout may be controlled by IntelliJ’s Component Tree, or by xml
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>
B4004A L1 40
… turning to ‘Activities’….
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;
B4004A L1 42
Create a New Activity
• Create new project as you would a “Hello World”, and name it “Create New Activity”
B4004A L1 43
Create a New Button using the GUI
TIP: Select the file main.xml and then click the Design tab
B4004A L1 44
Here’s the xml for the New Button
B4004A L1 45
Change the text on the button
B4004A L1 46
Start to create the Activity 2 Java class file
B4004A L1 47
Complete, do not tick boxes, click ok
B4004A L1 48
You now have a new class file, called Activity2.java
B4004A L1 49
Copy this line of code over to Activity2
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.
B4004A L1 51
Navigate to ‘layout’ and create new file named ‘activity2’
B4004A L1 52
… and here it is with default xml created for you …
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.
B4004A L1 54
Using GUI, insert ‘Small Text’ on activity2.xmlChange text to ‘This is Activity 2 text’
B4004A L1 55
Add this block of code ‘buttonOnClick’
B4004A L1 56
Link the button ‘onClick’ to the method
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;
B4004A L1 58
Run the code, view in Emulator, click the button …
B4004A L1 59
… and here is the second activity …
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.
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
End of presentation
© Pearson College 2013
B4004A L1 63