×

Porting from Android 4.x to Series 40 full touch

Android UI has faced a number of fundamental changes over time. While Android 2.x and Series 40 full touch use many similar UI concepts, the newer Android versions incorporate UI components and patterns that are not directly portable. This topic describes the new UI concepts introduced in Android OS 4.0 and OS 4.1 and how to port the UI design to Series 40 full touch UI. Portions of this page are reproduced from work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License.

Android comes with several screen variations whereas Series 40 full touch devices use only one screen size, 240x400 pixels. Most comparable Android devices naturally have small screens, like Samsung Galaxy Mini S5570 (screen 240 x 320 pixels, 3,14 inches), and that is also the scope of this article. Porting from large screen Android phones (for example, devices with 5.0’’ screens) to Series 40 full touch usually requires an intermediate step: redesigning the application for a small screen Android device. After that, UI conversion to Series 40 full touch is much easier.

Android OS 4.1 uses two navigation orientations, horizontal and vertical. In the Series 40 full touch devices, navigation is based on lists. Horisontal scrolling/swiping should not be used, but instead, vertical scrolling is preferred in all situations. For more information on Series 40 gestures, see Strokes and Gestures section in Series 40 Full Touch Design Guidelines.

Before going into details of how to convert individual components, it is good to understand how the application design should be changed. A major problem typically is that the applications are not restyled to follow the target platform conventions. This is a universal problem whether the apps are converted to Series 40 or some other platform. It is good to distinguish the app branding and the logic (navigation and and other patterns) from each other. Series 40 phone users are familiar with their own phone and apps, and as an Android phone functions differently, an Android app in the Series 40 full touch phone would feel very uncomfortable and strange.

When dealing with high-level UI components, many of the platform conventions and styles are automatically applied to the application. There are still things such as application icon design that need conversion (see the figure above showing the Series 40 full touch surround icon style). The problem mostly occurs in the custom user interfaces that may have been directly ported to the target platform. However, also custom designs for small screens are easy to transfer to Series 40 full touch as shown in the the example pictures from Picasa Viewer application: the application's distinctive UI look and feel can be preserved while Series 40 full touch navigation elements such as category bar and Back button are taken into use to make the application use consistent with the other phone apps.

Chrome and touch areas

Visuals Android OS 4.1 Series 40 full touch

  1. Action overflow
  2. Action buttons (Android OS 4.1 phones with less than 320 dp width have only 2 buttons in the action bar – one is usually used for action overflow)
  3. App title (icon is also allowed)
  4. (Fixed) tabs; recommended maximum number is three; usually only contain text
  5. Back button (used to be on the right in the previous OS versions, and also existed only as a hardware button in older Android OS versions).
  1. Options menu
  2. Action button #1
  3. App title
  4. Category bar with up to 15 entries; uses icons only in the bar, and icons + text in the category bar extension
  5. Back button
  • Touchable Android OS 4.1 UI components are generally laid out along 48 dp (density-independent pixel) units.
  • Recommended minimum UI layout grid in Series 40 full touch is 49 px (43 px + 6 px). However, the size difference here is so minimal that it will not have any impact on the overall quality of your app, so if everything is custom designed in the 48 dp scheme in the Android OS 4.1 app, you can transfer it directly to Series 40 full touch.

Notifications

Here is a list of prominent design-affecting features that exist in Android OS 4.1 and not in the Series 40 full touch phones:

  • Series 40 full touch has no multitasking.
    • It is not possible to put tasks to the background.
    • It is not possible to listen to anything in the background (for example, mails).
    • Your app will close as soon as the user leaves it.
  • Series 40 full touch notification bar is not accessible for application developers.
However, there is a way to wake up the application with an incoming message by using Push Registry.

Data selection mode

  • In Android OS 4.1, long press gesture is used to put the application into selection mode.
    • The number of selections made in the new view has an effect on the available options for handling them.
  • In Series 40 full touch, long press gesture is used to open an item related menu (long press menu, context menu).
    • (Older Android versions, prior to OS 4.0, had this long press functionality.)

Backstepping

  • Android OS 4.1 allows two backstep paths (see the upper left image for an example).
    • This may sometimes be confusing for the users, as it is possible that they "return" to a page they have never seen before.
  • In Series 40 full touch, backstepping is always strictly hierarchical.
    • It is only possible to backstep to a previous view; user never arrives to views she has not seen before by backstepping.
    • Slight simplification of the information architecture may be required when porting.

Tabs

Android OS 4.1 uses:

  • Fixed tab
  • Scrollable tab
  • The tabs have text labels only

