1 mobile computing gui (graphical user interface) copyright 2014 by janson industries assg

1

Mobile Computing

GUI (Graphical

User Interface)

Copyright 2014 by Janson Industries

Assg

Copyright 2014 by Janson Industries2

Objectives▀ Learn about:

Building a GUI using XML

Using basic GUI components and listeners

Casting

An Android project’s internal structure

Publishing an app to your mobile device


Resources▀ The other “things” that comprise

the Android app Pictures

Values

Text files

Screen definitions

▀ Screen definitions can be defined programmatically using java or in a separate file using XML


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 are GUI tools to generate and

view the XML screen definition


XML▀ Extensible Markup Language

Basically the duct tape of apps

▀ Can do a lot more than just layouts As you will see later in the course

▀ Like HTML comprised mostly of paired tags


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

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

<?xml version="1.0" encoding=“UTF-8"?>


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

All GUI component definitions are within the layout tags


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


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.:

The alias is android

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"


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" android:background="#000000">


11

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>


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” />


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” />


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>


GUI As mentioned, screen definition

must be stored in a file in res/layout

Create a file called example1.xml

Enter the XML


File , New, File


Initially brings up a Graphical Layout editor – not very goodSwitch to source code view


Enter XML (from earlier slide – beware copying quotation marks!) and error icons displayed

Save source code and error icons will be removed


Have to update the application to display example1.xml

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.


GUI In HowdyActivity’s onStart need to

put the following statement

As the name implies, setContentView displays the screen HowdyActivity inherited

setContentView from Activity

R is a class that is generated when the XML is compiled

setContentView(R.layout.example1);


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 followsprotected void onStart(){

super.onStart(); setContentView(R.layout.example1);}


Run the app

Now you do it!


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”

/>


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”

/>


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" />

</LinearLayout>


Now when run looks like this

We changed the height so that the EditText doesn’t fill the whole screen from top to bottom


Input to App▀ To read EditText, need to:

Import the EditText class► import android.widget.EditText;

Define 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()

• EditText has a method called getText


Input to App▀ The read will be done in the

onRestart method and we will display the name in LogCat


Run app, specify a name then stop app by clicking the home button


Input to App▀ Rerun app (to restart it)

▀ Kind of a round about way to do the read (stopping and rerunning the app)


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


Like this…


Msg displayed and name blanked out


Listener▀ A java class that reacts to an action

▀ Some components can be tied to a listener. Can do this:

Programmatically using Java

In the screen def using XML

▀ Which way is better?

Well, the XML is much simpler!


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


Listeners▀ In XML:

Change the initial text in the TextView

To be able to change the content of the TextView, it needs an id

Add a button under the EditText

<TextView android:id="@+id/greeting"android:text="Enter your name and click Submit "

<Button android:id= "@+id/submit" android:layout_width= "fill_parent" android:layout_height= "wrap_content" android:text= "Submit" />


The XML


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

Create an onClick methodpublic void onClick(View v) {}

…extends Activity implements OnClickListener{


Listeners onClick will:

►put text in the TextView and work with the button, so need to add these imports

►get the TextView and EditText objects

►get name from EditText, build msg, set TextView text to msg

name = (EditText)findViewById(R.id.userName);TextView greeting = (TextView)findViewById(R.id.greeting);

greeting.setText("Hi " + name.getText() + ". Nice to meet you.");

import android.view.View;import android.view.View.OnClickListener;import android.widget.TextView;import android.widget.Button;


Listeners►Blank out the name in the EditText

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);

name.setText("");


Run app, notice new text and the button


Enter a name and click the Submit button


New msg displayed and name blanked out


XML Implementation▀ In XML button definition, specify

the method to call when clicked

▀ Define submitClicked method to perform onClick functions

android:onClick="submitClicked"

public void submitClicked(View v){greeting.setText("Hi " + name.getText() + ". Nice to meet

you.");name.setText("");

}


XML File


Commented out

Commented out

Commented out

Added code

Added code


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


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)


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


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 = 2;


