Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

iOS vs. Android Design

When designing for Android, designers can use the same base design and adapt to Android conventions from iOS or vice versa. There is usually no need to create a completely separate design for iOS and Android.

In this lesson, we will look at a few key differences between design conventions in the two systems and how designers can adapt to them.

User Interface Control

There are a few key differences between iOS and Android systems in terms of system elements.

Call-to-Action Button

In iOS app UI design, the primary call-to-action button is located in the upper right corner.

In contrast, the Floating Action Button, mostly on the bottom right corner, is the primary call-to-action button in Android.

Search Icon

In iOS, the search icon is usually present in the tab bar, whereas, In Android, it is present in the upper right corner.

Alert Boxes

iOS Alert boxes have dividers that separate the action buttons from the sentences whereas alert boxes on Android don’t.

System Fonts

Apple uses its proprietary font San Francisco as its system font while Android uses Roboto developed by Google as a system font.

Navigation Bar

Unlike iOS, Android has a built-in tool for reverse navigation. This is the Android Navigation Bar.

It is either built into the smartphone or part of the interface. The user can use the arrow to move one step backward chronologically. Navigation occurs the same way within an app or between apps.

There are two different kinds of reverse navigation in Android – reverse chronological navigation, which is performed using the back triangle arrow in the navigation bar and and upward navigation, which is performed using the arrow at the top of the screen.

Imagine we have a path with points A, B, and C, where A is the mother page and B and C are the daughter pages. Now imagine the user goes from A right to C. If they press the back button, they’ll go back to A, but if they press the up button, they’ll go to B, and a second press will take them back to A.

This is difficult to implement and confusing for the user, so now these two buttons both do the same thing: they take the user “back,” just like on iOS. In other words, if the user goes to C from A, it will take them back to A.

Material Elevation

In principle, iOS has no shadows. As an exception, shadows can be found on the main screen of the App Store and in Health. But all in all, Apple’s Human Interface Guidelines do not provide for the use of shadows in any way.

In Material Design for Android, shadows play a large role. They add a third dimension, which is called the Z axis, to the interface, which enables every component to have its own specific location along this axis. Moreover, this Z axis doesn’t just exist on the conceptual level — developers have an “elevation” parameter they can use to set the position of elements along this axis.

Secondary Navigation: Segmented Controls vs. Tabs

Android tabs have a number of different features: you can swipe to move from tab to tab, and Material Design permits us to use them for top-level navigation.

On iOS, you will have to tap each bar to navigate to them.

These bars are often considered as secondary navigation on both systems.

Mother & Daughter Pages

On iOS, daughter pages only appear in one way: the daughter page appears to the right and on top of the mother page with a “slide in” effect. Returning to the mother page occurs with a “slide out” effect.

https://www.youtube-nocookie.com/embed/iQ59JdlK4hQ

https://www.youtube-nocookie.com/embed/jWnFET3o4FQ

Material Design for Android recommends showing the user the hierarchical interconnection between the mother and daughter pages using an intentional animation.

Next, we are going to look at a few more differences in user interface components between iOS and Android.

Differences in UI Components

Many of Android’s native components are absent on iOS and vice versa.

First, let’s look at what’s native in Android but missing in iOS.

Hamburger Menu

In principle, iOS does not recognize burger menus. As we mentioned earlier, iOS only has top-level navigation via the Tab Bar.

Backdrops

https://www.youtube-nocookie.com/embed/N6IWumoyOjA

In Android, there is a feature that reveals a hidden layer behind the main layer when users tap a button, usually showing more options or secondary navigations.

There is no such native feature in iOS, even though app designers can build it in to the app for iOS if they choose to.

Banners

Banners native in Android are not among iOS’s native components. Using a banner, we can communicate important information to the user and suggest actions connected to it.

Snackbars

Like banners, Snackbars are not native to iOS. Snackbars are used to give the user brief messages about the results of their actions.

Bottom App Bar

In Android, there is a feature very similar-looking but different in function than its iOS counterpart. It is called the Bottom App Bar.

Some people compare it with the iOS tool bar at the bottom, but it is mostly for contextual actions. For example, when editing a list of messages in Messages, a Toolbar appears with the actions “Read all” and “Delete.”

On the other hand, the Bottom App Bar in Android is essentially a Top App Bar that has been moved down along with the same top-level actions, including opening the Navigation Drawer, calling up search, etc.

Bottom Navigation Drawer

In Android, users can call up navigation options by pressing the burger menu button in the Bottom App Bar.

https://www.youtube-nocookie.com/embed/cM5Lpz7Vin8

https://www.youtube-nocookie.com/embed/ANBVFmNk_B0

