cs 528 mobile and ubiquitous computing lecture 02b
TRANSCRIPT
![Page 1: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/1.jpg)
CS 528 Mobile and Ubiquitous ComputingLecture 02b: Android UI Design
Emmanuel Agu
![Page 2: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/2.jpg)
Resources
![Page 3: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/3.jpg)
Android Resources
Resources? Images, strings, dimensions, layout files, menus, etc that your app uses
Basically app elements declared in other files Easier to update, maintain code
![Page 4: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/4.jpg)
Declaring Strings in Strings.xml
Can declare all strings in strings.xml
Then reference in any of your app’s xml files
String declaration in strings.xml
![Page 5: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/5.jpg)
Strings in AndroidManifest.xml
Strings declared in strings.xml can be referenced by all other XML files (activity_my.xml, AndroidManifest.xml)
String declaration in strings.xml
String usage in AndroidManifest.xml
![Page 6: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/6.jpg)
Where is strings.xml in Android Studio?Editting any string in strings.xml changes it
wherever it is displayed
![Page 7: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/7.jpg)
Styled Text
In HTML, tags can be used for italics, bold, etc E.g. <i> Hello </i> makes text Hello
<b> Hello <b> makes text Hello
Can use the same HTML tags to add style (italics, bold, etc) to Android strings
![Page 8: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/8.jpg)
Android Themes
![Page 9: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/9.jpg)
Styles
Android widgets have properties E.g. Foreground color = red
Styles in Android: specifies properties for multiple attributes of 1 widget
E.g. height, padding, font color, font size, background color
Similar to Cascaded Style Sheets (CSS) in HTML
Themes apply styles to all widgets in an Activity (screen) E.g. all widgets on a screen can adopt the same font
Example Android themes: Theme, Theme.holo and Theme.material)
![Page 10: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/10.jpg)
Examples of Themes in Use
GMAIL in Holo Light Settings screen in Holo Dark
![Page 11: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/11.jpg)
Default Themes
Many pre-defined themes to choose from
Android chooses a default theme if you specify none
Theme.Material: default theme
in Android 5.0Theme.Holo: default theme
in Android 3.0
![Page 12: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/12.jpg)
Adding Pictures in Android
![Page 13: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/13.jpg)
Phone Dimensions Used in Android UI
Physical dimensions (inches) diagonally E.g. Nexus 4 is 4.7 inches diagonally
Resolution in pixels E.g. Nexus 4 resolution 768 x 1280 pixels
Pixels diagonally: Sqrt[(768 x 768) + (1280 x 1280) ]
Pixels per inch (PPI) = Sqrt[(768 x 768) + (1280 x 1280) ] / 4.7= 318
![Page 14: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/14.jpg)
Adding Pictures
Android supports images in PNG, JPEG and GIF formats
Put different resolutions of same image into different directories
res/drawable-ldpi: low dpi images (~ 120 dpi of dots per inch)
res/drawable-mdpi: medium dpi images (~ 160 dpi)
res/drawable-hdpi: high dpi images (~ 240 dpi)
res/drawable-xhdpi: extra high dpi images (~ 320 dpi)
res/drawable-xxhdpi: extra extra high dpi images (~ 480 dpi)
res/drawable-xxxhdpi: high dpi images (~ 640 dpi)
![Page 15: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/15.jpg)
Adding Pictures
Use generic picture name in code (no .png, .jpg, etc)
E.g. to reference an image ic_launcher.png
At run-time, Android chooses which resolution/directory (e.g. –mdpi) based on phone resolution
Image Asset Studio: generates icons in various densities from original image
Ref: https://developer.android.com/studio/write/image-asset-studio.html
![Page 16: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/16.jpg)
Android UI Youtube Tutorials
![Page 17: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/17.jpg)
YouTube Tutorial 11 & 12 from thenewBoston
Tutorial 11: Designing the User Interface [6:19 mins] https://www.youtube.com/watch?v=72mf0rmjNAA
Designing the UI
Adding activity (screen)
Dragging in widgets
Changing the text in widgets
Tutorial 12: More on User Interface [10:24 mins] https://www.youtube.com/watch?v=72mf0rmjNAA
Changing text in widgets
Changing strings from hardcoded to string resources (variables)
![Page 18: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/18.jpg)
Tutorial 17: GridLayout Tutorial 17: GridLayout [9:40 mins]
(https://www.youtube.com/watch?v=4bXOr5Rk1dk
Creating GridLayout: Layout that places its children in a grid
Add widgets (buttons) to GridLayout
Format width, height, position of widgets
![Page 19: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/19.jpg)
WebView Widget
![Page 20: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/20.jpg)
WebView Widget
A View that displays web pages Can be used for creating your own web browser
OR just display some online content inside your app
20
![Page 21: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/21.jpg)
WebView Widget
Since Android 4.4, webviews rendered using:
Chromium open source project, engine used in Google Chrome browser (http://www.chromium.org/)
Webviews on earlier Android versions supported webkit, which is used in many web browsers including Safari
21
![Page 22: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/22.jpg)
WebView Widget Functionality
Supports HTML5, CSS3 and JavaScript
Navigate previous URLs (back and forward)
zoom in and out
perform searches
Can also: Embed images in page
Search page for strings
Handle cookies
22
![Page 23: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/23.jpg)
WebView Example
Simple app to view and navigate web pages
XML code (e.g in res/layout/main.xml)
23
![Page 24: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/24.jpg)
WebView Activity
In onCreate, use loadURL to specify website to load
If website contains Javascript, enable Javascript
loadUrl( ) can also load files on Android local filesystem (file://)
![Page 25: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/25.jpg)
WebView: Request Internet Access
In AndroidManifest.xml, request owner of phone to grant permission to use Internet
25
![Page 26: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/26.jpg)
Android UI Design Example
![Page 27: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/27.jpg)
GeoQuiz AppRef: Android Nerd Ranch (3rd edition), pgs 1-30
App presents questions to test user’s knowledge of geography
User answers by pressing True or False buttons
How to get this book?Question
User responds
by clicking True
or False
App grades
User’s response
Using toast msg
![Page 28: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/28.jpg)
GeoQuiz App
2 main files:
activity_quiz.xml: to format app screen
QuizActivity.java: To present question, accept True/False response
AndroidManifest.xml lists all app components, auto-generated
![Page 29: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/29.jpg)
GeoQuiz: Plan Out App Widgets
5 Widgets arranged hierarchically
![Page 30: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/30.jpg)
GeoQuiz: activity_quiz.xml File listing
![Page 31: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/31.jpg)
GeoQuiz: strings.xml File listing
• Define all strings app will use
• Question: “Canberra is.. “
• True
• False
strings.xml
![Page 32: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/32.jpg)
QuizActivity.java
Initial QuizActivity.java code
Would like java code to respond to True/False buttons being clicked
specify layout XML file (activity_quiz.xml)
onCreate Method is called
once Activity is created
![Page 33: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/33.jpg)
Responding to True/False Buttons in Java
Write code in Java file to specify app’s
response when True/False buttons are clicked
![Page 34: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/34.jpg)
2 Alternative Ways to Respond to Button Clicks
1. In XML: set android:onClick attribute (already seen this!!)
2. In java create a ClickListener object, override onClick method
typically done with anonymous inner class
![Page 35: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/35.jpg)
Recall: Approach 1: Responding to Button Clicks
May want Button press to trigger some action
How?
1. In XML file (e.g. Activity_my.xml),
set android:onClick attribute
to specify method to be invoked
2. In Java file (e.g. MainActivity.java)
declare method/handler to take
desired action
Activity_my.xml MainActivity.java
![Page 36: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/36.jpg)
Approach 2: Create a ClickListener object, override onClick
First, get reference to Button in our Java file. How?
Need reference
to Buttons
![Page 37: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/37.jpg)
QuizActivity.java: Getting References to Buttons
To get reference to buttons in java code
Declaration
in XML
![Page 38: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/38.jpg)
Set listeners for True and False button
QuizActivity.java: Setting Listeners
2.Set Listener Object
For mTrueButton
1. Create listener
object as anonymous
(unnamed) inner object
3. Overide onClick method
(insert your code to do
whatever you want as
mouse response here)
![Page 39: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/39.jpg)
QuizActivity.java: Adding a Toast
A toast is a short pop-up message
Does not require any input or action
After user clicks True or False button, our app will pop-up a toast to inform the user if they were right or wrong
First, we need to add toast strings (Correct, Incorrect) to strings.xml
A toast
![Page 40: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/40.jpg)
QuizActivity.java: Adding a Toast
To create a toast, call the method:
After creating toast, call toast.show( ) to display it
For example to add a toast to our onClick( ) method:
Instance of Activity
(Activity is a subclass
of context)
Resouce ID of the
string that toast
should display
Constant to specifiy
how long toast
should be visible
![Page 41: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/41.jpg)
Code for adding a toast
QuizActivity.java: Adding a Toast
2.Set Listener Object
For mTrueButton
1. Create listener
object as anonymous
innner object
3. Overide onClick method
Make a toast
![Page 42: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/42.jpg)
QuizActivity.java: Complete Listing
package com.bignerdranch.android.geoquiz;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
public class QuizActivity extends Activity {
Button mTrueButton;
Button mFalseButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_quiz);
mTrueButton = (Button)findViewById(R.id.true_button);
mTrueButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(QuizActivity.this,
R.string.incorrect_toast, Toast.LENGTH_SHORT)
.show();
}
});
![Page 43: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/43.jpg)
QuizActivity.java: Complete Listing(Contd)
mFalseButton = (Button)findViewById(R.id.false_button);
mFalseButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(QuizActivity.this,
R.string.correct_toast, Toast.LENGTH_SHORT)
.show();
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu;
// this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_quiz, menu);
return true;
}
}Used if app has an
Action bar menu
![Page 44: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/44.jpg)
Quiz 1
![Page 45: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/45.jpg)
Quiz 1
Quiz next class (Sept 16) before class
Short answer questions
Try to focus on understanding, not memorization
Covers: Lecture slides for lectures 1-2 (including today)
YouTube Tutorials (from thenewboston) 1-8, 11,12, 17
3 code examples from books
HFAD examples: myFirstApp, Beer Advisor
ANR example: geoQuiz
![Page 46: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/46.jpg)
Groups for Projects 2,3 and Final Project
Projects 2,3 and final project done in teams of 4! A bit large for projects 2,3
Great for final project?
Deadline to form groups: by class time on Wed. Sept 16
How? Form teams of 4
ALL members of the group should email me indicating their group
List all team members in their email to me
I’ll put students who don’t have groups into groups
I’ll post list of all students in class. Also set up InstructAssist Forum for discussion
![Page 47: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/47.jpg)
EML: Cooperative Based Groups
![Page 48: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/48.jpg)
EML: Cooperative Based Groups
Japanese students visiting Boston for 2 week vacation
Speak little English, need help to find
Attractions to visit, where to stay (cheap, central), meet Americans, getting around, eat (Japanese, some Boston food), weather info, events, ….. anything
Your task: Search android market for helpful apps (6 mins)
Location-aware: 5 points
Ubicomp (e.g. uses sensor) or smartwatch: 10 points
Also IoT devices they can buy that would help them
![Page 49: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/49.jpg)
Data-Driven Layouts
![Page 50: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/50.jpg)
Data-Driven Layouts LinearLayout, RelativeLayout, TableLayout, GridLayout useful for positioning UI
elements
UI data is hard coded
Other layouts dynamically composed from data (e.g. database) ListView, GridView, GalleryView
Tabs with TabHost, TabControl
lorem
ipsum
dolor
amet
consectetuer
adipiscing
elit
morbi
Generate widgets
from data source
![Page 51: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/51.jpg)
Data Driven Layouts
May want to populate views from a data source (XML file or database)
Layouts that display repetitive child widgets from data source ListView
GridView
GalleryView
ListView Rows of entries, pick item, vertical scroll
![Page 52: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/52.jpg)
Data Driven Containers
GridView List of items arranged in rows and columns
GalleryView List with horizontal scrolling,
typically images
![Page 53: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/53.jpg)
AdapterView ListView, GridView, and GalleryView are sub classes of AdapterView (variants)
Adapter: generates widgets from a data source, populates layout
E.g. Data is adapted into cells of GridView
Most common Adapter types: CursorAdapter: read from database
ArrayAdapter: read from resource (e.g. XML file)
lorem
ipsum
dolor
amet
consectetuer
adipiscing
elit
morbi
Data
Adapter
![Page 54: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/54.jpg)
Adapters
When using Adapter, a layout (XML format) is defined for each child element (View)
The adapter
Reads in data (list of items)
Creates Views (widgets) using layout for each element in data source
Fills the containing layout (List, Grid, Gallery) with the created Views
Child widgets can be as simple as a TextView or more complex layouts / controls
simple views can be declared in a layout XML file
(e.g. android.R.layout)
![Page 55: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/55.jpg)
Example: Creating ListView using AdapterArray
Task: Create listView (on right) from strings below
Enumerated list
ListView
of items
![Page 56: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/56.jpg)
Example: Creating ListView using AdapterArray First create Layout file (e.g. LinearLayout)
ListView for
list of options
TextView Widget for
selected list item
![Page 57: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/57.jpg)
Using ArrayAdapter
Command used to wrap adapter around array of menu items or java.util.List instance
E.g. android.R.layout.simple_list_item_1 turns strings into textView widgets
Context to use.
(e.g app’s activity) Resource ID of
View for formatting Array of items
to display
![Page 58: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/58.jpg)
Example: Creating ListView using AdapterArray
Set list adapter (Bridge
Data source and views)
Get handle to TextView
of Selected item
Change Text at top to that
of selected view when user clicks
on selection
![Page 59: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/59.jpg)
Mobile HCI
![Page 60: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/60.jpg)
Mobile HCI
Mobile HCI is important for an enjoyable user experience
Excerpts from: Bentley, F. and Barrett, E., 2012. Building mobile experiences. MIT Press.
Can’t just reuse screens originally designed for desktops. Why?1. Mobile screen is small, need to manage space better
2. Does your screen look good on wide variety of mobile screen sizes?
3. Can users reach buttons with one hand on different resolutions?
4. Mobile device will be carried into varied, adverse conditions. E.g.
1. Do colors work well indoor vs outdoor, bright vs dim light
2. Are buttons big enough for frozen hands during winter vs summerr
![Page 61: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/61.jpg)
Mobile HCI: Plan out Interaction Flow on Paper
Example interaction flow of ZoneTag app on paper Ref: Bentley, F. and Barrett, E.,
2012. Building mobile experiences. MIT Press.
![Page 62: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/62.jpg)
Mobile HCI: Evaluation App evaluation: iterative, user-centered
In lab (small) then in the field (large)
On wide variety of devices
Most poor ratings on Google Play app store are “doesn’t work on my device”
Example: Android mobile developer tests each game on over 400 different smartphones and tablets
Screens
Aspect ratios
Form factors
Controls
OS versions
CPU/GPU
OpenGL/DirectX
versions……. etc
![Page 63: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/63.jpg)
References
Busy Coder’s guide to Android version 4.4
CS 65/165 slides, Dartmouth College, Spring 2014
CS 371M slides, U of Texas Austin, Spring 2014
Android App Development for Beginners videos by Bucky Roberts (thenewboston)
Head First Android
Android Nerd Ranch, Third Edition
![Page 64: CS 528 Mobile and Ubiquitous Computing Lecture 02b](https://reader033.vdocuments.mx/reader033/viewer/2022042109/6256fb35ba667653a752c064/html5/thumbnails/64.jpg)
References
Android App Development for Beginners videos by Bucky Roberts (thenewboston)
Ask A Dev, Android Wear: What Developers Need to Know, https://www.youtube.com/watch?v=zTS2NZpLyQg
Ask A Dev, Mobile Minute: What to (Android) Wear, https://www.youtube.com/watch?v=n5Yjzn3b_aQ
Busy Coder’s guide to Android version 4.4
CS 65/165 slides, Dartmouth College, Spring 2014
CS 371M slides, U of Texas Austin, Spring 2014