iOS vs Android UI Design: Key Differences Designers Must Know

Designing for mobile means designing for two fundamentally different platforms. While iOS and Android have converged on many patterns, critical differences remain that affect navigation, component behavior, typography, and user expectations.

This guide breaks down the key differences with real examples from apps on both platforms, helping you make informed design decisions whether you're building for one platform or both.

Navigation Patterns

iOS: Tab Bar at the Bottom

iOS apps consistently place primary navigation at the bottom of the screen via a tab bar. Apple's Human Interface Guidelines recommend 3-5 tabs with clear icons and labels.

Why it works: Bottom tabs are within thumb reach on all iPhone sizes, and the pattern is so universal on iOS that users expect it.

Example: Airbnb uses 5 bottom tabs (Explore, Wishlists, Trips, Inbox, Profile) with each tab maintaining its own navigation stack.

Android: Top App Bar + Navigation Drawer

Android traditionally favors a top app bar with a hamburger menu for secondary navigation. Material Design 3 now also supports bottom navigation bars, bringing Android closer to iOS patterns.

Key difference: Android's back button (hardware or gesture) serves as universal navigation, while iOS relies on the in-app back chevron. This fundamental difference changes how navigation hierarchies are structured.

Typography & Font Systems

iOS: San Francisco

Apple's San Francisco font family is optimized for Apple displays at every size. The system automatically switches between SF Pro Display (20pt+) and SF Pro Text (below 20pt) for optimal readability.

• Title: 34pt Bold
• Body: 17pt Regular
• Caption: 12pt Regular
• Dynamic Type respects user accessibility settings

Android: Roboto / Material Type Scale

Google's Material Design type scale provides 13 predefined styles from Display Large to Label Small. Android apps can use Google Fonts for brand expression while maintaining readability.

• Headline Large: 32sp
• Body Large: 16sp
• Label Small: 11sp
• sp units scale with user font size preferences

Component Design Differences

Buttons

| Aspect | iOS | Android | |--------|-----|---------| | Primary style | Rounded rectangle or pill | Filled with rounded corners | | Corner radius | Often fully rounded | Material: 20dp for FAB, varies for buttons | | States | Subtle opacity change | Ripple effect on press | | Placement | Often bottom of screen | FAB for primary action |

Dialogs & Sheets

iOS uses bottom sheets (.sheet) and centered alerts with rounded corners and blurred backgrounds. The pull-to-dismiss gesture is standard.

Android uses Material bottom sheets with a drag handle indicator and full-screen dialogs for complex flows. The back gesture/button dismisses.

Date & Time Pickers

iOS favors scroll wheel pickers — the iconic tumbler-style selector that's distinctly Apple.

Android uses calendar grids for dates and clock-face selectors for time, following Material Design patterns.

Gestures

iOS Gesture Conventions

• Swipe from left edge: Navigate back
• Swipe down on sheet: Dismiss
• Long press: Context menu with haptic feedback
• Pinch to zoom: Standard for images/maps

Android Gesture Conventions

• Swipe from left or right edge: Navigate back (Android 10+)
• Swipe up from bottom: Home / app switcher
• Long press: Select / multi-select
• Pull down from top: Notification shade

Notifications & Alerts

iOS groups notifications by app and supports rich notifications with expandable content, inline replies, and action buttons.

Android provides notification channels where users can fine-tune which notification types they receive from each app. Notification dots on app icons indicate unread content.

Real-World Comparison: Same App, Different Platforms

Many apps maintain distinct platform personalities while keeping their brand consistent:

DoorDash

• DoorDash iOS uses iOS-native tab bar and pull-to-refresh
• The Dasher companion app follows similar patterns but adapts to platform conventions

Booking.com

• Booking.com iOS follows Apple's bottom navigation pattern
• Both platforms share the same blue brand identity while respecting platform conventions

LinkedIn

• LinkedIn iOS uses a 5-tab bottom bar with iOS-specific gestures
• Search patterns and feed interactions adapt to each platform's expectations

Best Practices for Cross-Platform Design

1. Respect platform conventions: Users have muscle memory for platform-specific patterns. Don't force iOS patterns onto Android or vice versa.

2. Share design tokens, not components: Colors, typography scales, and spacing values can be shared. Component structure should follow each platform's guidelines.

3. Test on both platforms: What feels natural on iOS may feel foreign on Android. Always prototype and test on real devices.

4. Study native apps: The best education is studying how Apple and Google design their own apps — they're the gold standard for platform conventions.

Explore Platform-Specific Designs

Browse 1,500+ curated app designs on Gummble to study how top apps handle platform-specific design challenges. Filter by platform to compare iOS and Android implementations side by side.

• Browse iOS app designs →
• Browse design patterns →
• Study onboarding flows →