Download 4.GUI

Mobile Computing
GUI (Graphical
User Interface)
Assg
1
Copyright 2014 by Janson Industries
Objectives
▀
Learn about:
 Building
a GUI using XML
 Using
basic GUI components and
listeners
 Casting
 An
Android project’s internal
structure
 Publishing
device
Copyright 2014 by Janson Industries
an app to your mobile
2
Resources
▀
The other “things” that
comprise the Android app
 Pictures
 Values
 Text
files
 Screen
▀
Copyright 2014 by Janson Industries
definitions
Screen definitions can be
defined programmatically
using java or in a separate file
using XML
3
Java vs. XML
▀
Which way is better? XML
 If
using java, must run java program
to see UI
 If
screen used by many programs,
best to define once in XML
 Most
apps (98%?) use XML
 Most
help will discuss XML not java
 If
multiple UIs (tablet, phone),
system will select best XML defined
UI for device
 There
Copyright 2014 by Janson Industries
are GUI tools to generate and
4
view the XML screen definition
XML
▀
Extensible Markup Language
 Basically
▀
Can do a lot more than just
layouts
As
▀
the duct tape of apps
you will see later in the course
Like HTML comprised mostly of
paired tags
5
Copyright 2014 by Janson Industries
Screen Definition


Stored in a separate file in
res/layout
All XML files begin with a
declaration of the xml version
and encoding as follows
<?xml version="1.0" encoding=“UTF-8"?>
 There’s
actually only one version
of XML but in the future that may
not be true
 Also,
XML parsers are supposed
to reject any file without it
Copyright 2014 by Janson Industries
6
Screen Definition
 Encoding
identifies the character
set being used
 UTF

means Unicode
Next a layout is specified using
layout tags
A
layout defines how the individual
GUI components will be
positioned on the screen

Copyright 2014 by Janson Industries
All GUI component definitions
are within the layout tags
7
Layouts

Lots of different kinds
 TableLayout,
FrameLayout,
RelativeLayout

A LinearLayout organizes the
screen into a series of bands
Good resource for more info:
http://code.tutsplus.com/tutorials/android-sdk-user-interface-design--mobile-20323
8
Copyright 2014 by Janson Industries
LinearLayout

In the layout start tag must identify
the XML name space (xmlns)
 The
location of predefined XML
elements and attributes
 i.e.
The name space contains the
definitions of a button, text view, etc.

Also, gives the namespace an
alias. E.g.:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 The
Copyright 2014 by Janson Industries
alias is android
9
LinearLayout


The screen definition can now
use any of the attributes or
elements in the namespace
For example, the layout’s
 Orientation
 Width,
Height
 Background Color (black)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
10
android:background="#000000">
Copyright
2014 by Janson Industries
LinearLayout



Vertical means the layout bands
will be arranged from top to
bottom:
Fill parent means it will take up
the whole screen width or height
Need an end LinearLayout tag
</LinearLayout>
Copyright 2014 by Janson Industries
11
GUI Components


All the GUI components (aka
views, widgets, or controls) go
between the start and end layout
tags
A TextView displays static text
<TextView
android:layout_width="fill_parent"
android:layout_height=“fill_parent"
android:text="This is an example of some static text that is more
than one line in length“
android:textSize = ".25in"
android:textColor=“#ffffff” />
12
Copyright 2014 by Janson Industries
GUI Components


Once again, width and height
declared, this time based on
layout size (i.e. parent)
Foreground color (white) and size
defined with textColor & textSize
<TextView
android:layout_width="fill_parent"
android:layout_height=“fill_parent"
android:text="This is an example of some static text that is more than one
line in length“
android:textSize = ".25in"
android:textColor=“#ffffff” />
13
Copyright 2014 by Janson Industries
GUI Components

Putting all the XML together
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#000000"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="This is an example of some static text that is more than
one line in length“
android:textSize = ".25in"
android:textColor="#ffffff" />
</LinearLayout>
14
Copyright 2014 by Janson Industries
GUI

