Understanding Safe Areas

Safe areas define the portion of the screen where content can be displayed without being obscured by hardware features like notches, camera cutouts, rounded corners, or system UI elements like status bars and home indicators.

Why Safe Areas Matter

• Notches & Cutouts: Camera and sensor housings
• Rounded Corners: Content can be clipped
• Status Bars: Time, battery, signal indicators
• Home Indicators: Gesture bars at the bottom
• Navigation Bars: System navigation controls

iOS Safe Area Layout Guide

Apple introduced the Safe Area Layout Guide in iOS 11 to help developers handle the iPhone X notch and subsequent devices.

Key Components

• Status Bar: Top area with time and indicators
• Home Indicator: Bottom gesture bar (34pt on iPhone)
• Rounded Corners: Varies by device
• Dynamic Island: iPhone 14 Pro and later

Common iOS Safe Area Insets

Android System Windows

Android handles safe areas through WindowInsets, which include status bars, navigation bars, and display cutouts.

Types of Insets

• Status Bar: Top system bar (typically 24dp)
• Navigation Bar: Bottom or side navigation (48dp)
• Display Cutout: Camera notches and punch holes
• System Gestures: Gesture navigation areas

Display Cutout Support

Android 9+ provides DisplayCutout API for handling notches:

// AndroidManifest.xml
<style name="AppTheme">
    <item name="android:windowLayoutInDisplayCutoutMode">
        shortEdges
    </item>
</style>

Web Safe Areas

Modern browsers support CSS environment variables for safe areas:

CSS Environment Variables

• env(safe-area-inset-top)
• env(safe-area-inset-bottom)
• env(safe-area-inset-left)
• env(safe-area-inset-right)

Viewport Meta Tag

<meta name="viewport"
      content="width=device-width,
               initial-scale=1,
               viewport-fit=cover">

Best Practices

Always Respect Safe Areas

• Interactive Elements: Keep buttons within safe area
• Important Content: Text and images should be visible
• Navigation: Tab bars and navigation bars need padding
• Scrollable Content: Apply insets to scroll views

When to Extend Beyond Safe Areas

• Backgrounds: Full-bleed images and colors
• Navigation Bars: Extend to screen edges
• Immersive Content: Videos and photos in fullscreen
• Games: Gameplay area can extend (with care)

Testing Considerations

• Test All Orientations: Portrait and landscape behave differently
• Test Multiple Devices: Insets vary significantly
• Test System UI Modes: Hidden/visible status bars
• Test Multitasking: Split-screen and slide-over on iPad

Common Mistakes

Advanced Techniques

Adaptive Layouts

Adjust your layout based on safe area insets:

// Adjust layout when safe area is large
if safeAreaInsets.top > 44 {
    // Device has notch/Dynamic Island
    // Use appropriate spacing
}

Full-Screen Experiences

For immersive content, carefully manage safe areas:

• Show overlay controls with safe area padding
• Animate UI in/out of safe areas smoothly
• Provide visual affordances near unsafe zones
• Allow users to exit fullscreen easily