Your iOS app is in the App Store and is doing great in the charts. Doing so well in fact, that it’s time to organise a port to Android.
If you’ve never ported to Android, you may be wondering where to start. The good news is, it’s a fairly straightforward process and much easier than creating an app from scratch. Yes, there’s new code to write and UI to adapt, assets to export and QA to prepare for. But from the start, everyone on the team is clear about how the app should look and work. After all, it’s all there on iOS as a blueprint.
You’ve all heard about Android’s fragmentation problem. Apple devices are made by the same company, have a small range of screen sizes, and use the same operating software (iOS). Android devices are made by different companies, with thousands of different devices and many screen sizes.
Device fragmentation is a problem, but it’s not your problem. That’s because Android developers generally support just 5–10 of the most popular devices in their target market.
When choosing which Android devices to support, your intended audience is key. For example the five most popular devices in the USA are different to the most popular in North Africa. They will also run different operating systems and have different hardware components.
For European and North American clients, as of December 2017, we regularly support:
For clients in North America, Europe and Australia, we usually recommend supporting the current operating system plus two back. For an Android app with an audience in a country like the USA, that currently means versions 8.x (Oreo), 7.x (Nougat) and 6.x (Marshmallow).
Depending on your target market and the type of app you want, you may want to consider going one more OS level back. Android users don’t get OS updates as quickly as their iOS counterparts, and sometimes their device manufacturer may not decide to release an update for their device. This means that a relatively high percentage of users can be using a version that’s several years old. For example, as of December 2017, 26% of users are still on Android 5(Lollipop). Bear in mind though that supporting more OS versions may increase costs, due to the extra QA effort involved and potentially also extra development effort.
What about screen size differences?
Even a shortlist of devices has variety of different screen sizes. This is going to be a nightmare for design, right?
In fact most popular devices of the past few years use the same display aspect ratio. The aspect ratio is the proportional relationship between a screen’s width and height. Two devices may be different sizes, but proportionally they are the same. This means the same design layout will work across many screen sizes and resolutions.
Let’s look at the aspect ratios of our regularly supported phones and tablets:
Popular Android phone aspect ratios (2017):
As you can see, while these phones may have different screen dimensions, the majority of them have the same aspect ratio: 16:9.
Recent additions to product lines have introduced some new aspect ratios to consider. The Galaxy S8 and S8+ with an aspect ratio of 18.5:9 and the Pixel 2 Xl with an aspect ratio of 18:9 deviate from our standard 16:9 format. For these instances the iPhone X layouts in the iOS project which are 19.5:9 can be used.
Popular Android tablet aspect ratios (2017):
All but one of our regularly supported Tablet devices have the same 16:10 aspect ratio. The odd one out is the Nexus 9 with a ratio of 4:3. For other aspect ratios, Android provides engineers with an excellent layout tool that helps engineers get the app looking as it should across many devices.
For a more comprehensive list of device metrics Google has created this handy list. It covers popular phone, tablet, PC and watch screen and touch sizes for Android, iOS and Windows.
Will different screen sizes and ratios affect layout?
You may decide to support phones or tablets with varying aspect ratios. In this case, Android’s layout system is similar to iOS’s ‘Auto-Layout’ which allows layouts to flow in order to accommodate variances in screen sizes and ratios. Phone layouts will work on tablets, but you can elect to create separate layouts to take advantage of larger screens.
When porting your design, this all means preparing and designing with layout in mind, just as you would with iOS. If you want to understand more about Layout, a good resource is Google’s Layout guide for Material Design.
Should we adapt the UI for Android?
Before you begin adapting UI for Android, it’s important to talk to your engineer. While it may be perfectly doable to completely reproduce the iOS UI for Android in some circumstances, there may also be times where certain functionality, which might come out-of-the-box on iOS, could be a massive undertaking to try to reproduce on Android, and vice versa.
Google strongly recommends following their design and UI language, ‘Material Design’. Not only will an Android audience be familiar with common Android UI (and therefore feel more immediately comfortable using your app), Material Design’s common UI elements have better support for developers, reducing engineering time.
How do I export graphic assets for Android?
You’ll need to adapt your app’s graphic assets for Android and this means resizing, exporting and naming new files. Admittedly, it can be a bit more involved than exporting assets for iOS but once you’re organised it’s a piece of cake.
Understanding Density Buckets (for bitmap images)
If you’re exporting .png images, instead of grouping assets into four sizes like iOS (@1x, @2x, ~568h@2x, @3x), you’ll be grouping png assets in 5 sizes, or ‘density buckets’, each of which gets its own folder:
Each density bucket is related to a device display’s PPI or DPI (pixels-per-inch or dots-per-inch, often used interchangeably by device manufacturers). PPI/DPI are not related to the physical screen size; they relate to how densely pixels are packed together within a particular screen size.
It would be a huge headache to create precisely sized assets for each Android device density (plus app sizes would be enormous), so Android’s solution is to scale assets to the ‘most correct’ size, or ‘bucket’, for the relevant device screen. This is why graphic images don’t always appear as beautifully crisp as they do on iOS, which scales exactly x2 or x3.
To keep it simple: the higher the density bucket, the bigger the assets need to be.
If your assets are vector (e.g. created in a program like Sketch or Illustrator), we’d recommend designing at 1x (mdpi) and scaling up from there. It just makes life (and exporting) simpler. For an Android phone app, your scalings will look like this:
If your assets are bitmap (e.g. created in a program like Photoshop), you’ll need to scale assets down from the largest supported screen size so they don’t lose quality. For example, if you’re supporting a device with ~640 dpi you’ll size your iOS assets to xxxhdpi and scale down:
Saving and naming assets
File naming is more restrictive in Android than iOS and all versions of the same file must have the same filename. Filenames must always be in lowercase, with no spaces. For example “file_name.png” is good; “File name.png” won’t be accepted.
To separate assets, you’ll save them into different folders: mdpi, hdpi, xhdpi, xxhdpi and xxxhdpi (except if your assets are svgs — see below).
Scalable Vector Graphics (SVG)
Apart from the added labour, having multiple versions of the same graphic has the disadvantage of bloating the size of your app. Luckily Android has a trick up its sleeve here in comparison to iOS. As of version 5*, Android has the ability to use a single vector graphic in place of multiple raster graphics. This can potentially dramatically reduce the size of your app, while also reducing the workload for designers producing (and inevitably amending) graphics.
There are a couple of caveats to be aware of however. As most designers will know, not all graphics are suitable for conversion to SVG. Graphics intended for SVG export can’t contain gradients or patterns, only path data and shapes. Also, a large vector graphic is more taxing on the CPU in Android, and as a result, the recommended size limit for vector graphics is 200dp x 200dp. Finally, Android doesn’t actually support the SVG format and instead uses its own ‘VectorDrawable’, which currently only supports a subset of SVG functionality, e.g. no gradient support. We recommend that designers test their SVGs are compatible with VectorDrawable before handing them to the engineers.
What this means is that using vector graphics isn’t quite a silver bullet that will allow you to completely avoid the tedium of exporting multiple versions of your app’s graphics. However, they are ideal for things like icons, so depending on your app’s design, they could potentially save you a lot of time and effort, while keeping users happy by reducing the size of your app. For more information about SVGs, click here.
*Older versions also have limited vector graphic support using a library
Talking about assets and positions
When communicating UI and layout to your developer, don’t talk in pixels. As we’ve discussed, pixels can be a moving target. Talk instead in SP (size independent pixels) for fonts that you want to be able to scale up and down with the device’s font size settings; and DP (device independent pixels) for fixed font sizes and everything else. Understanding this is simple, just follow the guideline:
For font: at mdpi, 1sp/1dp = ~1ptFor everything else: at mdpi, 1 dp = ~1px
Talk to your engineer early in the schedule to discuss the best workflow for saving, delivering and updating assets. We like uploading assets to the project’s Git repository using a Git client like SourceTree or Tower which are easy to use and keep strict version control.
For smaller projects, Zeplin.io is a great tool for delivering assets to engineers — just make sure all assets in your Sketch or Photoshop source file are marked as ‘exportable’ and the engineers will be able to extract the assets themselves from the Zeplin file.
How long will the port take?
Since the app has been made for iOS already, shouldn’t development take no time at all?
Although porting can be straightforward, it’s not necessarily faster. Your engineering schedule will depend on the complexity of the app and the selection of devices you are supporting.
Android is a completely different software system to iOS. Device manufacturers use customised versions of the Android OS which may require different software solutions between devices. Different devices (even from the same company) can use unique hardware components. These inconsistencies can cause your app to interact with a device’s OS and hardware in unexpected ways.
For example, one of our Android ports included a bespoke camera application allowing the user to take photos and videos, edit, label and interact with them. The camera hardware and Android software is very different to those in an iOS device. Also, the Android app needed to work on devices with Android 4.0 upwards. However the camera hardware interacted very differently with the 4+ (Jelly Bean) OS than it did to OS 5+ (Lollipop). This meant days of additional and unexpected work for an engineer to address different camera scenarios and to fix the inevitable bugs that appeared in QA.
As you can see, device inconsistencies create surprises which, even if small, can mean additional time for engineering.
How do we distribute builds for testing?
Distribution for Android devices is much easier than iOS. Distribution can be managed via a service like HockeyApp or builds downloaded directly to your device from a file sharing service or email. The Google Play store also facilitates Alpha and Beta releases which are handy if you want to distribute your app to larger groups of testers before the final release.
How does submission to the Play Store work?
For a producer, getting ready to submit to the Play Store is similar to the iTunes process. You’ll provide your developer with things like screenshots, ratings, region, price and copy about your app. From a Producer point of view, the big advantage to iOS is time: whereas Apple can take up to 10 days to review your app, Google reviews and approves or rejects on the same day.
As you can see, porting from iOS to Android doesn’t need to be a headache. At Marino, it’s some of our favourite work. If you discuss the project with your developer before you start and take the time to understand how to prepare assets for Android, your port can be smooth sailing.