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
great post thanks for sharing
ReplyDeleteOnline Selenium Training | Selenium Training Institute in Chennai | Best Selenium Training Center in chennai | Best Automation Testing Training in Chennai
the touch isnt removing it
ReplyDeletegood working code thanks
ReplyDeleteGood Post..Its really awesome Blog, keep updating..
ReplyDeleteNo.1 Electrical Project Center in Chennai | Electrical Project Center in Velachery
Good job! Fruitful article. I like this very much. It is very useful for my research. It shows your interest in this topic very well. I hope you will post some more information about the software. Please keep sharing!!
ReplyDeleteBlue Prism Training in Chennai
Blue Prism Training Chennai
Blue Prism Training in Velachery
Blue Prism Training in OMR
Blue Prism Training in TNagar
Blue Prism Training in Annanagar
Magnificent article!!! the blog which you have shared is informative...Thanks for sharing with us...
ReplyDeleteDigital Marketing Training in Coimbatore
Digital Marketing Course in Coimbatore
digital marketing institute in bangalore
best digital marketing courses in bangalore
digital marketing courses in bangalore
digital marketing training in bangalore
Software Testing Course in Coimbatore
Spoken English Class in Coimbatore
Web Designing Course in Coimbatore
Tally Course in Coimbatore
best body massager india
ReplyDeleteonline earning whatsapp groups
ReplyDeleteYou ought to be a part of a contest for one of the finest websites on the net. I am going to highly recommend this blog!
ReplyDeleteTech PC
Thanks for sharing such a wounderful blog, this blog content is clearly written and understandable.
ReplyDeleteDevOps Training in Chennai
DevOps Training in Bangalore
Best DevOps Training in Marathahalli
DevOps Training Institutes in Marathahalli
DevOps Institute in Marathahalli
DevOps Course in Marathahalli
DevOps Training in btm
DOT NET Training in Bangalore
Spoken English Classes in Bangalore
Data Science Courses in Bangalore
The compelling discussion deserves comment. I see you have to be more sensible at this point, it's probably not a problem to avoid it, but normally people don't look at these problems. Visit my digital buzz for digital news.
ReplyDeleteSuch a very useful article. Very interesting to read this article.I would like to thank you for the efforts you had made for writing this awesome article. Enhance your chances of success in GCSE Board exams with Ziyyara Edutech’s specialized online home tuition program.
ReplyDeleteFor more info visit GCSE online tuition