Stay organized with collections
Save and categorize content based on your preferences.
The status bar shows time and weather information, along with system status
details such as connectivity and battery level.
This section describes the elements of the status bar and the options for
various levels of background transparency.
Anatomy
The status bar appears at the top of the screen and displays the elements shown
below. Users can toggle weather display on and off in Settings.
The elements of the status bar appear in the same order for left-hand-drive and
right-hand-drive cars.
Anatomy of the Status bar.
Clock – Digital display of the current time.
Weather information – Temperature plus weather icons.
Connectivity – Wi-Fi and cellular.
Battery level
Background options
There are 3 options for the background of the status bar:
Opaque
Transparent
Semi-transparent gradient
While the default option is to have an opaque background, app developers can
also choose transparent or semi-transparent backgrounds for the status bar in
their apps.
Opaque
By default, the status bar is rendered with an opaque background, to protect
the legibility of the status bar elements as much as possible. However, opting
for some degree of transparency provides a more seamless transition between
status bar and app content, as well as enabling a larger portion of app content
to be displayed.
Transparent
Apps whose screens provide sufficient contrast behind the status bar elements
can use a transparent background. This option is used for most
media and communications apps, as well as for system experiences such as
the app launcher.
In these examples, the screen already has a solid-color background at the
top, so a transparent background for the status bar helps it to blend in
seamlessly
Semi-transparent gradient
Apps that display visual information extending to the top of the screen can
give the status bar a semi-transparent background with a linear gradient. The
gradient provides sufficient opacity for the status bar elements to be
readable, while the partial transparency helps to keep the app's information
visible.
Navigational apps can use a semi-transparent linear gradient behind the status bar to keep map elements visible while also making status bar elements readable
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-05-28 UTC."],[[["\u003cp\u003eThe status bar, located at the top of the screen, displays time, weather, connectivity, and battery information.\u003c/p\u003e\n"],["\u003cp\u003eApp developers can customize the status bar background with opaque, transparent, or semi-transparent gradient options to enhance visual integration with their app content.\u003c/p\u003e\n"],["\u003cp\u003eWhile the default opaque background ensures legibility, transparent backgrounds are ideal when app content provides sufficient contrast, and semi-transparent gradients are suitable for apps with visual elements extending to the screen's top.\u003c/p\u003e\n"],["\u003cp\u003eStatus bar elements maintain consistent positioning in both left-hand-drive and right-hand-drive vehicles.\u003c/p\u003e\n"]]],[],null,["# Status bar\n\n\u003cbr /\u003e\n\nThe status bar shows time and weather information, along with system status\ndetails such as connectivity and battery level.\n\nThis section describes the elements of the status bar and the options for\nvarious levels of background transparency.\n\n*** ** * ** ***\n\nAnatomy\n-------\n\nThe status bar appears at the top of the screen and displays the elements shown\nbelow. Users can toggle weather display on and off in Settings.\n\nThe elements of the status bar appear in the same order for left-hand-drive and\nright-hand-drive cars.\nAnatomy of the Status bar.\n\n1. **Clock** -- Digital display of the current time. \n2. **Weather information** -- Temperature plus weather icons. \n3. **Connectivity** -- Wi-Fi and cellular. \n4. **Battery level**\n\n| **Note:** In Japan, the status bar can also show the ETC icon. This icon indicates a connection with the wireless Electronic Toll Collection system.\n\n*** ** * ** ***\n\nBackground options\n------------------\n\nThere are 3 options for the background of the status bar:\n\n- Opaque\n- Transparent\n- Semi-transparent gradient\n\nWhile the default option is to have an opaque background, app developers can\nalso choose transparent or semi-transparent backgrounds for the status bar in\ntheir apps.\n\n### Opaque\n\nBy default, the status bar is rendered with an opaque background, to protect\nthe legibility of the status bar elements as much as possible. However, opting\nfor some degree of transparency provides a more seamless transition between\nstatus bar and app content, as well as enabling a larger portion of app content\nto be displayed.\n\n### Transparent\n\nApps whose screens provide sufficient contrast behind the status bar elements\ncan use a transparent background. This option is used for most\nmedia and communications apps, as well as for system experiences such as\nthe app launcher.\nIn these examples, the screen already has a solid-color background at the top, so a transparent background for the status bar helps it to blend in seamlessly\n\n### Semi-transparent gradient\n\nApps that display visual information extending to the top of the screen can\ngive the status bar a semi-transparent background with a linear gradient. The\ngradient provides sufficient opacity for the status bar elements to be\nreadable, while the partial transparency helps to keep the app's information\nvisible.\nNavigational apps can use a semi-transparent linear gradient behind the status bar to keep map elements visible while also making status bar elements readable"]]