As mentioned, screen definition
must be stored in a file in
res/layout

Create a file called example1.xml

Enter the XML
15
Copyright 2014 by Janson Industries
File , New, File
16
Copyright 2014 by Janson Industries
Initially brings up a Graphical Layout editor – not very good
Copyright 2014 by Janson Industries Switch to source code view
17
Enter XML (from earlier slide – beware copying quotation marks!) and
error icons displayed
Save source code and error icons will be removed
18
Copyright 2014 by Janson Industries
Will flag the text statement with a warning. (Yield sign with ! and
statement underlined with yellow squiggly.) Warnings won’t stop
app from executing. However, defining text/strings in xml or java
code is frowned on by Android/Eclipse because of redundancy.
Have to update the application to display example1.xml
19
Copyright 2014 by Janson Industries
GUI

In HowdyActivity’s onStart need
to put the following statement
setContentView(R.layout.example1);

As the name implies,
setContentView displays the
screen
 HowdyActivity
inherited
setContentView from Activity

Copyright 2014 by Janson Industries
R is a class that is generated
when the XML is compiled
20
GUI



Within R is a class called layout
(which corresponds to the folder
layout)
Within layout is a “link” to the
compiled XML (example1)
Need to modify onStart (in
HowdyActivity) as follows
protected void onStart(){
super.onStart();
setContentView(R.layout.example1);
}
Copyright 2014 by Janson Industries
21
Run the app
Now you do it!
22
Copyright 2014 by Janson Industries
Input To Application



A little more complicated
An EditText view allows user to
enter and change text
EditText content can be read by
app
<EditText android:id=”@+id/userName”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent” />
23
Copyright 2014 by Janson Industries
Input To App

Width and height the same as
before

id is new attribute

Defines a name for the view
 Need
to be able to identify the
view so we can read it
<EditText android:id=”@+id/userName”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent” />
24
Copyright 2014 by Janson Industries
Input to App

Will change TextView also
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#000000"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height= "wrap_content"
android:text="What is your name? "
android:textSize = ".25in"
android:textColor="#ffffff"/>
<EditText android:id= "@+id/userName"
android:textColor="#ffffff"
android:layout_width= "fill_parent"
android:layout_height= "wrap_content" />
Copyright 2014 </LinearLayout>
by Janson Industries
25
We changed the height so that the EditText doesn’t fill the whole
screen from top to bottom
Now when run looks like this
26
Copyright 2014 by Janson Industries
Input to App
▀
To read EditText, need to:
 Import
the EditText class
► import
 Define
android.widget.EditText;
an EditText class level variable
► EditText
name;
 Retrieve
the EditText (userName) and
assign it to name
► name
=
(EditText)findViewById(R.id.userName);
• findViewById inherited from Activity
 Retrieve
the text
► name.getText()
Copyright 2014 by Janson Industries
• EditText has a method called getText
27
Input to App
▀
The read will be done in the
onRestart method and we will
display the name in LogCat
28
Copyright 2014 by Janson Industries
Run app, specify a name then stop app by clicking the home button
29
Copyright 2014 by Janson Industries
Input to App
▀
▀
Rerun app (to restart it)
Kind of a round about way to do
the read (stopping and
rerunning the app)
30
Copyright 2014 by Janson Industries
HowdyActivity
▀
Want to change app such:
 User
enters a name
 User
clicks a button
 Info
▀
displayed in the textview
Will need a button tied to a listener
to make this happen
31
Copyright 2014 by Janson Industries
Like this…
32
Copyright 2014 by Janson Industries
Msg displayed and name blanked out
33
Copyright 2014 by Janson Industries
Listener
▀
▀
A java class that reacts to an action
Some components can be tied to a
listener. Can do this:
Programmatically
In
▀
using Java
the screen def using XML
Which way is better?
Well,
the XML is much simpler!
34
Copyright 2014 by Janson Industries
Listeners
▀
When an action is performed on
the component (e.g. it is clicked),
the listener is invoked
Specifically,
a particular method
in the listener (e.g. onClick) is
invoked
35
Copyright 2014 by Janson Industries
Listeners
▀
In XML:
 Change
