‘Pure Android’ – Adapting an iPad design to Android tablets

Introduction

For the past 3 months I have been working closely with the digital agency Involved to bring their iPad app ‘Accor Hotels & Resorts Asia Pacific’ to Android.  The Accor hotels iPad app works as an interactive catalog, allowing users to browse through the thousands of hotels that Accor Asia Pacific manage.  Users can view hotel details, browse a map and view galleries containing photos of each hotel.

Because it is primarily a marketing tool, the look and feel of the app is very important.  The iPad app has smooth animations, beautiful images and a premium, dark ‘navy blue’ theme.  It is obvious that Involved had put a lot of thought into its design and appearance.  While planning the project it became clear early on that successfully adapting the app’s appearance to Android would be one of the key tasks in the project.

Overview of the iPad app

The iPad app has the following design features:

annotated ipad in frame

1 – Tabs at the bottom, for switching views in the left pane

Large square tabs, with an icon and text are a common iOS design element.  In this case they switch between different views of the hotel list in the left pane.

2 – Left pane navigation bar

Inside the left pane users can drill down through various hierarchical lists of hotels.  To navigate back up the hierarchy a navigation bar, with a back button is displayed.  The navigation bar title shows the current country or state the user is viewing.

The navigation bar also contains a button which allows users to launch a map where they can browse through hotels.

3 – Premium blue theme

A key component of the iPad apps branding is the dark blue theme.  The app makes use of navy blue palette along with customised icons.  There is also heavy use of gradients throughout the ui.

4 – Custom buttons, including ‘more’ button

The Accor directory app features shiny silver buttons, with blue text.  In this case the more button displays a menu where the user can access additional information about the hotel, including business facilities, links to book online, etc.

5 – Accor branding, settings button

The Accor logo is featured throughout the app.  In this case clicking on the button displays an about screen.  Selecting the settings icon displays a dialog which allows users to download all the hotel galleries and perform an update of hotel data.

6 – Updates

The application downloads the list of hotels from a restful webservice and stores them in a database on the device.  This allows the app to be used offline.  Due to iOS restrictions with running background processes the app can only download hotel updates while it is being used.

An aside – What not to do

Before talking about what we did, it’s worth talking about what we didn’t do, namely this:

framed_IMG_3060

Yes, that is the original iPad ui stretched out and pasted into a Nexus 10.  There are a number of reasons not to do this, which I have explored in an earlier blog post, but the two most important ones when I discussed the issue with Involved were:

  • Users of the Android app would probably never see the iPad app.  They wouldn’t care if the two apps were exactly the same or different.  They would however care a lot if the Android version of Accor directory was totally different to the other apps they used daily.
  • Replicating the iOS ui exactly would cost a lot – it would be significantly cheaper to build using the standard controls that google provide, using the holo theme.

1 – Introducing the action bar

The first step in adapting the Accor Directory apps design to Android was to introduce the action bar to replace the iOS navigation bars.  In Android the navigation bar provides a dedicated area for app navigation and actions to live.  The settings button, map button and about button were all moved into the action bar.  Android’s stock icons were used instead of the iOS versions.

This only left the navigation tabs.  There were three different options for adapting them to Android:

tabs mockup 2

  1. Place them in the action bar
  2. Place them below the action bar at the top of the left pane
  3. Place them at the bottom of the left pane

Each approach had its own pros and cons, but in the end we decided to place them in the action bar using text with no icons.  Android users typically expect navigation tabs to live in the action bar.  This is the approach featured in the android design guidelines.  Android devices commonly have a wider aspect ratio than iOS (16:10 on the nexus 10  vs 4:3 on the iPad).  This means vertical screen space can get scarse.  Approach 2 and 3 would have used up a larger amount of it, while leaving a big empty area in the action bar.  Finally under Android it is rare to see icons and text combined on tabs.  It was felt that the icons used on the Accor directory tabs would be too obscure for the user to guess at their meaning.

The last action bar tweak was to the apps icon.  Android will by default place the applications icon in the left corner of the action bar.  We decided to instead replace this with a white Accor logo to provide a cleaner feel.

The final result:

action bar