Expanding Bottom Sheet

https://www.youtube-nocookie.com/embed/ANBVFmNk_B0

An Expanding Bottom Sheet in Android is a surface attached to the bottom of a page. If the user taps this surface, it expands into a full-fledged page. This is native to Android and not iOS.

Next, let’s look at what’s native in iOS but missing in Android.

Page Control

Page Control shows which page the user is on. It is not a native Android component.

Toolbars

Tools bars that provide contextual information is only seen in iOS.

Steppers

Steppers are a standard iOS control that is not described in Material. We use them to enter small values such as the number of copies when printing.

Popovers

A Popover is a popup panel that is used primarily on iPad.

Different Status Bars

The Status Bar performs the same function on both platforms: it shows the time, battery level, and mobile and Wi-Fi connection levels. These indicators are in different places within the Status Bars, and their general visual styles are also distinct.

The Android Status Bar also has a special feature: when an app sends the user a notification, its icon appears in the Status Bar. There’s nothing like this in iOS.

https://www.youtube-nocookie.com/embed/N5boHiiQviM

Different Controls

The only differences between the platforms’ controls are visual. It’s worth noting that controls are simpler on iOS — checkmarks are used for both radio buttons and checkboxes. These controls have different shapes on Android.

Material Design guidelines also suggests using parent checkboxes when you need to give the user the ability to quickly select all options.

Different back arrow appearance and header position

On iOS, the arrow doesn’t have a line in the middle of it because on iOS the back arrow is drawn by the previous screen. If the header on the last screen was standard, the header moves left toward the arrow. If the header was wide, it moves up. If the name of the previous page is too long, it is replaced by the word “back.”

Different appearance of “three dots” icon

On iOS, the “three dots” icon that usually signals more options or settings appears in a horizontal orientation whereas on Android, the “three dots” icon usually appears vertically.

Different Pickers

On iOS, date selection is done using a drum. iOS’s drums can also be used for entering any other information. On Android, date Pickers imitate the appearance of a physical calendar.

https://www.youtube-nocookie.com/embed/Ix5TOQwNUwo

https://www.youtube-nocookie.com/embed/7puJhqvc1Y8

https://www.youtube-nocookie.com/embed/7puJhqvc1Y8

Different Text Fields

On iOS, Labels are located within the entry field and disappear while the text is being entered. Material Design Guidelines recommend moving Labels up while the text is being entered.

https://www.youtube.com/embed/UNAe3tgPi5o

Material Design also recommends highlighting a Label and the bar under the Text Field in a primary color. This helps the user understand that the field is highlighted. Material design describes the field’s behavior when a mistake is made during entry. There are two shapes to choose from in Material Design: Filled and Outlined.

Context Menus vs. Menus

Context Menus appeared in iOS 13. This control offers the user several contextual actions connected to the selected elements. There is an Android element that is somewhat similar to it: Menus.

Android Menus are used in the majority of cases — they suggest contextual actions for both the selected element and the entire page as a whole, they are used as an input with multiple options to choose from (drop-down menus), and they are used for editing text. Context Menus are only an iOS component. But Android Menus can be used in mobile or desktop apps.

Action View/Activity View vs. Modal Bottom Sheet

If you use an Action View or Activity View on iOS, on Android it can be partially replaced by Android’s Modal Bottom Sheet component. It also appears in the bottom part of the screen, darkens content, and is closed in similar ways. The component’s goal is to offer a choice or contextual actions.

Edit Menus vs. Text Selection Toolbar

In addition to the visual differences between Edit Menus in iOS and Text Selection Toolbars in Android, they also have this difference: the user can continue highlighting text by tapping and holding on Android. On iOS, a magnifying glass appears for precisely selecting a place in a word following a tap and hold.

https://www.youtube.com/embed/g79uwifta7c

Android is also different from iOS in that, when additional actions are called up, the Text Selection Toolbar becomes a Menu.

https://www.youtube-nocookie.com/embed/pQ3EJaeN_LI

Different requirements for tap zone size

According to the guidelines, the minimum tap zone size is 44x44pt on iOS and 48x48dp on Android.

Finally, let’s wrap up with a special iOS only feature, the Undo and Redo modal.

Special pattern on iOS: Undo and Redo

There is a special pattern on iOS: if the user shakes their smartphone, the app gives them the option to cancel or redo their last action. As a rule, this gesture is used to undo typing.

Knowing best practices and the differences between iOS and Android enables designers to be versatile and nimble. Most applications have a version for both platforms, which is why it’s important for designers to learn about both of them even if designers themselves only use one platform.

Scroll to Top