Android Instructions Overlay - Showing a Screen Pointing To Hidden Navigation Features on First Launch

The demo code for this can be found @anagri/AndroidInstructionsOverlay.

With the advent of mobile apps, the standard patterns of UX are rapidly evolving. Each major release of Android or iOS brings with it some new and innovative UI features that is now the preferred way of interaction discarding the old one. Earlier, there were hardware buttons which are now replaced with onscreen buttons, menus are now replaced by the rich features of ActionBar and gestures open up a plethora of novel UX patterns everyday.

With so many UX patterns, it is very hard to convey to users on the first launch of app of the patterns you have used in your app. For some cases this problem can be solved by the Instructions Overlay screen. In this blog post I will take you through implementing one such simple application that uses this help pattern.

The Instructions Overlay is achieved by having an image that points to the main navigation features of the app, including gestures and setting this image to invisible by default. When the app is launched for first time, this image is displayed with a translucent background pointing to the actual widgets on the screen along with a concise instruction of using that widget. Also this is noted down in the preference/local datastore, so that this screen does not appear next time the app is launched. We also need to set a click listener so that if image is clicked or touched, it goes away. Optionally we can have a menu item which makes this instruction overlay image visible again for reference.

But with the screen size fragmentation, it is difficult to have a single image that displays the instructions. To overcome this issue, draw9patch tool is used to mark the areas that can be expanded if this image is being displayed on higher screen sizes. Just make sure the original image follows the aspect ratio of 4:3 which is the most common screen aspect ratio for Android devices.

This is how the instructions overlay looks on emulators running Galaxy Nexus S with screen resolution of 720x1280 and Nexus One with screen resolution 480x800.

Galaxy Nexus 720x1280 px

Nexus One 480x800 px

MainActivity.java
activity_main.xml