Cyril Mottier

“It’s the little details that are vital. Little things make big things happen.” – John Wooden

Google Maps Android PSD V2

A year ago I shared some graphic assets to help developers and designers create applications that are consistent with other map-based Android UIs. At that time, Google Maps Android API v2 didn’t exist and developers had to use the Google Maps External Library which was - I won’t mince words - so poorly implemented you had to create everything on your own (markers, info windows, etc.)…

The release of Google Maps Android API v2 has been a huge step forward regarding map rendering capabilities on Android. The new framework has suffered and still suffers from sometimes unpleasant drawbacks1. From a designer point of view, it has one main advantage over the previous framework: it is bundled with a bunch of default resources. In other words, Google Maps Android API v2 helps developers with no particular design-skills to create nice-looking maps and improve design consistency through applications.

Even though Google Maps Android API is fulfill developers needs 90% of the time, there are still some cases where you might want to create your own graphic resources while still respecting the visual style of maps on Android. For instance, Google Maps Android API v2 does not allow developers to set the accent color of the “My Location”, “Zoom in” and “Zoom out” buttons when pressed. Thanks to this PSD, you can easily replicate the overall appearance and behavior of the original MapView controls. Hence, you can easily ensure your app pressed color is use throughout the entire UI.

Personally, I used this updated version of the PSD in order to create mockups for a future and groundbreaking version of an application of mine called AVélov. This resources helped me to produce polished and realistic mockups I can directly use as a starting point for early-stage user-testing.

"Preview of Google Maps Android PSD v2"

As for the first version, I ensured the PSD respects a certain hygiene: made only of vector-based elements, sensibly layered, named and grouped, etc.2 The PSD is using a Nexus 4 form-factor (1280x768 pixels, xhdpi, etc.) and have been created with Photoshop CS6 but should work properly with all recent versions of CS. Also note the following resources are licensed under the CC BY 3.0:

I really hope you’ll find this PSD useful to create stunning MapView-based applications.

  1. The drawbacks I’m talking about mainly come from the design decisions behind the implementation of Google Maps Android API v2: inter-process calls (IPC), non-standard Views, etc. This is the exact same design decisions that make the map rendering pipeline so efficient and easily updatable (through the Google Play Services APK).
  2. I’ve also created an issue on the Google Maps Android API v2 bug tracker to inform the team the currently bundled “"zoom in/out” and “my location” icons looks blurry and/or aliased. You can obvioulsy favorite the issue it if you want.