1. Build AN ANDROID APP
Lessons learned building
HowAboutWe Dating for Android
Chuck Greb
@ecgreb
chuck@howaboutwe.com
Wednesday, February 27, 13

2. Fast Company
2 of 46
Wednesday, February 27, 13

3. Becoming An ANDROID DEVELOPER
What used to take years of agony
and frustration, sleepless nights,
trial and error, and excessive doses
of caffeine can now be accomplished
with a few simple taps on your
device.
Video
3 of 46
Wednesday, February 27, 13

4. Overview
Lessons learned from the design and development process
building HowAboutWe Dating for Android.
• Cross platform design • Development environment
• Customized look and feel • Backward compatibility
• Home screen and navigation • Testing
• Notifications
4 of X
Wednesday, February 27, 13

5. Overview
Lessons learned from the design and development process
building HowAboutWe Dating for Android.
• Cross platform design • Development environment
• Customized look and feel • Backward compatibility
• Home screen and navigation • Testing
• Notifications
5 of 46
Wednesday, February 27, 13

6. Overview
Lessons learned from the design and development process
building HowAboutWe Dating for Android.
• Cross platform design • Development environment
• Customized look and feel • Backward compatibility
• Home screen and navigation • Testing
• Notifications
6 of 46
Wednesday, February 27, 13

7. Cross Platform Design
Designing for multiple platforms
Wednesday, February 27, 13

8. CROSS PLATFORM DESIGN
Android, iOS, and mobile web each have their own design
patterns and conventions. In designing for these platforms,
the goal is to achieve both cross-platform brand consistency
and alignment with the conventions specific to the platform.
8 of 46
Wednesday, February 27, 13

9. Android Design
9 of 46
Wednesday, February 27, 13

10. Pure Android
Android, iOS, and mobile web.
10 of 46
Wednesday, February 27, 13

11. LOOK AND FEEL
Custom UI components
Wednesday, February 27, 13

12. LOOK AND FEEL
On Android, the look and feel (and sometimes even behavior)
of system default components will vary significantly
depending on platform version, device manufacturer, and
theme.
The only way to truly ensure style and layout consistency
across various platform versions, manufacturers, screen sizes
and densities is by using custom UI components.
12 of 46
Wednesday, February 27, 13

13. Buttons
Buttons are one of the easiest components to customize, so
start your customizations there. Typically, functionality for a
button is not going to change. But the look and feel is
drastically different between pre-Honeycomb and post-
Honeycomb devices.
Developers can simply drop in alternative assets for each
screen density and state to make the buttons look the same
across all platform versions.
13 of 46
Wednesday, February 27, 13

14. BUTTONS
Jelly Bean v. Gingerbread
14 of 46
Wednesday, February 27, 13

15. BUTTONS
Jelly Bean v. Gingerbread
15 of 46
Wednesday, February 27, 13

16. Spinners
Spinners (drop down menus) look very different on pre-
Honeycomb devices. This can affect not only the look and feel
of the individual component but the overall layout of a screen.
16 of 46
Wednesday, February 27, 13

17. SPINNERS
Jelly Bean
17 of 46
Wednesday, February 27, 13

18. SPINNERS
Gingerbread
18 of 46
Wednesday, February 27, 13

19. Edit Basics
Jelly Bean
19 of 46
Wednesday, February 27, 13

20. Edit Basics
Gingerbread
20 of 46
Wednesday, February 27, 13

21. THE GREAT MAIN MENU DEBATE
Home screen and navigation
Wednesday, February 27, 13

22. NAVIGATION
In designing the UI pattern for the HowAboutWe app, we
wanted to provide an elegant full-screen experience, keeping
navigation quarantined in a secondary area. However, we also
wanted to provide the capacity for rapid switching between
tasks.
22 of 46
Wednesday, February 27, 13

23. DASHBOARD
Our initial designs used the fullscreen dashboard view pattern
seen in the earlier version of the Facebook Android app and
the 2011 Google I/O app.
The options are presented to the user in a simple, easy-to-
digest grid. And, from an implementation standpoint, it’s fairly
simple and straightforward.
23 of 46
Wednesday, February 27, 13

24. Dashboard
24 of 46
Wednesday, February 27, 13

25. DASHBOARD
However, from a user's perspective, there are significant
downsides. The navigational experience disruptively occupies
the entire screen.
It makes navigation a primary act rather than a facilitative
one. In this way, it’s a bit of a monolithic design choice.
25 of 46
Wednesday, February 27, 13

26. SLIDING MENU
Within the last year, the sliding drawer model has become
increasingly popular, perhaps first made popular by the
Twitter iPad app.
Visually compelling, easeful, and fun to use, it has since been
adopted by Facebook, YouTube, Google+, Path and many
others.
26 of 46
Wednesday, February 27, 13

27. Sliding Menu
27 of 46
Wednesday, February 27, 13

28. KEEP ME IN THE LOOP
Notifications
Wednesday, February 27, 13

29. notifications
With the introduction of rich notifications, status bar
notifications became much more visually appealing and
powerful.
Now more information can be conveyed to the user via
notifications along with additional options for taking action.
29 of 46
Wednesday, February 27, 13

30. notifications
New message
30 of 46
Wednesday, February 27, 13

31. THE (NOT SO) GREAT IDE DEBATE
Development environment
Wednesday, February 27, 13

32. Development Environment
Engineers thrive on good tools that save them time and help
them write better code.
IDEs can inspect our code, optimize it, and refactor it-- usually
better, faster, and with fewer mistakes than our human hands.
32 of 46
Wednesday, February 27, 13

33. Development Environment
IDEs
33 of 46
Wednesday, February 27, 13

34. Development Environment
Other Tools
• Git
• Maven
• Jenkins
• Sonatype Nexus
34 of 46
Wednesday, February 27, 13

35. BACK TO THE FUTURE
Backward compatibility
Wednesday, February 27, 13

36. Backward compatibility
When building HowAboutWe Dating for Android, we knew that
we wanted to take advantage of recent advancements in the
platform including fragments, action bar, rich notifications,
and the Holo theme.
Fortunately there are open source tools and strategies we
found to help us deliver a modern and rich experience to users
with the latest versions of the the platform, yet still provide a
gracefully degraded experience to the rest of users and
devices.
36 of 46
Wednesday, February 27, 13

37. Backward compatibility
Aiming to support older releases is noble. Ignoring what has
happened since those releases is stupid, if you are trying to
distribute your app to the public via the Play Store or similar
mass-distribution means. You want your app to be distinctive,
not decomposing.
Mark Murphy
The Busy Coder’s Guide to Android Development (v4.2)
37 of 46
Wednesday, February 27, 13

38. Backward compatibility
Action Bar
38 of 46
Wednesday, February 27, 13

39. Backward compatibility
Fragments
39 of 46
Wednesday, February 27, 13

40. Backward compatibility
Custom Back Ports
40 of 46
Wednesday, February 27, 13

41. Backward Compatibility
Number Picker
41 of 46
Wednesday, February 27, 13

42. IF it ain’t broke
Testing
Wednesday, February 27, 13

43. Testing
When building HowAboutWe Dating, we knew that we want to
take a test-driven approach.
With extensive unit test coverage, we are able to implement
new features and refactor the code base with confidence, since
ideally any regressions will be caught by the existing tests.
43 of 46
Wednesday, February 27, 13

44. Testing
I don't care how good you think your design is. If I can't walk in
and write a test for an arbitrary method of yours in five minutes
its not as good as you think it is, and whether you know it or not,
you're paying a price for it.
Michael Feathers
44 of 46
Wednesday, February 27, 13

45. Testing
Robolectric
45 of 46
Wednesday, February 27, 13

46. Build AN ANDROID APP
Lessons learned building
HowAboutWe Dating for Android
Chuck Greb
@ecgreb
chuck@howaboutwe.com
Wednesday, February 27, 13