1. HIT3328 / HIT8328 Software Development for
Mobile Devices
Dr. Rajesh Vasa, 2011
1
Twitter: @rvasa
Blog: http://rvasa.blogspot.com
Lecture 07
Dialogs, Tabs and
Lists

2. R. Vasa, 20122
Lecture Overview
•A short Detour into Design Patterns
•Dialogs
•Tabbed Layouts
•Enhancing Lists

3. R. Vasa, 20123
Design Patterns
•A general reusable solution to a commonly
occurring problem in software design
•Typically cover,
•Algorithm strategy
•Computational design
•Execution
•Implementation strategy
•Structural design

4. R. Vasa, 20124
API designers use these
patterns
•API designers use a number of these
patterns
•If you can recognise the patterns used -- it
will help you,
•learn the API faster & use it better
•understand the underlying problem that
motivated designers to choose the pattern
•Improve your own code by adapting the
pattern (assuming the pattern used by API
designer is good)

5. R. Vasa, 20125
API Design - Android Example
•Android API designers built their SDK
around the Method Chaining and Builder
pattern in many instances
•What are they? Why have they used it?

6. R. Vasa, 20126
Quick Concept Clarification
•Before we go into the pattern in depth
•We need to know the following:
•Mutable Vs Immutable objects
•Command-Query Separation Principle
•Fluent Interfaces

7. R. Vasa, 20127
Mutable vs Immutable Objects
•In Object oriented languages -- some
objects are designed to be immutable
•That is, once created -- they are constants
•In Java -- Strings are immutable
•Constant (immutable) offer better memory
allocation strategies
•However, if we change these objects too
often -- then we pay a high price

8. R. Vasa, 20128
Immutable Vs Mutable Objects
•In Java, if we perform a large number of
string modifications
•It is better to use StringBuffer
•StringBuffer is Mutable (can be changed)
•During design (over years) we discovered
that mutable objects should have certain
design properties
•But -- our thinking was boxed!!!!