2 – Navigating through hotels

Within the iPad app users can navigate up and down a a hierarchy of hotels, drilling down based on country, state and then city.  Under iOS the current location and back button were placed in a navigation bar at the top of the screen.  In Android this space had been replaced by the action bar and tabs.  After some experimentation it was decided to place the current location in a blue header at the top of the list, followed by a ‘back’ list item leading up the hierarchy.  The blue in the header tied in with the blue underline on the selected tab.  This helped to hint visually that the tab selection was linked to the content of the left pane:

left bar navigation

3 – Navy blue theme

As has already been seen, the dark navy blue theme forms a key part of the apps branding.   Using the Android Action Bar Style Generator and the Android Holo Colors Generator we were easily able to customise Androids ‘holo dark’ look and feel to match the Accor directory colours.

The original version of the theme I produced used a gradient for the action bar which matched the iPad app’s navigation bars:

old theme

After some thought it was decided to replace the gradient with a solid lighter blue colour.  This is because ‘holo’ look and feel apps tends to emphasise flat blocks of colour and makes minimal use of gradients.  Choosing a slightly lighter colour also helped to differentiate the action bar from the rest of the screen:

new theme

The difference is subtle, but important and contributes towards the apps ‘pure Android’ feel.

4 – Custom buttons

The iPad app makes use of custom buttons with a shiny metalic look.  We decided not to use the same look on the Android buttons, as holo apps typically have a very flat style.  Instead it was decided to use the standard Android buttons, but tweaked to follow the apps colour scheme.  The assets for the buttons were generated using the Android Holo Colors Generator.  In their normal state the buttons appear to be standard Android buttons, but in their pressed state the custom colour shows:

book hotel pressed

5 – Updates as a background service

iOS does not allow applications to run in the background.  Therefore the iPad app can only download updates to its hotel database while it is running.  Android has no such restriction, so it was an obvious improvement to add a background service which downloads hotels.  While the download is running a notification is displayed in the system tray:

updating

6 – Portrait view and managing different aspect ratios

The iPad version of Accor Directory only supports landscape view.  Coming into the Android project we knew the the screens would have to be designed in a flexible manner to support different screen sizes and resolutions.  This meant the app would also support both portrait and landscape views unless it was explicitly disabled.  We were unsure how much work would be involved in tweaking the application layout for portrait orientation.  We decided to do the development with only landscape in mind, then at the end of the project make a choice to either apply a few tweaks and make portrait view work better or to lock the app to only landscape orientation.

In the end the app worked remarkably well in both orientations.  We ended up performing two tweaks to enhance portrait orientation:

In portrait orientation the space for the hotels name was very limited.  This meant that the ‘more’ button simply wouldn’t fit.  We decided to replace the ‘more’ text with Android’s ‘three dot’ menu icon.

portrat hotel name

Secondly we adjusted the padding around dialogs to ensure they fit.  In landscape mode the apps dialogs have padding to the left and right.  We simply adjusted this in portrait so that the padding was above and below the dialog:

landscape dialog

Finally we found that the widescreen aspect ratio of Android devices meant some content that would fit in comfortably on the iPad didn’t fit on Android.  In particular the hotel view either had to have a letterbox sized image, or the text would not fix on the nexus 7.  After some playing around with font sizes and image heights we decided to instead introduce a scroll bar and have the user move down to view any additional text:

scroll bar

 

Conclusion

You can try out the end result in the google play store:

Get it on Google Play

I believe one of the key success factors is that Involved came to the Android port with an open mind – they were willing to alter the design of the application where ever necessary to ensure that it worked well on the Android platform.  They also realised early on, that time and effort would need to be invested in producing proper Android UI, rather than just copying everything wholesale from the iOS app.

Another important factor was attention to detail.  The kind of obsessive focus on design that is needed to create a great iOS app is often discussed in blog posts – however just as much attention and effort is required to build a great Android app.

The app has received fantastic feedback both from Involved, and Accor themselves.  By borrowing the most distinctive elements from the iPad version but carefully adapting them, we were able to build an app that is instantly recognisable as ‘Accor Directory’ but also is pure Android.