HowAboutWe... Build an Android App

1,353 views

Published on

  • Be the first to comment

HowAboutWe... Build an Android App

  1. 1. Build AN ANDROID APP Lessons learned building HowAboutWe Dating for Android Chuck Greb @ecgreb chuck@howaboutwe.comWednesday, February 27, 13
  2. 2. Fast Company 2 of 46Wednesday, February 27, 13
  3. 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 46Wednesday, February 27, 13
  4. 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 XWednesday, February 27, 13
  5. 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 46Wednesday, February 27, 13
  6. 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 46Wednesday, February 27, 13
  7. 7. Cross Platform Design Designing for multiple platformsWednesday, February 27, 13
  8. 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 46Wednesday, February 27, 13
  9. 9. Android Design 9 of 46Wednesday, February 27, 13
  10. 10. Pure Android Android, iOS, and mobile web. 10 of 46Wednesday, February 27, 13
  11. 11. LOOK AND FEEL Custom UI componentsWednesday, February 27, 13
  12. 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 46Wednesday, February 27, 13
  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 46Wednesday, February 27, 13
  14. 14. BUTTONS Jelly Bean v. Gingerbread 14 of 46Wednesday, February 27, 13
  15. 15. BUTTONS Jelly Bean v. Gingerbread 15 of 46Wednesday, February 27, 13
  16. 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 46Wednesday, February 27, 13
  17. 17. SPINNERS Jelly Bean 17 of 46Wednesday, February 27, 13
  18. 18. SPINNERS Gingerbread 18 of 46Wednesday, February 27, 13
  19. 19. Edit Basics Jelly Bean 19 of 46Wednesday, February 27, 13
  20. 20. Edit Basics Gingerbread 20 of 46Wednesday, February 27, 13
  21. 21. THE GREAT MAIN MENU DEBATE Home screen and navigationWednesday, February 27, 13
  22. 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 46Wednesday, February 27, 13
  23. 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 46Wednesday, February 27, 13
  24. 24. Dashboard 24 of 46Wednesday, February 27, 13
  25. 25. DASHBOARD However, from a users 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 46Wednesday, February 27, 13
  26. 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 46Wednesday, February 27, 13
  27. 27. Sliding Menu 27 of 46Wednesday, February 27, 13
  28. 28. KEEP ME IN THE LOOP NotificationsWednesday, February 27, 13
  29. 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 46Wednesday, February 27, 13
  30. 30. notifications New message 30 of 46Wednesday, February 27, 13
  31. 31. THE (NOT SO) GREAT IDE DEBATE Development environmentWednesday, February 27, 13
  32. 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 46Wednesday, February 27, 13
  33. 33. Development Environment IDEs 33 of 46Wednesday, February 27, 13
  34. 34. Development Environment Other Tools • Git • Maven • Jenkins • Sonatype Nexus 34 of 46Wednesday, February 27, 13
  35. 35. BACK TO THE FUTURE Backward compatibilityWednesday, February 27, 13
  36. 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 46Wednesday, February 27, 13
  37. 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 46Wednesday, February 27, 13
  38. 38. Backward compatibility Action Bar 38 of 46Wednesday, February 27, 13
  39. 39. Backward compatibility Fragments 39 of 46Wednesday, February 27, 13
  40. 40. Backward compatibility Custom Back Ports 40 of 46Wednesday, February 27, 13
  41. 41. Backward Compatibility Number Picker 41 of 46Wednesday, February 27, 13
  42. 42. IF it ain’t broke TestingWednesday, February 27, 13
  43. 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 46Wednesday, February 27, 13
  44. 44. Testing I dont care how good you think your design is. If I cant 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, youre paying a price for it. Michael Feathers 44 of 46Wednesday, February 27, 13
  45. 45. Testing Robolectric 45 of 46Wednesday, February 27, 13
  46. 46. Build AN ANDROID APP Lessons learned building HowAboutWe Dating for Android Chuck Greb @ecgreb chuck@howaboutwe.comWednesday, February 27, 13

×