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

Looping ViewPager - Small hack to make ViewPager loop through screens

For my Android app, I am using ViewPager to get a cool animation navigating by swiping cards left and right. The supporting Android class FragmentStatePagerAdapter does all the heavy lifting but also restricts few features.

For example, I was looking for a looping ViewPager, where on first swiping back from first page takes you to last page, as well on swiping forward on last page takes you back again to the first page and this loop continues.

I checked on stackoverflow for any clean solutions, but I was not satisfied with the hacks detailed over there. I did some brainstorming and started working on my own design.

So, I decided instead of having "n" pages in my ViewPager, I will have "n+2", that is additional 2 pages. I have 2 variables here, position - a zero index based variable specifying page number in ViewPager and contentIndex - an index of string array I am displaying as ViewPager cards. These additional 2 pages would be the first page at position 0 which would display the content at the last index of array, and the last page at position n+1 which would display the content at index 0. Thus for content at index 0 and n are being displayed by 2 pages.

Then I listen for OnPageChange events. For these 2 special pages, as soon as I land on them, instead of displaying these pages, I switch the page to go to the original page that was already displaying it at its proper position. I navigate to it without any animation.

For e.g. if I come to position 0 which displays the last content of array, instead of being at position 0, I switch it to position n which was displaying the same content. The switch is instantaneous, although if you watch closely, you will notice a sort of jerk that happens. Similarly I switch to page at position 1 as soon as I land on page at position n+1.

A project with complete implementation of above hack can be found on Github @anagri/ViewPagerLoop

The screenshots from the above app looks like -

The core logic in code is ->

If you found this helpful or have any suggestions, kindly leave a comment.
Thanks

Learning Android Using Online Tutorials and Resources - A Comparison

I consulted the following resources to learn Android -

1. Udemy Learn By Doing Android
2. Lynda: Android SDK Local Data Storage
3. Lynda: Connecting Android Apps to RESTful Webservices
4. Vogella Android Text Tutorials
5. Google Android Developer Training
6. SlideNerd: Fragments in Android

I came up with a quick coverage matrix of each of the courses and how they fare covering various topics -

Areas	Udemy	Lynda Data	Lynda RESTful	Vogella	Google Android	SlideNerd
UI	Y	-	-	Y	Y	-
Animation	N	-	-	Y	Y	-
Fragments	N	-	-	Y	Y	Y
Activity	Y	-	-	Y	Y	Y
Services	Y	-	-	Y	Y	-
Debugging	Y	-	-	-	-	-
Database	N	Y	-	Y	-	-
Networking	N	-	Y	-	-	-
Multithreading	N	-	Y	-	-	-

The above table can be interpreted using -
Y = Sufficiently covered
Y = Sparsely covered
N = Expected but not present
- = Not Applicable

I will follow up with details of each of the tutorial, strength, weakness and suitability. Kindly leave your comments on how I can enhance the above matrix, including additional areas and trying out other tutorials.

Eclipse Requiring JDK 6 Post OSX Maverick Update

I upgraded to Maverick OSX a few days back. Then when I started my ADT Eclipse back, surprisingly it threw a modal window asking for JDK 6 and asking to install if it didn't exist.

I checked through commandline that I had JDK 7 and on the path, so it was puzzling why Eclipse is behaving strangely. I was in no mood to install another JDK, that too one with out of End of Life support. So a quick googling I came across an easier solution that I am sharing here for everyone's benefit.

1. Open folder /Library/Java/JavaVirtualMachines/jdk.1.7.x/Contents/
2. Open Info.plist
3. Replace line 
   With this
   
4. Log out or Restart your machine

Hopefully this should help and work for you.