We are still seeing a lot of Android apps that is a direct port from other platforms (namely iOS). Here are some simple ways you can design your UI so your Android apps look Android. To make it easier to see the difference, I will make side by side comparison of some of (what Android would call) the patterns and building blocks that set Android and iOS apart.
Note: I will be using Android jargon.

 

Action Bar

iOS

Android

01_actionbar_ios 01_actionbar_adr
  1. Back to previous page button
  2. App Name or Page Name sits in the middle
  3. Action button usually sits here: edit, delete etc
  1. Up caret. This is not the back button. This navigation goes up one level from the current page.
  2. Logo
  3. App Name or Page name
  4. Action buttons. Overflow button on far right.

Lists

iOS

Android

02_list_ios 02_list_adr
  1. The most significant difference is in Android, there is NO right caret on the right side of the screen.
  2. Sectioning of items are layout differently

Cancel / Done Buttons

iOS

Android

03_yesno_ios 03_yesno_adr
  1. Cancel on the left and Done on the right separated by the Page Name
  1. Cancel (Negative) on the left and Done (Positive) on the right separated by a vertical divider.

Forms and Search Bars

iOS

Android

04_forms_ios 04_forms_adr
  1. Form elements have rounded corners
  2. Search bars are boxes with rounded corners and usually slight transparency
  3. select lists are the same as date/time pickers
  1. Buttons and switches have sharper corners
  2. Search bars pretty much look the same as a text field. A single line with search icon in front
  3. Android have spinners or in web term dropdown or select menus. This pattern is usually not used as date/time pickers.

Dialogs

iOS

Android

05_dialog_ios 05_dialog_adr
  1. Again, iOS implements rounded corners
  1. And sharp corners for Android. Header and body separated by a line.

Fixed Tabs

iOS

Android

06_tab_ios 06_tab_adr
  1. Tabs looks like a segmented pill
  2. Selected items have background color change
  1. Tabs take up the whole horizontal width of screen
  2. selected items have a thicker line underlining it

Of course these are not the only things that sets iOS and Android apart. I think the most significant part is use of up caret and back button on Android as oppose to iOS which uses the back caret button to go back or up to the previous screen.

To understand the difference between the up caret and back button on Android, click here



This article has 4 comments

  1. Pingback: Quick Tips for Making Your iOS and Android App Look Different | The Sage 42 Blog

Leave a Reply