lecture 4 display_principles

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