The Android UI Style has undergone considerable changes after the release of Android OS 3.0 and OS 4.0. From the point of view of app porting, perhaps the most significant development is the evolution of the Android Action Bar into the command and control center of Android apps. A closely related shift in the user experience is the removal of the Menu Button. After Android 3.0, the entire array of HW buttons has been moved to the SW Navigation Bar. In addition to these major modifications there are several other style changes that have an impact on UI porting.
The changes in the Android UI Style explained in this article include:
|Visuals||Android OS 4.1|
Figure 1. Basic layout in Android 4.1
|The new layout in Android 3.0 (and later) devices makes the action bar the center of the app. Smaller apps can place all navigation and action elements into the action bar. More complex apps usually split navigation and actions to different bars, for example, to the tab bar and to the bottom bar. Note that the figure on the left includes all main layout components. Usually apps do not utilize all of them at the same time.
|Basic layout in Nokia Asha (Options menu closed/open)||The layout of Nokia Asha devices provides a clear and intuitive way to 1) navigate between different screens 2) find key actions and 3) backtrack steps.
Figure 2. Backstepping in Android 3.0 (and later) and Nokia Asha
In Nokia Asha, backstepping is strictly hierarchical. This means that the Back button always leads to the previous view in the view hierarchy. This makes the backstepping simple to learn and understand. It also ensures that the user never arrives to any views he has not seen before. For more information, see Back key behaviour section in Nokia Asha Design Guidelines.
In general, one of the first things you need to do when porting Android apps to Nokia Asha is to make sure that the information architecture fits the navigation model of Nokia Asha devices. It is likely that a slight simplification of the information architecture is necessary.
Figure 3. The navigation drawer in Android
The Nokia Asha UI style favours simple solutions to navigation. If you are porting an Android app that uses the navigation drawer, it is probably best to create a dashboard for the Nokia Asha app. You can use list or grid components for the top level view and rely on hierarchical drill-down navigation. It is a good idea to consider whether the app information architecture could be simplified from the Android version.
Note that according to the Android UI style, the navigation drawer can also be opened by swiping from the left edge of the screen. In Nokia Asha, this gesture is reserved by the platform to provide fast access to the Home views. For this reason, it is not possible to build a custom component with the exact same function as the navigation drawer.
The new action bar in Android 3.0 (and later) devices has been designed to contain navigation components and action components. The nearest corresponding element in Nokia Asha UI style is the category bar. However, it is not possible to mix navigational components and actions in the category bar.
Figure 4. Android action bar
In Nokia Asha, the Back navigation is always handled by the HW Back key. Apps should not provide a software Back button anywhere on the screen. Nokia Asha UI style has no direct counterpart for the navigation drawer. Basic app architecture in Nokia Asha apps is based on either tab-based parallel views or on drill-down navigation via lists or grids. When porting an app that contains a complex view architecture (more than 4 parallel views provided in the spinner, in the navigation drawer or in scrolling tabs), some simplification is probably a good idea. Another option is to design a top-level dashboard grid or list that is able to show all the different views provided in the Android UI.
Note that smaller Android apps can easily use the action bar to provide all necessary UI elements, but more complex apps will most likely need to split actions and navigational elements to different UI components, such as the bottom bar and tab bar.
In Android 3.0 (and later) devices, there are no more HW buttons. Instead, the later devices use a navigation bar that provides the following SW buttons: Back, Home and Recents. Another significant change is the absence of the Menu button. The new Android UI style has abandoned the menu approach in favor of the multipurpose action bar. The goal is to make key actions immediately visible and show the action overflow menu right next to the key actions.
Figure 5. Android navigation bar
It has been mentioned that the Android navigation bar may hold an "action overflow control" for those apps that still rely on the menu-based approach. It is essentially a way to display the legacy menu content without the menu button. If the app that you are porting contains the "action overflow control" menu, the most logical place for its contents is the Nokia Asha options list.
The Android Notification system has changed both structurally and functionally after the Android OS 3.0. Notifications can now be expanded with a pinch-zoom or two-finger glide gestures and it is possible to define a priority for a notifications as well as add 1-3 action buttons.
Figure 6. The layout of Android notification
Figure 7. Use the Nokia Notifications API for updates/info that the phone receives
Figure 8. Use LWUIT banners to show feedback related to the user's actions
Overall, Nokia Asha UI style has a non-intrusive approach to notifications, which means that people should be able to continue with their tasks without unnecessary interruption while still being informed about important events. When porting apps to Nokia Asha, consider the type and relative importance of each user notification carefully.
In Android 3.0 (and later) devices, the long press gesture is reserved for the data selection mode. This mode allows the user to select multiple data items and perform actions on the selected items. In the data selection mode, the action bar transforms into a Contextual Action Bar (CAB) which shows actions that are available for the selected items. This means that Android devices no longer have a contextual menu. All item specific actions are handled in the data selection mode which also offers multiselection.
Figure 9. Android data selection mode
The long press gesture in Nokia Asha evokes the item specific actions. The context menu resembles the options list and slides up from the botton of the screen. All item specific actions can be placed into the context menu supported in Forms. In canvas a similar functionality can be achieved by using a popup list component.
Figure 10. Context menu in Nokia Asha
Nokia Asha uses a different pattern for the multiselection of items. If the Android app that you are porting uses the Android’s data selection mode, you can use the multiselection mode available in Nokia Asha. First off, move all the actions that are available in the CAB (Contextual Action Bar) to the Options list. It is a good idea to name them in a way that suggests multiselection: “Share pictures”, “Delete songs”. Then, when the user selects one of these options, the multiselection mode is opened. The action that is available for the selected items should be presented with a command button in the category bar. Note that the options list in the multiselection mode should contain both "mark all" and "unmark all" functions.
Figure 11. Multiselection mode in Nokia Asha
Later Android devices have put effort into the development of home screen widgets. Nokia Asha does not provide home screen widgets. Instead, the UI style focuses on simplicity and offers fast access to relevant apps. The fastlane view provided as one of the main screens (parallel to the Home screen) contains some widget-type actions, as does the notification panel. The fastlane view provides information on and quick access to the apps/content that is currently relevant to the user, while the notification panel shows the latest information updates from all apps using the Nokia Notifications API. When porting an Android app that relies heavily on home screen widgets, you can consider the use of notifications to provide updates.
Figure 12. Nokia Asha fastlane view and notifications panel
Android devices (3.0 and later) allow applications to show badges whenever the application has something new to show to the user. Nokia Asha does not support badges on application icons, but as mentioned above, Nokia Notifications API serves the same function.
The new spinner component used in the Android action bar can also be used in forms for selecting one item. This is a typical example of a radio button group with a slightly different look and feel.
Figure 13. Form spinner in Android
The corresponding UI component in Nokia Asha UI style is the choice group (pop-up). Notice that in Nokia Asha, the actual "radio button" icon is not used. Instead, the entire row is highlighted. For more information about how to select a single item in Nokia Asha, see Single selection (LCDUI) and Single choice picker (LWUIT) . In Nokia Asha, the HW Back key is used to dismiss selection pop-ups/lists. In addition, in the popup ChoiceGroup tapping outside the popup works similarly.
Figure 14. Nokia Asha popup choice list
If there is the possibility to have nothing selected, remember to add a "no selection" item.
Last updated 7 July 2013
We appreciate your feedback.