×

Porting Android 3.X / 4.X app UIs to Nokia Asha

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:

  • Overall UI layout / arrangement of main components
  • Two different back navigation models: "Back" and "Up"
  • Navigation drawer
  • Action bar
  • Navigation bar
  • Notification system
  • Data selection mode
  • Home screen widgets and badges
  • Form spinner
Note: Porting from large screen Android phones (for example, devices with 5.0’’ screens) to Nokia Asha might benefit from an intermediate step: redesigning the application for a small screen Android device. After that UI conversion to Nokia Asha is much easier.

The New UI layouts in Android 3.0 / 4.0 and in Nokia Asha

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.
  1. Status bar

    Contains important status indicators. In the Android UI, the global indicators are grouped to the right, while pending notifications (such as missed calls, received messages) are grouped to the left. The status bar is static and it is not a touchable element.

  2. Action bar / Navigation

    The action bar is the command and control center of your application in the new Android UI. It contains (starting from the left), the "up" navigation button, the logo of your application, the optional spinner component, and key actions (see below).

    The spinner component can be used to replace the tab bar. It offers a fast way to switch between views. An Android app that has several parallel views has many options: it can use the new spinner component, the traditional fixedtTabs, or the scrollable tabs to provide horizontal navigation.

  3. Action bar / Key actions

    The action bar offers a visible place for the key actions in your application. It can comfortably show 2-3 key actions. The rest of the actions in the app are automatically placed into the action overflow menu (in the top right corner).

  4. Tab bar

    The tab bar can be either fixed (with a maximum of 4 items), or scrollable (with a larger number of items). As usual, the tab bar is used to provide horizontal navigation, never actions.

  5. Bottom bar

    Some apps split actions to a separate bottom bar. It can contain 4 items and an overflow menu for additional items. The bottom bar is suitable for Android apps that have more than 3 actions that need to be visible and accessible at all times.

  6. Navigation bar containing: Back, Home and Recents buttons

    In the latest Android devices, the HW keys have been replaced with SW keys and the Navigation bar.

    Probably the biggest change in Android 3.0 (and later) is the removal of the Menu button from the navigation bar. Note that for older apps that still rely on the menu, there is a halfway solution: an overflow item that is available in the Navigation bar.

    The Back button works historically and allows the user to backtrack his navigation path.

    The Home button provides a fast track back to the Home view.

    The Recents button allows the user to jump between recently used apps.

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.
  1. Status bar

    The status bar in the Nokia Asha provides global status indicators, in the same was Android devices. Note that in the case of dual sim cards, both signal strengths are shown in the status bar.

  2. Header

    The header bar shows the title of the screen. Note that the header bar area does not contain any actions in Nokia Asha.

  3. Category bar

    Nokia Asha apps are most often based on either tab-based navigation or on a list/grid based drill-down navigation. If the app uses tabs, the parallel views can be placed into the category bar. if the app uses drill-down navigation, the key actions can be placed into the category bar. Note that tabs and actions can never be mixed in the category bar.

  4. Options list

    The options list can be revealed by swiping up near the bottom edge of the screen. If the options list is available, the indicator is visible on the bottom of the screen. The options list usually contains spillover/secondary actions that do not fit into the category bar. The options list is also used to provide access to secondary views (such as, "Settings", "My Profile", or "About the app").

  5. Back button

    The Back button on Nokia Asha devices works hierarchically and provides an easy way to return to the previous UI state. Note that all dialogs can also be dismissed with the Back button.

Android 3.0 (and later) devices offer two backstepping paths

Android allows two different backstep paths: a historical Back button in the Navigation bar and a hierarchical Up button in the Action bar. The Back button follows the user's navigation path chronologically, while the Up button always follows the screen hierarchy. This is a very unique feature in the new Android UI, and it leads to a set of complex exceptions in the navigation model.

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.

Navigation drawer  

Navigation drawer is a new Android UI component that allows the user to find the most important views ("navigation hubs") in the application. It can be used instead of tabs when the number of main views is large and/or if the application benefits from having a fast way to switch between views or to access the top level. The navigation drawer can be opened by swiping from the left edge of the screen or by touching the application icon in the action bar. The navigation drawer supports icons, subtitles, counters and collapsible items. It is not designed to replace tabs; instead, it provides an alternative way to structure a complex app with a lot of navigation in many directions.

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.

Action bar

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

  1. The action bar contains the hierarchical Up button. Note that if the application uses the navigation drawer, the three lines that indicate the presence of the navigation drawer are shown instead of the Up arrow in the app's topmost view. When the user navigates deeper into the app hierarchy, the navigation drawer indication is not displayed, and the hierarchical Back button is shown in its place.

    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.

  2. The application icon is shown in the Android action bar; it can be used to open the navigation drawer. In Nokia Asha, the header bar displays the title for the application or the current view. App icons are not supported by the default header bar.
  3. The spinner component is another navigational element in the Android action bar. It has roughly the same function as the more conventional tab bar: it provides access to parallel views in the app. In Nokia Asha, the category bar is the component that can provide horizontal navigation. Note that the spinner component can contain more than four items, while the maximum number of items in the Nokia Asha category bar is four.
  4. In Android apps, the most important actions are available in the right side of the action bar. If you are porting Android apps that use the action bar to show key actions, you should move all key actions either to the category bar or to the options list. In Nokia Asha UI, the header bar does not contain any action, but it is possible to provide some actions as buttons in the main content area.
  5. Actions that are used less often are automatically placed into the action overflow menu. The goal here is to make sure that the Android UI does not become too cluttered. In Nokia Asha, the options list can be used to offer secondary actions in a very similar way.

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.

Note: Nokia Asha apps with special needs can be built with custom components that support tailor-made navigation solutions. Even then, the basic principles of the Nokia Asha UI style should be taken into account.

Navigation 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

  1. The historical Back navigation provided in the Android navigation bar allows the users to backtrack their steps chronologically. In Nokia Asha, the apps should never rely on historical Back navigation but only use hierarchical navigation.
  2. The Home button allows a shortcut back to the home view. In a very similar way, the swipe gesture in Nokia Asha (from left to right and vice versa) opens either the home view or the fastlane view. (depending on which one was opened more recently)
  3. The Recents button allows the user to access recent apps/activities. The fastlane view in Nokia Asha offers essentially the same functionality.

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.

Notification system

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

From the point of view of porting, the layout of the notifications is not as important as their purpose and value for the end user. When porting an app, consider each notification carefully from the user's point of view. Each notification requires the user's attention so the information it relays must be valuable. If the Android application you are porting uses a lot of different status/push notifications, Nokia Asha offers you two alternative choices: global push notifications via the Nokia Notifications API and LWUIT banners for in-app notifications. You can also use dialogs if the purpose of the notification calls for such a visible UI component.

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.

Data selection mode

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

Home screen widgets and badges

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.

Form sinner

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

Back to top

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×