Android VS. iOS: Compare 20 UI Components & Patterns (Part 2)

Chun-Chuan Lin
Dec 23, 2017 · 13 min read

20 differences between Android and iOS you should know when designing for cross-platform apps



14. Grid Lists VS. Collection View

Grid lists are mainly used on ordered set of content, especially for images. In Android, a header or footer can be added into a grid for providing extra information or actions. iOS collection view are for showing off image-based content basically.

By cutting off grid tiles in the view’s initial scroll position, you can indicate content overflow. Both grid lists and collection Views are tappable to enter the detail screen for further information.

15. Cards

Cards have been used in UI design for a long time. After Google released Material Design in 2015, cards becomes one common representative of android design. Card UI has its advantage on across multiple device sizes. Cards can be resized and rearranged according to different screen sizes easily. Moreover, cards can contain various of information, like texts, images and charts.

Although iOS do not define card UI in its guidelines, but the similar design can be found in Apple iOS app.

In visual style, Android emphasizes shadows of cards, but cards are flat in iOS 10. (After iOS 11 released, long shadows is appeared!)

15. Menus VS. Pickers & New Screens

Android’s menus are just similar to its simple dialogs. The difference between them is that dialogs appear in the center of screen with a transparent black overlay but menus’ position is relative to the tapped items’ position. Menus have less interruption than dialogs.

Menus appear in following 3 situations: 1) After tapping overflow icon in an action bar or a row of list; 2) after tapping dropdown menu and 3) after tapping a 2-line style row which consists of label and value.

iOS do not have this kind of menu style. After tapping a cell consisting of label and value, the screen will switch to the new screen showing options in a table with a checkmark on one of the options to mark selected status on phones. On tablets, a popover can be used for the menu table.

Another alternative is “pickers”, scrollable lists of distinct values which let you select a value. After a cell with a value is tapped, a picker will show up below the cell or slide in from bottom of the screen.

Pickers are recommended to used for few options only. If you have a long list, new screen for the option table would be the better choice.

16. Date/Time Picker

Both Android and iOS have their own default date/time pickers. Android have date picker to select a specific date (date, month, and year) and time picker. iOS has 4 kinds of picker: 1) Date which displays months, days of the month, and years. 2) Time which displays hours, minutes, and (optionally) an AM/PM designation. 3)Date and time which displays dates, hours, minutes, and (optionally) an AM/PM designation. 4)Countdown timer which displays hours and minutes.

17. Dividers

To separate content, dividers are usually used.

Android has 2 types of dividers: 1) Full-bleed dividers, used to separate distinct content sections. 2) Inset dividers, used to separate related content.

iOS does not define dividers in its guidelines. iOS uses grouped tables and there is a gray area between 2 grouped tables for separating. iOS has inset dividers in its table to form a cell.

Android tends to use “space” to separate rows, so Android rarely has dividers between rows whose data are related.

In Android, if there is an icon or image on the left side of a row, the inset divider starts from a text left edge and end to the right edge of screen. In iOS, a cell with an icon is the same as Android, but for a cell with an image, the divider starts from the left edge of the image.

18. Text Fields

Android text fields usually appear in forms you need to fill. There are 3 types: 1) Single line 2) Multiple lines and 3) Full-width. In 2017, Android add another type: text area into its guidelines.

Depending on different input format, a appropriate keyboard type should be provided. Both Android and iOS provide several different keyboard types. Basically, they can be classified into 3 types:1) Number Keyboard (iOS has number pad and phone pad), used for entering phone numbers, credit card numbers or PIN codes. 2) Text Keyboard, used for people’s names. 3) Mixed Keyboard, used for email addresses or URLs.

Both Android and iOS can put placeholders and icons or images into text fields as indicators to help communication. In Android, the placeholders float upward when the text field is in focus or filled. That is a quite smart design to help users know the labels even when all text fields are filled. In iOS, it suggest don’t use a separate label to describe a text field when placeholder text is sufficient.

iOS has a smarter design which is when text fields are filled and focused, clear button is shown in the right side of the textfield, so people can easily clear all texts by one tap. Android has no that design in default text field, but you can find it in search bar. In Android, you can customize the textfield and add a clear all button to the right side.

Android guidelines also define helper texts, character counters and error messages for text fields.

19. Sliders

Sliders are the components for adjusting settings that reflect intensity levels, such as volume, brightness, or color saturation. Normally, the smallest value is located on the left of sliders and the largest value on the right. Sliders may have icons on both ends of the bar to reflect the value intensity in both Android and iOS.

