2D Picker UI Pattern for Android Wear

2D Picker UI Pattern for Android Wear

Android watch is the new thing to explore for Android developers.While it is fun to develop apps with the the same UI principles of Android mobile phones,it is worth looking at googles UI recipes for watches.One of the most interesting UI patterns that I like is 2D Picker pattern.In this article I will explain the need of 2D Picker pattern and present an example project to play with.

2D Picker patterns is very nicely thought recipe for a small screens. Imagine we are developing flight status watch application for our ImagineAir airlines.The objective of the application is to provide informations of all the flights . If we are developing a mobile application the design should start with a selection for cities,then present a scroll view of all the flights departing and arriving the city.If the user selects a flight he or she will be provided the detailed information.But if I have to do the same for a watch it will be a bad user experience . The user will be bombarded with information in a very small screen.

Now lets think about the same information to be presented differently.We present very little information on demand.And that is the objective of 2D Picker pattern.So We allow the user to select whether arrival or departure information is required.Once selected let the user navigate cities by down swipe.User can swipe down to find a new city. While in a city it can be swiped right to fight the details of the flight one after another right swipe .On swiping down the user can see the next city or on swiping to right the user will be presented with the flight details one at a time.

So the user is navigating down or right to find deeper information as he or she needs.It is a nice experience ,less confusing and information is on demand.We need to remmeber that navigation should be vertical and then horizontal just like we write bulleted headings one below another then expand each bullet horizontally.

For example:

 

 

Note : Select Arrival or Departure. Then swipe down for city selection. For every city swipe right once to get the flight status of one flight.Keep swiping until it finishes.

 

Implementation

The implementation is simple.For every intent we need to write an adapter class to

provide data to the intent .

Here is the link for the example project.Have fun playing with it.You need Android Studio to import this project and play with it.

https://github.com/tapasb/ImagineAir

This entry was posted in Android Apps and tagged , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

17,571 Spam Comments Blocked so far by Spam Free Wordpress

m2 O

Please type the text above:

HTML tags are not allowed.