Skip to content

Checked

Status bar

The status bar is the strip at the top of the screen with the time, signal and battery, drawn by the system over every app. An app leaves room for it and chooses only whether its content is light or dark.

Why it matters

The system draws the status bar over the app. If content collides with it, the time and battery become unreadable.

Its height differs by device, so a layout reserves the safe area and not a fixed number.

Status bar on iOS and Android

The same idea in each system, with the values Appetite UI gives it.

Status bar at a glance, iOS, Android, Appetite UI
ValueiOSAndroidAppetite UI
NameStatus barStatus bar, one of the system barsiOS / Status Bar, and grid/safe-area/top on Android
Top safe area59 pt52 dpgrid/safe-area/top

In Appetite UI

Where it appears in Appetite UI: Fitness app, Dashboard. The theme switch beside the title shows the dark frame.

Dashboard393 x 852 each, Light and Dark
Fitness app Dashboard screen: Today with a week strip and Wednesday 30 selected, Move 486 of 600 kcal, Exercise 38 of 45 min and Stand 9 of 12 h beside three activity rings, Heart rate 62 bpm and Sleep 7h 42m cards, and an Up next Legs and Power workout card on a photo above the tab barFitness app Dashboard screen in dark mode: Today with a week strip and Wednesday 30 selected, Move 486 of 600 kcal, Exercise 38 of 45 min and Stand 9 of 12 h beside three activity rings, Heart rate 62 bpm and Sleep 7h 42m cards, and an Up next Legs and Power workout card on a photo above the tab bar
Dashboard

In practice

On iPhone the status bar shares the top of the screen with the Dynamic Island, so its height differs by device; the top safe area is what a layout reserves for both.

Appetite UI draws iOS / Status Bar in two sizes, one per device class, plus a vertical version for iPhone Duo. Its Material 3 pages have no status bar set: an Android frame reserves the top inset instead.

iOS 27 controls and bars, component, what it is, measured in Figma
ComponentWhat it isMeasured
Status BarTwo sizes, one per device class, plus a vertical Duo version.402 × 62 on ios-lg, 402 × 59 on ios-md

Common mistakes

  • Shipping a drawn status bar from the design file. The system draws the real one.
  • Using light content on a light header, or the reverse.
  • Reserving a fixed height. Use the top inset.

Questions

How tall is the iOS status bar?

In Appetite UI the iOS Status Bar is 59 points tall in the ios-md Platform mode and 62 in ios-lg, the larger iPhones, the same values as the top safe area, because the Dynamic Island sits inside it.

How much room does Android leave at the top of the screen?

Appetite UI reserves 52 dp at the top of an Android frame, the grid/safe-area/top value of the android Platform mode, where the system draws its status bar.

Sources

The pages the facts above rest on, each read October 31, 2026.

  1. Apple Human Interface Guidelines: Status bars
  2. Android Developers: Display content edge to edge