Series 40 full touch uses:

  • Category bar and category bar extension
    • Easier to use, especially compared to the scrollable tab on small screens, as less interaction is necessary: no swipe, only button press to see more categories.
    • Only icons allowed in the category bar.
    • Both text and icon are allowed in the category bar extension.
  • Android OS 4.1 apps usually do not feature inherited tabs (although the Android documentation does not explicitly instruct to avoid such behaviour). However, iOS apps do use inherited tabs frequently, and an Android app that has been originally ported from iOS usually preserves this.
  • Series 40 full touch category bar is not inherited to a lower level, so check whether this is the case in the original application and if necessary make changes to the information architecture when porting to Series 40 full touch.
The example image on the left is a bit unfair for visualisation, because you see a rather large Android phone (360 x 640 dp) versus a Series 40 full touch phone with only 240 x 320 screen resolution (here in landscape orientation). However, this kind of apps exist.
  • The number of bars should be reduced in both examples, not just in the Series 40 full touch one.
  • However, due to the space constraint it is crucial to minimise the number of bars in Series 40 full touch. In this example only the category bar should be used and only if it essentially helps with the navigation.

Drawer and action bar spinner

  • In Android OS 4.1, drawer is usually used to jump to different views in an application.
  • In Series 40 full touch, category bar can be used to do the same.
    • However, category bar is restricted to 15 items, while the drawer can list unlimited items.
    • Category bar items must have an icon and text (text only displayed in the category bar extension).
  • In Android OS 4.1, action bar spinners are often used for filtering.
  • In such a case, it is possible to use category bar in Series 40 full touch for showing the same content with different filters (like "All", "Favourites", "New").
    • However, Series 40 full touch category bar should only be used for changing views, not for actions. So in cases where the Android OS 4.1 action bar spinner contains actions that can not be replicated with view changes, information architecture probably needs to be changed when porting.

Action buttons

  • Android OS 4.1 offers an action bar and a bottom bar to host, for example, five actions + the overflow icon.
    • If there are only few functions only the action bar may be used.
    • However, on a device with a small screen the action bar has space only for one action and the overflow icon.
  • In Series 40 full touch actions can be implemented in the following ways:
    • The most important action into action button #1, all the other actions into the options menu.
    • Or, if there are only few functions, you can create a custom view in the content area and place action icons there.
  • In Series 40 full touch ready-made buttons are only available as a Form item.
    • Technically these are StringItems, dressed up as a button.
    • This also means that only one button item can exist on a single row when standard UI components are used.
  • If you want something different you have to create a button yourself:
    • Either as a custom item in a Form, or
    • As a custom item in a canvas.
  • Alerts also have ready-made buttons, but in practice they cannot be used for anything else; they are predefined for alert use only, and their appearance cannot be changed.

Form spinner

  • This is a typical example of a radio button group use, in this case dressed as a ”Spinner” in Android OS 4.1, and as pop-up choice group in Series 40 full touch.
    • The functionality is exactly the same.
    • There are differences in the layout, but this ensures it works also on phones which have a small display.
    • If it possible to have nothing selected, remember to add an item "no selection" (this naturally holds true for both platforms).

Dialog

  • In Android OS 4.1, the "positive" continuation button is always located on the right.
  • In Series 40 full touch, the "positive" continuation button is located either on the left (two buttons layout), or on the top center (three buttons layout).
    • The three buttons are available due to legacy reasons, but they have proven very useful in certain conditions, for example, if you want to offer more information before the user draws a decision – one button could be ”help” (located on bottom left, in case of three buttons).
  • Series 40 full touch dialogs are based on alert, form, or popup list and match Android OS 4.1 use case.
    • Most of the dialog types found in Android OS 4.1 have counterparts in Series 40 full touch.
    • Sometimes a direct overlay is not available in Series 40 full touch. In such cases a form has to be used instead. Form is versatile enough to be used as a dialog as well.

Switch

  • In Android OS 4.1 there are three kinds of switches: checkboxes, radio buttons, and on/off switches.
  • In Series 40 full touch there are no on/off switches, and the checkboxes and radio buttons need to be either a part of a list (where an entire view has the same switch type) or part of a form (where a certain set of elements is grouped for a certain switch type).
    • It is not possible to add radio buttons or checkboxes independently, except in a canvas.
    • On/off switches could be replaced with a pop-up choicegroup that has two items.

Progress indicator

  • Android OS 4.1 supports both global progress indicators (indeterminate and determinate) and custom-made item specific indicators.
  • In Series 40 full touch, ready-made global progress indicators are available as well (indeterminate and determinate). For Android OS 4.1 custom-made item specific indicators similar indicators need to be created as custom components when porting.

Last updated 9 July 2013

Back to top