Primitive Variable Types▀ Defining and assigning values very similar to String variables

▀ Notice, no quotes around values or thousands separator

▀ Easy to assign the value in a smaller variable type to a larger variable typeboolean married = true, genderMale = false;int age = 22;float weeklySalary = 1285.75;

weeklySalary = age;


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:

▀ So to move weeklySalary into age:

▀ Problem: age now equals 1285

age = (int) weeklySalary;

smallerVariable = (smallerVariableType) largerVariable


Casting Primitive Types

▀ Other examples:

long a; int b = 1; char c = ‘2’;

b = (int)a;

c = (char)b;


Casting▀ Earlier we talked about how all classes are related

▀ View is a subclass of Object, TextView is a subclass of View, etc.Object

View

TextView

EditText


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


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


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 subfolders

▀ bin – holds class files & resources in a specific structure for app installation

▀ res – folder to hold specific resources like images and layouts Does not support subfolders


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


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>


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" /></RelativeLayout>


Android Project Structure▀ Advantages to values:

Defined one time therefore:

►Takes up less space

►Updating faster

►Less chance of errors when updating

Defined in xml therefore no need to recompile java code when making changes


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)

▀ R contains the project ids of all objects defined in res


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

▀ The int variables are grouped (by type) into inner classes within R.java


▀ To refer to a resource specify R, then the inner class name, then the variable name


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:▀ 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


How Does This Work?

▀ 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

name = (EditText)findViewById(R.id.userName);greeting = (TextView)findViewById(R.id.greeting);


How Does This Work?

▀ 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.)

name = (EditText)findViewById(R.id.userName);greeting = (TextView)findViewById(R.id.greeting);


View Properties▀ Instead of setting a view’s width

to fill_parent, can specify wrap_content

▀ Since the view doesn’t fill the parent, can specify the gravity (justification)

android:layout_width="wrap_content"

android:layout_gravity="center"


70


EditText and Button sizes dictated by its text content


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 - Pixels in – Inches mm – Millimeters dp – Density-independant Pixels

(preferred)


Input Accepting Views▀ digits – only specified numeric

characters can be entered (digits=“135”)

▀ hint – defines text for view when empty

▀ inputType textAutoCorrect –corrects some misspellings

number – only numeric characters allowed

phone - only phone keypad characters allowed

date – only date chars (numbers, /, ., -)

time – only time chars (numbers, :, a, p, m)


Hint default color is gray – doesn't show up on black background – so have to set it to a color that will show


Enter adn and then…


… enter a space


Initial display, click on EditText and type and


All letters converted to numbers according to a phone keypadNo delete, only backspace allowed


However none of these options can prevent all nonsense input


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


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 After the 3rd tap a dialog will be

displayed saying your only 4 taps away from being a developer

▀ Make sure USB Debugging is checked


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


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


Right click device name and select Update Driver Software


Driver software in the SDK, so select Browse my computer


Navigate to android-sdk then go to \extras\google\usb_driver\


Click Next


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


http://www.samsung.com/us/support/downloads/verizon-wireless/SCH-I515MSAVZW


Scroll to bottom click on Software tab then click EXE


Disclaimer


Select Save as and save to the Mobile folder


Go back and specify new location

Double click to run


Note the install location


If you start over and specify where you installed to (C:\Program Files\SAMSUNG\USB Drivers)


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


Assg▀ Create a project called Assg1

Build level should be 2.1

▀ Create an activity called Add

▀ Initial screen display should look like this…


▀ Note:

The alignment of the views

Text

Text alignment

Colors


▀ The user enters two numbers

▀ Note:

Only numbers can be entered

▀ When the user clicks Add…


▀ 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…


▀ The real result is displayed


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…


Right click the project name and select Export

Expand General, select Archive File and click Next


Specify the location to save to and the file name with your initials

Click Finish


Verify that is was created

1 mobile computing gui (graphical user interface) copyright 2014 by janson industries assg

Documents