Android sliders has 2 types: 1) Continuous sliders, letting users to select a value along a range. 2) Discrete sliders, allowing users to select a specific value, like 10 or 20, from a range.

Android also provides editable text box for number input for users who need to set the exact value.

20. Other Patterns

20–1. Search

Android search has 2 types: persistent search and expandable search, which can be compared with iOS prominent search and minimal search.

Android’s persistent search and iOS’s prominent search are mainly used for the apps’ main function is search, like shop relative app, in which users may want to find a product to buy by searching.

Android’s expandable search and iOS’s minimal search for the app whose search is secondary. Android reduces search bar to an icon. After the search icon on the app bar is tapped, the app bar turns into a search bar. iOS uses visual design way, making search bars become semi-transparent, to be not conspicuousness.

iOS also uses search icon to reduce the importance of search. Moreover, sometimes iOS hides search bars behind navigation bars. Users need to swipe down to evoke the hidden search bar.

20–2. Delete and Other Actions

Android users can select an item by long press and then enter selection mode in which action buttons, like delete, are shown in app bars. Android users also can tap overflow icon to evoke the menu with a “select” option and tap it to enter selection mode.

iOS users can swipe left to evoke hidden actions, like delete. They also can tap “Edit” in navigation bars to enter edit mode to delete or reorder items. If there are more actions, like move and achieve, in edit mode, the screen will have a table will have multiple selection controls and a toolbar with those actions.

20–3. Select Text

In both Android and iOS, users can long press texts to select them. After long-press, in Android, the action icons will show in action bar which became anther style to indicate current status, selection mode. In iOS, the actions are just shown in a menu above the selected texts. Android now also has the floating toolbar like iOS shown above in selection area with actions of cut, copy, paste, and more.

After texts are copied or cut, users can long press in text fields to show a paste popup and tap it to paste.

Source: Google

20–4.Progress & Activity

In general, progress bars are better than spinners because progress bars enable users to know the status, how many percentage left, so they would have patient to wait.

Progress bars are used for the progress is predictable. If the progress is uncountable, then spinners will be used. But if the progress is predictable and the waiting time only less than 3–4 seconds, you can consider to use spinners as well.

Progress bars appear, in addition to content texts and dialogs, bottom edge of app bars/navigation bars. You can find the example in browser apps.

Progress bars have not only linear ones but also circular indicators. The circular progress indicators are often used with download buttons. After download buttons are tapped, the buttons will become circular progress indicators.

Android progress indicators have 4 types: 1) Determinate 2) Indeterminate 3)Buffer 4) Query indeterminate and determinate for different situations.

Android linear progress and activity indicators
Android Circular indeterminate and determinate progress indicators

About refresh, Android learnt from iOS, using swipe down to refresh content. a circular spinner will show up after swiping down and disappear after content is loaded.

Refresh lists by swiping down. The loading indicators will show up.

20–5. Icons:Share VS. Action

When you want to share the content from this app to another, Android and iOS have their own share icon. It is worth to note, iOS action (share) button evokes a modal view which contains not only app list but also actions like copy, favorite, or save, that are useful in the current context.

Android Share icon VS. iOS Action icon

20–6. Status Bars

Both Android and iOS status bars have information like time, battery status, Wi-Fi status, and signal strength. Swiping down from status bars to evoke notification centers.

20–7. Navigation Bars VS. Home Button

Android navigation bars and iOS navigation bars are different. Please do not confuse them.

Android navigation bars have 3 buttons for Back, Home and Recent Apps. Navigation bars can be virtual or physical.

iOS has a physical button, Home. One press to go back home; double-press to go to recently-launched app lists. It is worth noting that iOS has no back key like Android, so UI screen should have a back button in navigation bars.

After iPhoneX released, there is no Home key on the device. Swipe up on a bar indicator to go back home.

Recap

Navigation

Android used to using navigation drawer as main navigation, but currently, tabs and bottom navigation are more popular because of better usability. iOS always as usual uses tab bars for navigation.

App Bar/Navigation Bar

Android app bars, screen titles align left and action buttons are put in the right side. In iOS, titles are put in the center of navigation bars and action buttons are put on the right and left side of navigation bars.

Toolbars

Android and iOS have bottom toolbars for action texts, action icons or status.

Tabs VS. Segmented Controls

For the navigation of the second or lower levels, Android uses tabs which contains 2 types: fixed and scrollable and supports swipe gesture to switch views. iOS uses segmented controls, whose items are limited to 2–5.

Buttons

Even though Android and iOS have their own default button styles, visual designers still can design buttons upon their thought so long as the button styles do not confuse users. The only one thing should be noticed is that Android uses UPPERCASE, for all tappable texts, including their buttons.

