howaboutwe... build an android app

Build AN ANDROID APPLessons learned building

HowAboutWe Dating for AndroidChuck Greb

@ecgrebchuck@howaboutwe.com

Wednesday, February 27, 13

2 of 46

Fast Company

Wednesday, February 27, 13

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

• 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

• 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

• 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

Cross Platform DesignDesigning for multiple platforms

Wednesday, February 27, 13

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

9 of 46

Android Design

Wednesday, February 27, 13

10 of 46

Pure AndroidAndroid, iOS, and mobile web.

Wednesday, February 27, 13

LOOK AND FEELCustom UI components

Wednesday, February 27, 13

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

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

14 of 46

BUTTONSJelly Bean v. Gingerbread

Wednesday, February 27, 13

15 of 46

BUTTONSJelly Bean v. Gingerbread

Wednesday, February 27, 13

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

17 of 46

SPINNERSJelly Bean

Wednesday, February 27, 13

18 of 46

SPINNERSGingerbread

Wednesday, February 27, 13

19 of 46

Edit BasicsJelly Bean

Wednesday, February 27, 13

20 of 46

Edit BasicsGingerbread

Wednesday, February 27, 13

THE GREAT MAIN MENU DEBATEHome screen and navigation

Wednesday, February 27, 13

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

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

24 of 46

Dashboard

Wednesday, February 27, 13

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

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

27 of 46

Sliding Menu

Wednesday, February 27, 13

KEEP ME IN THE LOOPNotifications

Wednesday, February 27, 13

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

30 of 46

notificationsNew message

Wednesday, February 27, 13

THE (NOT SO) GREAT IDE DEBATEDevelopment environment

Wednesday, February 27, 13

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

33 of 46

Development EnvironmentIDEs

Wednesday, February 27, 13

• Git

• Maven

• Jenkins

• Sonatype Nexus

Development Environment

34 of 46

Other Tools

Wednesday, February 27, 13

BACK TO THE FUTUREBackward compatibility

Wednesday, February 27, 13

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

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

38 of 46

Backward compatibilityAction Bar

Wednesday, February 27, 13

39 of 46

Backward compatibilityFragments

Wednesday, February 27, 13

40 of 46

Backward compatibilityCustom Back Ports

Wednesday, February 27, 13

41 of 46

Backward CompatibilityNumber Picker

Wednesday, February 27, 13

IF it ain’t brokeTesting

Wednesday, February 27, 13

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

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

45 of 46

TestingRobolectric

Wednesday, February 27, 13

Build AN ANDROID APPLessons learned building

HowAboutWe Dating for AndroidChuck Greb

@ecgrebchuck@howaboutwe.com

Wednesday, February 27, 13