the initial text in the TextView
 To
be able to change the content of the
TextView, it needs an id
<TextView android:id="@+id/greeting"
android:text="Enter your name and click Submit "
 Add
a button under the EditText
<Button android:id= "@+id/submit"
android:layout_width= "fill_parent"
android:layout_height= "wrap_content"
android:text= "Submit" />
36
Copyright 2014 by Janson Industries
The XML
37
Copyright 2014 by Janson Industries
Listeners - Java Implementation
▀
▀
For a class to be a listener:
 Must
implement OnClickListener
 Have
an onClick method
So, in HowdyActivity must
 Implement
listener in the class header
…extends Activity implements OnClickListener{
 Create
an onClick method
public void onClick(View v) {}
38
Copyright 2014 by Janson Industries
Listeners
 onClick
will:
► put
text in the TextView and work with the
button, so need to add these imports
import
import
import
import
► get
android.view.View;
android.view.View.OnClickListener;
android.widget.TextView;
android.widget.Button;
the TextView and EditText objects
name = (EditText)findViewById(R.id.userName);
TextView greeting = (TextView)findViewById(R.id.greeting);
► get
name from EditText, build msg, set
TextView text to msg
greeting.setText("Hi " + name.getText() + ". Nice to meet you.");
39
Copyright 2014 by Janson Industries
Listeners
► Blank
out the name in the EditText
name.setText("");
 In
onStart, retrieve the button object
and tie the listener (this object, aka
HowdyActivity) to the button
Button button = (Button)findViewById(R.id.submit);
button.setOnClickListener(this);
40
Copyright 2014 by Janson Industries
41
Copyright 2014 by Janson Industries
Run app, notice new text and the button
42
Copyright 2014 by Janson Industries
Enter a name and click the Submit button
43
Copyright 2014 by Janson Industries
New msg displayed and name blanked out
44
Copyright 2014 by Janson Industries
XML Implementation
▀
In XML button definition, specify
the method to call when clicked
android:onClick="submitClicked"
▀
Define submitClicked method to
perform onClick functions
public void submitClicked(View v){
greeting.setText("Hi " + name.getText() + ". Nice to meet you.");
name.setText("");
}
45
Copyright 2014 by Janson Industries
XML File
46
Copyright 2014 by Janson Industries
Commented out
Added code
Commented out
Added code
Commented out
47
Copyright 2014 by Janson Industries
How Does This Work?
▀
(EditText)findViewById(R.id.userName);
brings up a couple of topics
 Primitive
Variables
 Casting
► Converting
from a larger/general type to a
smaller/more specific type
 Internal
structure of an Android project
► gen
► assets
► bin
► res
Copyright 2014 by Janson Industries
48
Primitive Variable Types
▀
boolean: true or false (default is false)
▀
char: single character, use single quotes
▀
byte: 8 bit whole number (-128 to 127)
▀
short: 16 bit whole number (32,767 max)
▀
int: 32 bit whole number (2**31 max)
▀
long: 64 bit whole number
▀
float: floating point (7 decimal place max)
▀
double: double precision (15 dec places)
49
Copyright 2014 by Janson Industries
Primitive Variable Name Rules
▀
Must begin with a character
 Traditionally
a lower case character
▀
Can be made of letters, numbers, _, or $
▀
No
 Special
characters (%, #, @, etc.)
 Spaces
 Reserved
▀
words (char, byte, class, etc.)
Are case sensitive!!
 age
and aGe are two different variables
50
Copyright 2014 by Janson Industries
Defining and Assigning
▀
Primitive data type then variable
name
int
numberOfDependents;
char gender, maritalStatus;
▀
A value can be assigned when the
variable is declared:
float
▀
taxRate = .28;
Or a value can be assigned later:
numberOfDependents
Copyright 2014 by Janson Industries
= 2;
51
Primitive Variable Types
▀
Defining and assigning values very
similar to String variables
boolean married = true, genderMale = false;
int age = 22;
float weeklySalary = 1285.75;
▀
▀
Notice, no quotes around values or
thousands separator
Easy to assign the value in a smaller
variable type to a larger variable type
weeklySalary = age;
Copyright 2014 by Janson Industries
52
Casting
▀
▀
To assign the value in a larger
variable type to a smaller variable
type you must cast the larger
variable type into the smaller type
General syntax:
smallerVariable = (smallerVariableType) largerVariable
▀
So to move weeklySalary into age:
age = (int) weeklySalary;
▀
Problem: age now equals 1285
53
Copyright 2014 by Janson Industries
Casting Primitive Types
▀
Other examples:
long a; int b = 1; char c = ‘2’;
b = (int)a;
c = (char)b;
54
Copyright 2014 by Janson Industries
Casting
▀
Earlier we talked about how all
classes are related
Object
View
TextView
EditText
▀
View is a subclass of Object,
TextView is a subclass of View, etc.
55
Copyright 2014 by Janson Industries
Casting
▀
▀
▀
Another way to say it that View is a
more specific type of Object,
TextView is a more specific type of
View, etc.
When findViewById returns the GUI
component we requested, it is
returned as a View
For us to access the TextView or
EditText, we have to cast the View
into the more specific type
56
Copyright 2014 by Janson Industries
Casting
▀
▀
▀
(EditText)findViewById(R.id.userName);
In this example the returned View is
cast as an EditText (and should be
assigned to an EditText variable)
So to access all of the retrieved GUI
component’s functions, the returned
View has to be cast into the subclass
type
57
Copyright 2014 by Janson Industries
Android Project Structure
▀
▀
gen – a package containing AAPT
(Android Asset Packaging Tool)
generated java code
assets – folder to hold any type of
resource/file
 Supports
▀
▀
bin – holds class files & resources in
a specific structure for app installation
res – folder to hold specific resources
like images and layouts
 Does
Copyright 2014 by Janson Industries
subfolders
not support subfolders
58
Android Project Structure
▀
▀
Will talk more about res when working
with images
Two things we do need to cover
 values
 R.java
▀
values, in res, holds application wide
values (colors, dimensions, fonts, etc.)
 Instead
of defining values in java,
define them once in a file in values
 Adv:
can change values without
recompiling java code
Copyright 2014 by Janson Industries
59
Android Project Structure
▀
For example strings.xml
 Instead
of defining String objects and
assigning text in various java classes
define them with xml in strings.xml
▀
When app created, strings.xml
generated with the following 3 strings
defined
<resources>
<string name="app_name">Howdy</string>
<string name="action_settings">Settings</string>
<string name="hello_world">Hello world!</string>
</resources>
60
Copyright 2014 by Janson Industries
Android Project Structure
▀
Notice that the default screen
definition, activity_howdy, references
hello_world and dimension values
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".HowdyActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
61
</RelativeLayout>
Copyright 2014 by Janson Industries
Android Project Structure
▀
Advantages to values:
 Defined
► Takes
one time therefore:
up less space
► Updating
► Less
faster
chance of errors when updating
 Defined
in xml therefore no need to
recompile java code when making
changes
62
Copyright 2014 by Janson Industries
Android Project Structure
▀
▀
How to reference the resources in res
in java programs is a little complicated
This is where R.java comes in
 R.java
stored in a package with the
same name as the app package in the
folder gen
 Generated
by AAPT when application
built (and when changes are made)
▀
Copyright 2014 by Janson Industries
R contains the project ids of all objects
defined in res
63
Android Project Structure
▀
All resources in res are compiled
 Converted
into binary and packaged
so they can be loaded on a device
▀
Each resource is given a unique
project id
 For
each resource in res, an int
variable is created (with the same
name as the resource) in R.java
 The resource project id is assigned to
the int variable
▀
Copyright 2014 by Janson Industries
The int variables are grouped (by
type) into inner classes within R.java 64
▀
To refer
to a
resource
specify R,
then the
inner
class
name,
then the
variable
name
65
Copyright 2014 by Janson Industries
Android Project Structure
▀
▀
▀
(EditText)findViewById(R.id.userName);
Which is how we referred to the
EditText in the above
Again, in an XML layout definition,
when @+id/xxxx is specified for a view:
▀
▀
▀
Copyright 2014 by Janson Industries
A project id is generated
An int variable named xxxx is created in
the id inner class
The project id is assigned to the int
variable xxxx
66
How Does This Work?
name = (EditText)findViewById(R.id.userName);
greeting = (TextView)findViewById(R.id.greeting);
▀
▀
Copyright 2014 by Janson Industries
To work with the screen views
we have to retrieve them and
assign them to variables in the
activity
findViewById (inherited from
Activity) retrieves the object for
the project id number in the int
variable
67
How Does This Work?
name = (EditText)findViewById(R.id.userName);
greeting = (TextView)findViewById(R.id.greeting);
▀
▀
Unfortunately the system returns
the components as View objects
So we need to cast from the
more general object type (View)
to the more specific object type
(EditText, TextView, etc.)
68
Copyright 2014 by Janson Industries
View Properties
▀
Instead of setting a view’s width
to fill_parent, can specify
wrap_content
android:layout_width="wrap_content"
▀
Since the view doesn’t fill the
parent, can specify the gravity
(justification)
android:layout_gravity="center"
69
Copyright 2014 by Janson Industries
70
Copyright 2014 by Janson Industries
EditText and Button sizes dictated by its text content
71
Copyright 2014 by Janson Industries
View Attributes
▀
height – view set to a specific size
▀
textColor
▀
textSize
▀
textStyle - (bold, italic)
▀
width – view set to specific size
▀
Sizes can be specified many ways
 px
Copyright 2014 by Janson Industries
- Pixels
 in – Inches
 mm – Millimeters
 dp – Density-independant Pixels
(preferred)
72
73
Copyright 2014 by Janson Industries
74
Copyright 2014 by Janson Industries
Input Accepting Views
▀
digits – only specified numeric
characters can be entered (digits=“135”)
▀
hint – defines text for view when empty
▀
inputType
 textAutoCorrect
 number
 phone
–corrects some misspellings
– only numeric characters allowed
- only phone keypad characters allowed
 date
– only date chars (numbers, /, ., -)
 time
– only time chars (numbers, :, a, p, m)
75
Copyright 2014 by Janson Industries
Hint default color is gray – doesn't show up on black background – so
have to set it to a color that will show
76
Copyright 2014 by Janson Industries
77
Copyright 2014 by Janson Industries
Enter adn and then…
78
Copyright 2014 by Janson Industries
… enter a space
79
Copyright 2014 by Janson Industries
80
Copyright 2014 by Janson Industries
Initial display, click on EditText and type and
81
Copyright 2014 by Janson Industries
All letters converted to numbers according to a phone keypad
No delete, only backspace allowed
82
Copyright 2014 by Janson Industries
However none of these options can prevent all nonsense input
83
Copyright 2014 by Janson Industries
Installing on a
Device
▀
▀
▀
Have to enable USB
debugging
On the device, go to
Settings, Scroll down to
SYSTEM and click
Developer Options
On an Android 4.0 device,
may have to turn Developer
options on
84
Copyright 2014 by Janson Industries
Installing on a
Device
▀
▀
To turn Developer options on,
tap About phone in SYSTEM
area
Scroll to the bottom and tap
Build number 7 times
the 3rd tap a dialog will
be displayed saying your only
4 taps away from being a
developer
 After
▀
Copyright 2014 by Janson Industries
Make sure USB Debugging is
checked
85
Installing on a Device
▀
To install from Win 7 for the first time
 If
not Win7 go here for instructions
► http://developer.android.com/tools/extras
/oem-usb.html
▀
Connect your Android-powered device
to your computer's USB port
 Win
7 will try to install drive software
 Won’t find the driver
86
Copyright 2014 by Janson Industries
Installing on a Device
▀
▀
▀
Right-click on Computer from your
desktop or Windows Explorer and
select Manage
Select Device Manager in the left
pane
Expand Other device in the center
pane
87
Copyright 2014 by Janson Industries
Right click device name and select Update Driver Software
88
Copyright 2014 by Janson Industries
Driver software in the SDK, so select Browse my computer
89
Copyright 2014 by Janson Industries
Navigate to android-sdk then go to \extras\google\usb_driver\
90
Copyright 2014 by Janson Industries
Click Next
91
Copyright 2014 by Janson Industries
If you have a developer phone (like I do) need either the Google USB
Driver (for a Nexus One, or a Nexus S) or a Galaxy Nexus driver from
Samsung (listed as model SCH-I515) instead of the OEM driver in the
android-sdk
92
Copyright 2014 by Janson Industries
http://www.samsung.com/us/support/downloads/verizonwireless/SCH-I515MSAVZW
93
Copyright 2014 by Janson Industries
94
Copyright 2014 by Janson Industries
Scroll to bottom click on Software tab then click EXE
95
Copyright 2014 by Janson Industries
Disclaimer
96
Copyright 2014 by Janson Industries
Select Save as and save to the Mobile folder
97
Copyright 2014 by Janson Industries
Go back and specify new location
Double click to run
98
Copyright 2014 by Janson Industries
99
Copyright 2014 by Janson Industries
100
Copyright 2014 by Janson Industries
Note the install location
101
Copyright 2014 by Janson Industries
102
Copyright 2014 by Janson Industries
If you start over and specify where you installed to
(C:\Program Files\SAMSUNG\USB Drivers)
103
Copyright 2014 by Janson Industries
104
Copyright 2014 by Janson Industries
When app run, device & any running emulators are given as choices
If no emulators running, will automatically install and run on the
attached device
Else, select the device and click OK. App will be installed and run.
HowdyActivity icon will now appear in the apps menu
105
Copyright 2014 by Janson Industries
106
Copyright 2014 by Janson Industries
Assg
▀
Create a project called Assg1
 Build
▀
▀
level should be 2.1
Create an activity called Add
Initial screen display should look
like this…
107
Copyright 2014 by Janson Industries
▀
Note:
 The
alignment of the
views
 Text
 Text
alignment
 Colors
108
Copyright 2014 by Janson Industries
▀
▀
The user enters two
numbers
Note:
 Only
numbers can be
entered
▀
When the user clicks
Add…
109
Copyright 2014 by Janson Industries
▀
The numbers are
blanked out
▀
The “result” is displayed
▀
Extra credit (10 points)
 Have
add actually do
the addition
 Meaning,
when the user
clicks Add…
110
Copyright 2014 by Janson Industries
▀
The real result is
displayed
111
Copyright 2014 by Janson Industries
Assg
▀
To turn in an Assg
 Export
the project as an Archive file
► Put
your initials in the name of the
archive file
 Send
the Archive file as an email
attachment to [email protected]
▀
To export as an Archive file…
112
Copyright 2014 by Janson Industries
Right click the project name and select Export
Expand General, select Archive File and click Next
113
Copyright 2014 by Janson Industries
Specify the location to save to and the file name with your initials
Click Finish
Copyright 2014 by Janson Industries
114
Verify that is was created
115
Copyright 2014 by Janson Industries