Floating Action Buttons VS. Call to Action Buttons

Android has own characteristic float action button for main action in the screen. The FABs are put in the lower right corner for easily reaching and tapping. iOS call to action buttons, put in the center of tab bars, normally having different style with other real tabs.

Bottom Sheets VS. Action Sheets & Activity Views

iOS has had action sheets for a long time and then Android also has bottom sheets with actions for single hand use.

Dialogs VS.Alerts

Dialogs are used for warning, providing options and confirmation. Android and iOS put main action button on the right side and secondary action, like cancel, on the left side. The texts on the button should be simple and clear. Verbs can be used to instead Yes and No.

Full-Screen Dialogs VS. Modal Views & Popovers

Android full-screen dialogs and iOS modal views or popovers on phone devices are full screen, but on the tablets are not full screen.

Snackbars & Toasts VS. Auto-Close Alerts

Snackbars, toasts and alerts are used as feedback after an action is taken.

Lists VS. Tables & Cells (Rows)

Android tends to use space rather divider to separate related content texts in lists. Android uses dividers when the content texts are totally distinct. iOS has dividers to form cells in its tables. iOS tappable cells have next screen indicators which provide better usability than Android. iOS tablets have 2 types: plain and grouped tables.

Subheaders VS. Grouped Table Headers & Section Header

Android has subheaders only, but iOS has table headers for grouped tables and section headers for plain tablets.

List Controls

Android and iOS have their own list controls for single selection, multi-selection and reorder. Please choose proper ones depending on each platform.

Menus VS. Pickers & New Screens

Android has menus, but iOS uses pickers for short lists and new screens for longer lists.

Grid Lists VS. Collection Views

Basically, Android and iOS have similar grid/collection views.

Cards

Card-style UI is a key feature of Android Material Design, but iOS also has similar design.

Date/Time Pickers

Android and iOS have their own default date/time pickers.

Dividers

Android has dividers but iOS uses group tables to separate distinct content.

Text Fields

Android and iOS have their own text fields. Show proper keyboards depending on input formats of textfields.

Sliders

Android and iOS have their own components. Both are similar.

Search

Android has persistent search and expandable search like iOS has prominent search and minimal search. Sometimes iOS hides search bars behind navigation bar, users need to swipe down to evoke them.

Delete and Other Actions

Android users have to select items first and then conduct other actions like delete. iOS supports swiping to delete. iOS users also can enter edit mode to delete items or select items to conduct other actions.

Select Texts

Traditionally, after texts are selected, Android app bars show actions, like copy, cut, select all. Android now also has a toolbar with actions shown above the selected texts like iOS usually do.

Progress & Activity

If the progress of an action is predictable and measurable, use progress bar; if not, use spinners instead.

Icons: Share VS. Action

Android and iOS have their own share icon. Do not use Android share icon on iOS, and vice versa.

Status Bars

Android and iOS status bar basically have time, battery status, Wi-Fi signal and cellular connection signal. Evoke notification centers by swiping down from status bars.

Navigation Bars VS. Home Buttons

Android navigation bars have 3 keys, back, home and recent apps. iOS has one key, home, only. Double-tap to evoke recent app list. Back buttons on navigation bars in iOS apps are necessary.

Summary

From observation within recent years, Android’s behaviors and UI components are more and more similar to iOS, even though Android still keeps some their own unique behaviors. I think Google has been trying to domain UI design language across different platforms. In the future, it is predicable that Android and iOS will be closer and closer and that is good thing for users and developers.

Even though some UI components are not defined in Android material design guidelines or iOS human interface guidelines, it doesn’t mean you cannot use those components. In some situations due to default UI components’ limitation, we may still borrow experience from other platforms and customize components to conquer difficulties. The real point is the behaviors or components would confuse our users or not.

Those patterns introduced here cannot be applied to every apps directly. They may need to be adjusted depending on different scenarios and requirements. I hope everyone know better about components and behaviors of 2 platforms. If there are mistakes or you have questions, welcome to correct or discuss with me. Thank you!

Please give 10 claps👏if you have read this article.
Please give 20 claps👏if you think it is helpful.
Please give 50 claps👏if you think it is amazing!
Thank you :)
--------------------------------------------------------------------
I do not talk about the reasons why Material Design Guidelines and iOS Human Interface Design Guidelines have this kind of behaviors or rules rather than others. This article is more like for practical use. I would like to discuss the contexts and reasons in other articles in the future.I have not updated for Android O and iOS 11, either.

Reference

Chun-Chuan Lin

Written by

Interaction designer. Be.net/designlcc designlcc@gmail.com

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