Rookie Guide : How To Convert iOS UI To Android

Minseung Song
Sep 13, 2015 · 5 min read

by Min Seung Song. Product Designer@WhatsApp

1. Do Not Convert

You shouldn’t use the same UI spec to Android. iOS has a “physical home button” that brings you from any screen to home. However, the Android has “back, home and multi tasking buttons” on the screen.

What does this mean?

An Android user can browse your app, go to the other app, and come back easily. That makes a huge difference.

For this reason, iOS generally has a mixture of vertical and horizontal UI structures, but the Android is more vertical.

And these “back, home and multi tasking buttons” are on the bottom so you can’t have a tab on the bottom.

2. Familiar with New Terms

You will often hear the terms “DP”, “SP” and “9 Patch”. DP and SP are size units and 9 Patch is the name of the asset format.

DP stands for density independent pixels. It is the absolute unit that never changes in size.

SP is basically the same as DP, but it’s scaleable. If the user set font is huge on device settings, the SP defined font size will be set as huge.

9 Patch is a unique scaleable asset format that dramatically reduces file sizes. It is typically used in a button with a shadow. Visit this site to see details

3. Understand Screen Density and Sizes.

Unlike with the iPhone, hundreds of manufacturers make their own devices. For example, OpenSignal.com made beautiful, but scary infographics for android fragmentation:

But don’t panic since you don’t have to design for all these cases.

The Android has a screen density system that adapts to each screen size. So you only need to take care of five (to seven) different sizes.

If you start your design at 1080 x 1920 pixels, you are not designing only for Nexus 5. Those spec and assets all go to all other XXHDPI phones, such as the Galaxy S4, HTC One or LG G2.

And let’s bring back DP…

Again, DP is an absolute number for any screen. To make the right amount of pixels, you have to multiply or divide by each density. For instance, if you do a mockup at 1080 x 1920 pixels, you have to divide all pixel numbers by three and it will be DP.

Yes, you have to do some math here, so I prefer to start at 360 x 640 pixels to begin with (then every number is just DP). However, it’s up to you.

In any case, you should make the effort to optimize your app for different screen sizes and densities. I recommend that you test on at least five different density devices before going live. Interestingly, its ratio is very similar to others so you don’t have to care about the initial layout.

4. Icons

Icon style is more solid and round on the Android.

The Android drawable icon system scales up/down icon sizes automatically. However this scaling can cause artifacts in the bitmaps. To ensure your bitmaps look their best, you should spend some time to optimize for each size.

5. Material Design

Last year, Google announced its Material Design, a new design language. Without a doubt, it is a truly awesome design direction. Visit their site to understand basic UI principles. However, don’t get crazy about color and shadow like specific visual designs. You can be creative with this.

6. More Things

Soft Key

Typical Android devices have dedicated Home, Back and Menu buttons on the screen. However, Samsung devices have those buttons on their hardware devices. It makes little difference. Make sure your layout makes sense with Samsung and others.

Widget

Android Widget is one of the unique features from the early version. You can create simple but useful cards on the home screen. But it has limited features; so see how others are doing it and talk with engineers before you start to design it.

Notification

Notifications are typically icon + text or picture + text. Android OS 5 (Lollipop) and below OS4 (KitKat, Gingerbread) use different treatments.

7. Useful links

Here is the list of useful links.

Google Material Design (General)

Google Material Design (Patterns)

androidux.com

pttrns.com

materialup.com

Again, Don’t convert. Use it for a while. It makes a huge difference.

Thanks

Published in Startups, Wanderlust, and Life Hacking

-

The Startup

Medium's largest active publication, followed by +502K people. Follow to join our community.

Minseung Song

Written by

Product Designer @WhatsApp. Runs http://car-ux.com and http://androidux.com

The Startup

Medium's largest active publication, followed by +502K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade