![Page 1: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/1.jpg)
Jeff Davidson CS 2046
CS 2046Mobile Application Development
Fall 2010
Mobile User Interfaces
![Page 2: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/2.jpg)
Jeff Davidson CS 2046
Announcements• Next class = Lab session: Upson B7
• Office Hours (starting 10/25):– Me: MW 1:15-2:15 PM, Upson 360– Jae (TA): F 11:00 AM-12:00 PM, Upson 328B, Bay D
![Page 3: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/3.jpg)
Jeff Davidson CS 2046
Recap• Task = Stack of related Activities
• Activity Lifecycle:– Active = In the foreground, called onResume()– Paused = Obscured, called onPause()– Stopped = Not visible, called onStop()
• Resources – separate program logic from “other stuff”– Strings, images, UI layouts
• AndroidManifest.xml – tie together components
![Page 4: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/4.jpg)
Jeff Davidson CS 2046
Processes/Threads on Android• Default: One application = one process
– All components are instantiated on main thread– Consequence: Should not perform long/blocking
operations without forking.
• Definition of application: all components grouped under the <application> tag in AndroidManifest
![Page 5: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/5.jpg)
Jeff Davidson CS 2046
Service Lifecycle• Service has onCreate, onStart, and onDestroy
methods (but no pause/resume).
• startService (like startActivity) will start the service if it isn’t already running.
• Then, call onStart– If service is already running, just call onStart
• As consequence of single process, should spawn new Thread to handle work.
![Page 6: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/6.jpg)
Jeff Davidson CS 2046
Service.stopSelf• onStart(Intent i, int startId)
• Should stop Service when all commands have been processed.– Because of threading – no guarantee of order.
• stopSelf(startId): Will stop Service if startIdcorresponds to last command.
• What data structure should we use to store startIds?
![Page 7: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/7.jpg)
Jeff Davidson CS 2046
Service• All explained at
http://developer.android.com/reference/android/app/Service.html
• Also see my post on the Newsgroup
• We’ll talk about this more in a few lectures when we get to background tasks.
![Page 8: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/8.jpg)
Jeff Davidson CS 2046
Developer Blog – Improving Apps• Listen to your users
– Use betas before making final releases
• Improve stability and eliminate bugs– Monkey: Send random UI events– View reported crashes in Android Market
• Improve UI Responsiveness– Today’s lecture!
• Integrate with the system and third-party apps• See post for many more:
http://android-developers.blogspot.com/2010/10/improving-app-quality.html
![Page 9: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/9.jpg)
Jeff Davidson CS 2046
Designing Mobile Interfaces• Reading: 12 myths of mobile UI design
– (Most of these are not actually related to UI)
• Takeaways:– Keep it simple!– Get in the shoes of your users
• Figure out what 90% of your users need to do 90% of the time, and make it easy.
– Consistency is key.• The less you reinvent the wheel and use standard UI
features, the more your user will already know how to use.
![Page 10: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/10.jpg)
Jeff Davidson CS 2046
View Hierarchy• View: Basic unit of user interface
– Widgets: android.widget.*– Leaves of the hierarchy tree
• ViewGroup: Defines a layout– Also in android.widget.*– Define where to place children
Views (or ViewGroups)
![Page 11: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/11.jpg)
Jeff Davidson CS 2046
Examples of Widgets• Button
• EditText
• CheckBox and RadioButton
• Spinner
• Others: TextView, ImageView• Can extend a widget, or create a brand new one.
![Page 12: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/12.jpg)
Jeff Davidson CS 2046
Examples of Layouts• Remember: ViewGroup is just a subclass of View• Simplest: FrameLayout
– Blank space to be filled with a single object– Pins objects to top-left corner– If it contains more than one object, just draws them
overlapping
• This is the root layout for any Activity
![Page 13: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/13.jpg)
Jeff Davidson CS 2046
LinearLayout• Aligns all children one after the other in a single
direction– orientation = vertical or horizontal
• Can nest for more complex layout.– Common use: (small) forms– Vertical LinearLayout
• Horizontal LinearLayout– TextView = Label– EditText = Value
• Horizontal LinearLayout…
![Page 14: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/14.jpg)
Jeff Davidson CS 2046
TabLayout• Multiple distinct features in
one View• Good use of constrained
screen space• Two methods of filling tabs:
– Swapping Views – best for features which are similar and fit into one functional group.
– Swapping Activities – best for managing separate tasks, instead of one massive Activity and layout.
![Page 15: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/15.jpg)
Jeff Davidson CS 2046
Other Layouts• RelativeLayout
– Specify elements relative to parent or siblings– Combination of power and simplicity in description
• TableLayout
•EditText: Below TextView
•OK Button: Below EditText, aligned to right of parent (Screen)
•Cancel Button: Left of OK Button, small margin to the right
![Page 16: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/16.jpg)
Jeff Davidson CS 2046
Nested LinearLayouts• Nesting LinearLayouts is an easy way to create
many common UIs.
• Caution: doing this too much (more than ~5 levels of nesting) can make UI sluggish!– Tool for detecting common problems:
http://android-developers.blogspot.com/2009/11/optimize-your-layouts.html
![Page 17: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/17.jpg)
Jeff Davidson CS 2046
LinearLayout Relative Layout• Solution: Refactor into a RelativeLayout
– Example: http://android-developers.blogspot.com/2009/02/android-layout-tricks-1.html
• Might not seem like much, but if this is drawn on screen many times…
![Page 18: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/18.jpg)
Jeff Davidson CS 2046
ListView• ViewGroup containing a list of
Views• Can define a View to display when
List is empty with setEmptyView• Each row is by default just a
TextView – can customize.• Usually populated dynamically
– Assignment 1: String[] array of tasks– Assignment 2: Data pulled from a
ContentProvider.
![Page 19: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/19.jpg)
Jeff Davidson CS 2046
ListView Adapters• Adapter – Binds dynamic content to the Views in a
ListView.– e.g. ArrayAdapter for arrays
• Simple – bind a text value to the one text field in the ListView.
• More complex – custom ListView rows, custom objects being bound to the Views.– We’ll see this in Assignment 2
![Page 20: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/20.jpg)
Jeff Davidson CS 2046
Layout Weight• Weight allows creating LinearLayouts with
proportional sizes.• Default = 0 – minimum space to display all content
![Page 21: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/21.jpg)
Jeff Davidson CS 2046
Example• How would you define
this layout?
![Page 22: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/22.jpg)
Jeff Davidson CS 2046
Defining Layout• Most common method – XML layout files• Located in res/layout/<file>.xml – can access later as
R.layout.<file> from code.• All files contain:
– XML version: <?xml version="1.0" encoding="utf-8"?>
– xmlns:android tag in root element<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android">
• From onCreate, call setContentView(R.layout.<file>) to set the root layout element for an activity.
![Page 23: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/23.jpg)
Jeff Davidson CS 2046
XML Layout• All attributes preceded with “android:”• Attributes which apply to every View:
– id – optional – a unique identifier for the object so it can be accessed later from code.
• Specify as android:id=“@+id/<name>”• In Java: (Button) b = (Button) findViewById(R.id.<name>);
– layout_width/layout_height – dimensions of object• Specific size (pixels, or dips – density-independent pixels)• fill_parent: Takes up entire size of the parent ViewGroup• wrap_content: Takes up only as much space as is needed to
display the View.
![Page 24: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/24.jpg)
Jeff Davidson CS 2046
Styles• Essentially, CSS for Android UI• Located in res/values/<anything>.xml
– styles.xml is a good choice
<?xml version=“1.0” encoding=“utf-8”?><resources><style name=“BigText”><item name=“android:textSize”>30dip</item>
</style></resources>
• Apply to a view in XML with:style=“@style/BigText”
![Page 25: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/25.jpg)
Jeff Davidson CS 2046
Themes• Theme: Style applied to entire Activity or
application• Apply in AndroidManifest.xml
• Common examples:– Make Activity look like dialog box:
<activity android:theme=“@android:style/Theme.Dialog”>
– Get rid of title bar:@android:style/Theme.NoTitleBar
• More on Styles/Themes: http://developer.android.com/guide/topics/ui/themes.html
![Page 26: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/26.jpg)
Jeff Davidson CS 2046
Programmatic Layout• Can also define layout in Java:public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);LinearLayout ll = new LinearLayout(this);Button button1 = new Button(this);button1.setText("Hello");Button button2 = new Button(this);button2.setText("World");ll.addView(button1);ll.addView(button2);setContentView(ll);
}
• In practice, much easier to define XML layout– But, need Java to receive events from Views and
update them dynamically.
![Page 27: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/27.jpg)
Jeff Davidson CS 2046
More on UI• Resources:
– Hello, Views tutorial: http://developer.android.com/resources/tutorials/views/index.html
• Examples (with code) for these and other layouts• Examples for common widgets (Date Picker, Spinners, Image
Galleries, etc.)– Javadoc for android.widget package:
http://developer.android.com/reference/android/widget/package-summary.html
• For each View/ViewGroup, describes:– XML attributes that can be specified– Methods that can be called on the Java object.
– Official developer blog posts on UI:http://android-developers.blogspot.com/search/label/User%20Interface
– API Demos
![Page 28: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/28.jpg)
Jeff Davidson CS 2046
UI in Java• Have defined layout in XML – now what?
• We need to know how to:– Get data from and put data to widgets
• How do we access the text in an EditText?
– Receive events from widgets• How can we do something when a button is clicked?
![Page 29: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/29.jpg)
Jeff Davidson CS 2046
Getting References• Have view with android:id=“@+id/widget”;
• <Class> widget = (<Class>) findViewById(R.id.widget);
– <Class> is the class of the View, i.e. Button or EditText– This is the object we need to:
• Get/set fields• Set up event handlers
![Page 30: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/30.jpg)
Jeff Davidson CS 2046
Gotchas• If you need to access a view in more than one
method:– Have a class variable prefixed with m (for member):
• private ListView mList;– Bind variable in onCreate() method
• What’s wrong with this:
public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);Button b = (Button) findViewById(R.id.button);setContentView(R.layout.main);
}
![Page 31: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/31.jpg)
Jeff Davidson CS 2046
Gotchas• If you need to access a view in more than one
method:– Have a class variable prefixed with m (for member):
• private ListView mList;– Bind variable in onCreate() method
• What’s wrong with this:
public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);Button b = (Button) findViewById(R.id.button);setContentView(R.layout.main);
}
![Page 32: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/32.jpg)
Jeff Davidson CS 2046
Gotchas• If you need to access a view in more than one
method:– Have a class variable prefixed with m (for member):
• private ListView mList;
– Bind variable in onCreate() method
• You must first call setContentView() before findViewById will work!
![Page 33: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/33.jpg)
Jeff Davidson CS 2046
Getting/Setting Fields• Once we have a reference to a widget, accessing
fields is fairly simple:
• EditText textField = …String text = textField.getText().toString();textField.setText(“Hello”);textField.setTextColor(Color.RED);
![Page 34: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/34.jpg)
Jeff Davidson CS 2046
Interlude – Anonymous Inner Classes• Consider the (generic) Java method:
Arrays.sort(T[] a, Comparator<T> c)
• Comparator interface:– int compare(T o1, T o2)
• Return 0 if equal, -1 if o1 < o2, 1 if o1 > o2
• How should we construct an instance of Comparator?
![Page 35: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/35.jpg)
Jeff Davidson CS 2046
Anonymous Inner Classesclass Pair {
int x, y;boolean equals(Object other) { ... }...
}
class PairComparator implements Comparator<Pair> {int compare(Pair p1, Pair p2) {
if (p1.equals(p2))return 0;
if (p1.x < p2.x || p1.x == p2.x && p1.y < p2.y)return -1;
elsereturn 1;
}}
Arrays.sort(Pair[] pairs, new PairComparator());
![Page 36: Mobile User Interfaces · 2017. 9. 30. · Designing Mobile Interfaces • Reading: 12 myths of mobile UI design – (Most of these are not actually related to UI) • Takeaways:](https://reader033.vdocuments.us/reader033/viewer/2022052023/60384f1e0e10165b6b4a4ca7/html5/thumbnails/36.jpg)
Jeff Davidson CS 2046
Anonymous Inner Classesclass Pair {
int x, y;boolean equals(Object other) { ... }...
}
Arrays.sort(Pair[] pairs, new Comparator<Pair>() {int compare(Pair p1, Pair p2) {
if (p1.equals(p2))return 0;
if (p1.x < p2.x || p1.x == p2.x && p1.y < p2.y)return -1;
elsereturn 1;
}});