howaboutwe... build an android app

Build AN ANDROID APPLessons learned building

HowAboutWe Dating for AndroidChuck Greb

@[email protected]

Wednesday, February 27, 13

mailto:[email protected]




2 of 46

Fast Company


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


http://www.youtube.com/watch?v=mp07dPusJNA

http://www.youtube.com/watch?v=mp07dPusJNA

• 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.





• Notifications



• Testing

Overview

5 of 46






• Notifications



• Testing

Overview

6 of 46



Cross Platform DesignDesigning for multiple platforms


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


9 of 46

Android Design


10 of 46

Pure AndroidAndroid, iOS, and mobile web.


LOOK AND FEELCustom UI components


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


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


14 of 46

BUTTONSJelly Bean v. Gingerbread


15 of 46

BUTTONSJelly Bean v. Gingerbread


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


17 of 46

SPINNERSJelly Bean


18 of 46

SPINNERSGingerbread


19 of 46

Edit BasicsJelly Bean


20 of 46

Edit BasicsGingerbread


THE GREAT MAIN MENU DEBATEHome screen and 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

NAVIGATION


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


24 of 46

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

DASHBOARD


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


27 of 46

Sliding Menu


KEEP ME IN THE LOOPNotifications


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


30 of 46

notificationsNew message


THE (NOT SO) GREAT IDE DEBATEDevelopment 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

Development Environment


33 of 46

Development EnvironmentIDEs


• Git

• Maven

• Jenkins

• Sonatype Nexus

Development Environment

34 of 46

Other Tools


BACK TO THE FUTUREBackward 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

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 MurphyThe Busy Coder’s Guide to Android Development (v4.2)

37 of 46

Backward compatibility


38 of 46

Backward compatibilityAction Bar


39 of 46

Backward compatibilityFragments


40 of 46

Backward compatibilityCustom Back Ports


41 of 46

Backward CompatibilityNumber Picker


IF it ain’t brokeTesting


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


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


45 of 46

TestingRobolectric


Build AN ANDROID APPLessons learned building

HowAboutWe Dating for AndroidChuck Greb

@[email protected]






howaboutwe... build an android app

Documents

overview lessons learned

building howaboutwe dating

buttons jelly bean

platform versions

mobile web

rich notifications

honeycomb devices

platform