9. R. Vasa, 20129
Command - Query Separation
Principle
•Good Object Oriented design should ensure
that a method is either a command or a
query
•Simply put,
•getName() -- Query -- Should not change
state
•setName() -- Command -- Can change state
•Methods that perform both are considered
poor practice
This principle boxed our thinking (to some extentThis principle boxed our thinking (to some extent)

10. R. Vasa, 20121
Command - Query Separation
Principle
•Consequences of this principle,
•“set” Methods should not return (i.e. void)
•This principle has influenced quite a large
pool of API code (Java, .NET and others)
•Side-effect,
•We end up writing a large number of set
methods
•Often one per line

11. R. Vasa, 20121
Command-Query Principle At
Work
private void makeNormalOrder(Customer customer)
{
Order o1 = new Order();
customer.addOrder(o1);
OrderLine line1 = new OrderLine(6, Product.find("TAL"));
o1.addLine(line1);
OrderLine line2 = new OrderLine(5, Product.find("HPK"));
o1.addLine(line2);
OrderLine line3 = new OrderLine(3, Product.find("LGV"));
o1.addLine(line3);
line2.setSkippable(true);
o1.setRush(true);
}
Commands and Queries are clearly separatedCommands and Queries are clearly separated
Example from:
http://martinfowler.com/bliki/FluentInterface.html

12. R. Vasa, 20121
Command-Query Principle At
Work
private void makeNormalOrder(Customer customer)
{
Order o1 = new Order();
customer.addOrder(o1);
OrderLine line1 = new OrderLine(6, Product.find("TAL"));
o1.addLine(line1);
OrderLine line2 = new OrderLine(5, Product.find("HPK"));
o1.addLine(line2);
OrderLine line3 = new OrderLine(3, Product.find("LGV"));
o1.addLine(line3);
line2.setSkippable(true);
o1.setRush(true);
}
Example from:
http://martinfowler.com/bliki/FluentInterface.html
Code is needlessly messy, long and convolutedCode is needlessly messy, long and convoluted

13. R. Vasa, 20121
Fluent Interface
•The concept is that we should write code
that is better to read
•That is, it communicates the intent much
more clearly

14. R. Vasa, 20121
Fluent Interfaces Example
private void makeFluentOrder(Customer customer)
{
customer.newOrder()
.with(6, "TAL")
.with(5, "HPK").skippable()
.with(3, "LGV")
.priorityRush();
}
Example from:
http://martinfowler.com/bliki/FluentInterface.html
Easier to read -- but is C-Q still followed?Easier to read -- but is C-Q still followed?
Commands change state and return --
but intent of the principle is not really
violated
Commands change state and return --
but intent of the principle is not really
violated

15. R. Vasa, 20121
Fluent Interfaces & C-Q
Principle
private void makeFluentOrder(Customer customer)
{
customer.newOrder()
.with(6, "TAL")
.with(5, "HPK").skippable()
.with(3, "LGV")
.priorityRush();
}
Example from:
http://martinfowler.com/bliki/FluentInterface.html
with() methods [commands]
update and return the order
object
with() methods [commands]
update and return the order
object
public Order with(int i, String string)public Order with(int i, String string)

16. R. Vasa, 20121
Method Chaining Pattern
private void makeFluentOrder(Customer customer)
{
customer.newOrder()
.with(6, "TAL")
.with(5, "HPK").skippable()
.with(3, "LGV")
.priorityRush();
}
Method Chaining Pattern - Object
is mutated and returned back
Method Chaining Pattern - Object
is mutated and returned back

17. R. Vasa, 20121
Back to Android API Design
•Android SDK designers are influenced by
these ideas around fluent interfaces and
method chaining
•They combine it with the Builder Pattern to
help construct layouts and views
•This pattern is highlighted in the examples
that follow ....

18. R. Vasa, 20121
Lecture Roadmap - Where are
we?
•A short Detour into Design Patterns
•Dialogs
•Tabbed Layouts
•Enhancing Lists

19. R. Vasa, 20121
Dialogs
• How long have I been alive?
Date Dialog Alert Dialog

20. R. Vasa, 20122
Dialogs are flexible
Date Dialog
(SDK Provided)
Custom Alert
Dialog
Title and Icon

21. R. Vasa, 20122
Dialogs are flexible
Date Dialog
(SDK Provided)
Custom Alert
Dialog
Title and Icon
Message

22. R. Vasa, 20122
Dialogs are flexible
Date Dialog
(SDK Provided)
Custom Alert
Dialog
Title and Icon
Message
Control
Buttons

23. R. Vasa, 20122
Dialogs are useful for error
messages
Custom Alert
Dialog
Ideal for simple error messages

24. R. Vasa, 20122
Date Picker Dialog
private MutableDateTime mdt = new
MutableDateTime(1990,1,1,10,10,0,0);
Mutable Date Time from Joda Time library (see
sample code)
We can set a default date value for the dialog

25. R. Vasa, 20122
Short Problem - Usability
Question
•In this context, what should be the default
date shown?
20 years ago Current
Should it be something else? -- Is it important?

26. R. Vasa, 20122
Constructing Custom Alter
Dialogs
This code uses a built-in icon,
but can be any appropriate
drawable
This code uses a built-in icon,
but can be any appropriate
drawable
See
http://androiddrawableexplorer.appspot.com/
for a full list of built-in drawable resources
and their names

27. R. Vasa, 20122
Constructing Custom Alter
Dialogs
We can set buttons
(positive/negative/neutral)
We can set buttons
(positive/negative/neutral)

28. R. Vasa, 20122
Constructing Custom Alter
Dialogs
Button Click
implementatio
n
Button Click
implementatio
n

29. R. Vasa, 20122
Deconstructing the Patterns in
Use
Dialog Builder - Inner ClassDialog Builder - Inner Class
Method Chaining PatternMethod Chaining Pattern

30. R. Vasa, 20123
Showing a Dialog
public void onBackPressed()
{
showDialog(EXIT_DIALOG);
}
This is a method
provided by the
Activity class
This is a method
provided by the
Activity class
We have to provide
these constants for
the call-back
We have to provide
these constants for
the call-back

31. R. Vasa, 20123
Dialogs are Constructed via
Call-Backs
public void onBackPressed()
{
showDialog(EXIT_DIALOG);
}
Triggers
the call
back
This is
displayed to
the user
This is
displayed to
the user

32. R. Vasa, 20123
Why go through so much
trouble?public void onBackPressed()
{
showDialog(EXIT_DIALOG);
}
Because dialogs needs a
parent Activity for life cycle
management
Because dialogs needs a
parent Activity for life cycle
management
Offers
separation of
concerns
Offers
separation of
concerns

33. R. Vasa, 20123
Lecture Roadmap - Where are
we?
•A short Detour into Design Patterns
•Dialogs
•Tabbed Layouts
•Enhancing Lists

34. R. Vasa, 20123
Tabbed Layouts

35. R. Vasa, 20123
Tabbed Layouts - Concepts
Tab Host (container)

36. R. Vasa, 20123
Tabbed Layouts - Concepts
Tab Widget
Tab Host (container)

37. R. Vasa, 20123
Tabbed Layouts - Concepts
Tab Host (container)
Tab Widget
Frame Layout is used to
switch the visible content
for a tab

38. R. Vasa, 20123
Layout of a Tabbed App.
bHost contains the TabWidget and the FrameLayo

39. R. Vasa, 20123
Layout of a Tabbed App.
Two views in
the frame
layout to
switch around
Two views in
the frame
layout to
switch around

40. R. Vasa, 20124
Wiring up the Activity
Method chaining usedMethod chaining used

41. R. Vasa, 20124
Wiring up the Activity
TabSpec
populates the tab
widget
TabSpec
populates the tab
widget

42. R. Vasa, 20124
Tabs need multiple icon
resources
Selected Icon Unselected Icon
We have to provide both icons to improve look & feelWe have to provide both icons to improve look & feel

43. R. Vasa, 20124
Working with Multiple Icons
State information is provided as a drawable resourceState information is provided as a drawable resource
Note: XML file is
placed in the
drawable folder

44. R. Vasa, 20124
Using Icon State Information
Icon selection is managed
by SDK (via convention)
Icon selection is managed
by SDK (via convention)

45. R. Vasa, 20124
Tabs can load different
activities
•If a tab needs to start a new activity,
•We need to start it with Intents

46. R. Vasa, 20124
Tabs can load different
activities
Intent is reused in this example --
because this method copies the
value internally
Intent is reused in this example --
because this method copies the
value internally
Method Chaining used hereMethod Chaining used here

47. R. Vasa, 20124
Lecture Roadmap - Where are
we?
•A short Detour into Design Patterns
•Dialogs
•Tabbed Layouts
•Enhancing Lists

48. R. Vasa, 20124
Enhancing Lists
Latitude / Longitude
Example
Drop down
showing
matching options
Drop down
showing
matching options

49. R. Vasa, 20124
Recall: Lists get data via an
Adapter
ListView
Data Source
Adapter

50. R. Vasa, 20125
We can tie an adapter to Edit
Text View
Data Adapter set for AutoCompleteTextView

51. R. Vasa, 20125
Listening to Selection
cityView.addTextChangedListener(this);
public class LatLongActivity extends Activity implements TextWatcher

52. R. Vasa, 20125
Listening to Selection
cityView.addTextChangedListener(this);
public class LatLongActivity extends Activity implements TextWatcher

53. R. Vasa, 20125
Lecture Roadmap - Where are
we?
•A short Detour into Design Patterns
•Dialogs
•Tabbed Layouts
•Enhancing Lists (with images)

54. R. Vasa, 20125
Lists with Images
Latitude / Longitude
Example
Melbourne & Sydney have
special images. Rest use
same icon
Melbourne & Sydney have
special images. Rest use
same icon

55. R. Vasa, 20125
Custom List Row
We can specify a
custom layout for rows
in a list
We can specify a
custom layout for rows
in a list

56. R. Vasa, 20125
Custom List Row
Layout provides the
default icon to show for
each row item
Layout provides the
default icon to show for
each row item

57. R. Vasa, 20125
We provide a custom row
adapter
•The standard adapter will display using a
pre-defined (SDK provided) layout
•We have to override this behaviour with our
own “row” rendering functionality
// use custom row adapter
setListAdapter(new RowIconAdapter());
public class LatLongActivity extends ListActivity
Note: See Sample Code for details

58. R. Vasa, 20125
Custom Row Adapter
class RowIconAdapter extends ArrayAdapter<String>
{
public RowIconAdapter()
{super(LatLongActivity.this, R.layout.listrow, R.id.row_label, cityNames);}
public View getView(int pos, View cView, ViewGroup parent)
{
View row = super.getView(pos, cView, parent); // DEFAULT ROW
ImageView icon = (ImageView) row.findViewById(R.id.row_icon);
String city = cityNames[pos];
if (city.startsWith("Melb"))
icon.setImageResource(R.drawable.melbourne);
else if (city.startsWith("Syd"))
icon.setImageResource(R.drawable.sydney);
else
icon.setImageResource(R.drawable.location);
return row;
}}

59. R. Vasa, 20125
A Few List View Related Issues
As we scroll down, we get more
cities

60. R. Vasa, 20126
A Few List View Related Issues
View objects on Rows not
shown are destroyed as we
scroll up/down
View objects on Rows not
shown are destroyed as we
scroll up/down
Only 7
rows
(views) are
kept in
RAM

61. R. Vasa, 20126
A Few List View Related Issues
View objects on Rows not shown
are destroyed as we scroll
up/down
View objects on Rows not shown
are destroyed as we scroll
up/down
Design Tip: Make sure that rows
are constructed as quickly as
possible
Design Tip: Make sure that rows
are constructed as quickly as
possible

62. R. Vasa, 20126
Lecture Roadmap - Where are
we?
•A short Detour into Design Patterns
•Dialogs
•Tabbed Layouts
•Enhancing Lists