HowAboutWe... Build an Android App
-
Upload
chuck-greb -
Category
Documents
-
view
933 -
download
3
description
Transcript of HowAboutWe... Build an Android App
![Page 1: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/1.jpg)
Build AN ANDROID APPLessons learned building
HowAboutWe Dating for AndroidChuck Greb
Wednesday, February 27, 13
![Page 2: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/2.jpg)
2 of 46
Fast Company
Wednesday, February 27, 13
![Page 3: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/3.jpg)
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
Becoming An ANDROID DEVELOPER
Wednesday, February 27, 13
![Page 4: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/4.jpg)
• Cross platform design
• Customized look and feel
• Home screen and navigation
• Notifications
• Development environment
• Backward compatibility
• Testing
Overview
4 of X
Lessons learned from the design and development process building HowAboutWe Dating for Android.
Wednesday, February 27, 13
![Page 5: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/5.jpg)
• Cross platform design
• Customized look and feel
• Home screen and navigation
• Notifications
• Development environment
• Backward compatibility
• Testing
Overview
5 of 46
Lessons learned from the design and development process building HowAboutWe Dating for Android.
Wednesday, February 27, 13
![Page 6: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/6.jpg)
• Cross platform design
• Customized look and feel
• Home screen and navigation
• Notifications
• Development environment
• Backward compatibility
• Testing
Overview
6 of 46
Lessons learned from the design and development process building HowAboutWe Dating for Android.
Wednesday, February 27, 13
![Page 7: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/7.jpg)
Cross Platform DesignDesigning for multiple platforms
Wednesday, February 27, 13
![Page 8: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/8.jpg)
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
CROSS PLATFORM DESIGN
Wednesday, February 27, 13
![Page 9: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/9.jpg)
9 of 46
Android Design
Wednesday, February 27, 13
![Page 10: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/10.jpg)
10 of 46
Pure AndroidAndroid, iOS, and mobile web.
Wednesday, February 27, 13
![Page 11: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/11.jpg)
LOOK AND FEELCustom UI components
Wednesday, February 27, 13
![Page 12: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/12.jpg)
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
LOOK AND FEEL
Wednesday, February 27, 13
![Page 13: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/13.jpg)
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
Buttons
Wednesday, February 27, 13
![Page 14: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/14.jpg)
14 of 46
BUTTONSJelly Bean v. Gingerbread
Wednesday, February 27, 13
![Page 15: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/15.jpg)
15 of 46
BUTTONSJelly Bean v. Gingerbread
Wednesday, February 27, 13
![Page 16: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/16.jpg)
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
Spinners
Wednesday, February 27, 13
![Page 17: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/17.jpg)
17 of 46
SPINNERSJelly Bean
Wednesday, February 27, 13
![Page 18: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/18.jpg)
18 of 46
SPINNERSGingerbread
Wednesday, February 27, 13
![Page 19: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/19.jpg)
19 of 46
Edit BasicsJelly Bean
Wednesday, February 27, 13
![Page 20: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/20.jpg)
20 of 46
Edit BasicsGingerbread
Wednesday, February 27, 13
![Page 21: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/21.jpg)
THE GREAT MAIN MENU DEBATEHome screen and navigation
Wednesday, February 27, 13
![Page 22: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/22.jpg)
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
NAVIGATION
Wednesday, February 27, 13
![Page 23: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/23.jpg)
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
DASHBOARD
Wednesday, February 27, 13
![Page 24: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/24.jpg)
24 of 46
Dashboard
Wednesday, February 27, 13
![Page 25: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/25.jpg)
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
DASHBOARD
Wednesday, February 27, 13
![Page 26: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/26.jpg)
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
SLIDING MENU
Wednesday, February 27, 13
![Page 27: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/27.jpg)
27 of 46
Sliding Menu
Wednesday, February 27, 13
![Page 28: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/28.jpg)
KEEP ME IN THE LOOPNotifications
Wednesday, February 27, 13
![Page 29: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/29.jpg)
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
notifications
Wednesday, February 27, 13
![Page 30: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/30.jpg)
30 of 46
notificationsNew message
Wednesday, February 27, 13
![Page 31: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/31.jpg)
THE (NOT SO) GREAT IDE DEBATEDevelopment environment
Wednesday, February 27, 13
![Page 32: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/32.jpg)
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
Development Environment
Wednesday, February 27, 13
![Page 33: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/33.jpg)
33 of 46
Development EnvironmentIDEs
Wednesday, February 27, 13
![Page 34: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/34.jpg)
• Git
• Maven
• Jenkins
• Sonatype Nexus
Development Environment
34 of 46
Other Tools
Wednesday, February 27, 13
![Page 35: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/35.jpg)
BACK TO THE FUTUREBackward compatibility
Wednesday, February 27, 13
![Page 36: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/36.jpg)
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
Backward compatibility
Wednesday, February 27, 13
![Page 37: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/37.jpg)
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 MurphyThe Busy Coder’s Guide to Android Development (v4.2)
37 of 46
Backward compatibility
Wednesday, February 27, 13
![Page 38: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/38.jpg)
38 of 46
Backward compatibilityAction Bar
Wednesday, February 27, 13
![Page 39: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/39.jpg)
39 of 46
Backward compatibilityFragments
Wednesday, February 27, 13
![Page 40: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/40.jpg)
40 of 46
Backward compatibilityCustom Back Ports
Wednesday, February 27, 13
![Page 41: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/41.jpg)
41 of 46
Backward CompatibilityNumber Picker
Wednesday, February 27, 13
![Page 42: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/42.jpg)
IF it ain’t brokeTesting
Wednesday, February 27, 13
![Page 43: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/43.jpg)
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
Testing
Wednesday, February 27, 13
![Page 44: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/44.jpg)
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
Testing
Wednesday, February 27, 13
![Page 45: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/45.jpg)
45 of 46
TestingRobolectric
Wednesday, February 27, 13
![Page 46: HowAboutWe... Build an Android App](https://reader034.fdocuments.net/reader034/viewer/2022051513/546398e9af79597e338b4590/html5/thumbnails/46.jpg)
Build AN ANDROID APPLessons learned building
HowAboutWe Dating for AndroidChuck Greb
Wednesday, February 27, 13