Header unter der Uhr
Dein Sticky Header beginnt ganz oben am Bildschirm, also sitzen die Icons der Statusleiste auf deinem Logo und deinem Menü-Button.
Was sich mit Android 15 und Android 16 geändert hat
Für Apps, die auf Android 15 (API-Level 35) abzielen, zeigt Android 15 die App standardmäßig Edge-to-Edge an. Statusleiste und Gesten-Navigationsleiste werden transparent, und das System platziert deine Inhalte nicht mehr unterhalb der Leisten; bei der Navigation mit drei Buttons ist die Leiste durchscheinend. Wendet die App die Window Insets nicht an, liegt ein Teil ihrer Inhalte unter den Systemleisten. Der klassische Weg, die Statusleiste einzufärben, setStatusBarColor, ist veraltet und hat für diese Apps unter Android 15 keine Wirkung.
Android 15 bot noch ein vorübergehendes Opt-out über ein Theme-Attribut. Für Apps, die auf Android 16 (API-Level 36) abzielen, ist dieses Opt-out veraltet und auf Android-16-Geräten deaktiviert. Google Play verlangt für neue Apps und Updates API-Level 36, ein neuer Upload hat also kein Opt-out mehr: Die App muss die Insets behandeln.
Was die Play Console anzeigt
Edge-to-Edge-Probleme kommen nicht als klassische Richtlinien-Ablehnung. Sie erscheinen als Empfehlungen im Release-Dashboard, mit Titeln wie „Edge-to-edge may not display for all users“ und „Your app uses deprecated APIs or parameters for edge-to-edge“. Die zweite listet Aufrufe wie Window.setStatusBarColor oder setNavigationBarColor und die Klassen, aus denen sie stammen, oft Bibliotheken statt deines eigenen Codes.
Das eigentliche Risiko ist, was Menschen sehen: ein Menü-Icon unter der Uhr, das sich nicht antippen lässt, oder ein Checkout-Button hinter dem Gestenbalken. Ein Reviewer kann das als fehlerhafte Funktionalität werten, und Nutzer werden es in Bewertungen ganz sicher erwähnen. Der Guide zu fehlerhafter Funktionalität behandelt die anderen Probleme von Wrapper-Apps am Launch-Tag.
Symptome in einer Web-Wrapper-App
Tab-Bar hinter dem Gestenbalken
Eine Navigationsleiste mit position: fixed; bottom: 0 landet unter dem Gestenbalken oder der Leiste mit drei Buttons, und Taps treffen stattdessen die Systemleiste.
Unsichtbare Icons in der Statusleiste
Bei einer transparenten Leiste verschwinden weiße Icons auf einer weißen Seite oder schwarze Icons auf einer dunklen.
Doppelter Abstand
Die native Hülle und dein CSS fügen beide Platz für die Leisten hinzu, und oben oder unten bleibt ein dicker leerer Streifen.
Tastatur verdeckt Eingabefelder
Felder weit unten in einem Formular rutschen unter die Tastatur, wenn das Layout den Visual Viewport ignoriert.
Mein iOS WebView wurde endlich genehmigt. Danke!!
Leg fest, wer die Insets übernimmt
| Setup | WebViewGold-Einstellungen für Android | Dein CSS |
|---|---|---|
| Native Hülle hält die Seite unterhalb der Leisten (empfohlen für die meisten Apps) | TRANSPARENT_STATUS_BAR false: eine deckende Statusleiste in der Farbe colorPrimaryDark aus style.xml; blackStatusBarText für dunkle Icons auf einer hellen Farbe | Nichts erforderlich. Behalte das Safe-Area-CSS unten als Sicherheitsnetz; wenn die Hülle die Seite bereits frei von den Leisten hält, sollte es keinen zusätzlichen Abstand erzeugen. Prüf das einmal auf einem Gerät. |
| Seite zeichnet hinter die Statusleiste (echtes Vollbild) | TRANSPARENT_STATUS_BAR true | viewport-fit=cover im Viewport-Meta-Tag, Padding mit env(safe-area-inset-top) am Header und der untere Inset an fixierten unteren Leisten |
| Native untere Navigation | ENABLE_NAVIGATION_FOOTER true, Einträge in res/menu/menu_drawer.xml | Blende deine eigene fixierte Tab-Bar in der App aus, damit sich die beiden nicht stapeln |
| Immersive Screens (Video, Spiele, Kiosk) | hidebars://on und hidebars://off aus JavaScript | Die Leisten kommen mit einem Wischen vom Rand zurück; halte wichtige Bedienelemente von den Rändern fern |
Edge-to-Edge-sicheres CSS für deine Web-App
Ergänze zuerst viewport-fit=cover im Viewport-Meta-Tag: <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">. Gib dann fixierten Elementen ein Padding mit den Safe-Area-Insets. Dasselbe CSS funktioniert in der iOS-App; der Safe-Area-Guide zu Guideline 4.0 behandelt die iOS-Einstellungen.
css
:root {
--inset-top: env(safe-area-inset-top, 0px);
--inset-bottom: env(safe-area-inset-bottom, 0px);
--inset-left: env(safe-area-inset-left, 0px);
--inset-right: env(safe-area-inset-right, 0px);
}
/* Sticky Header: Inhalt beginnt unterhalb der Statusleiste */
.app-header {
position: sticky;
top: 0;
padding-top: calc(12px + var(--inset-top));
padding-left: calc(16px + var(--inset-left));
padding-right: calc(16px + var(--inset-right));
}
/* Fixierte Tab-Bar: bleibt über dem Gestenbalken oder der Button-Leiste */
.tab-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding-bottom: calc(8px + var(--inset-bottom));
}
/* Platz für die Tab-Bar und dynamische Viewport-Einheiten statt 100vh */
main {
min-height: 100dvh;
padding-bottom: calc(72px + var(--inset-bottom));
}Schritt für Schritt beheben
Etwa eine Stunde, das meiste davon Tests auf zwei Emulatoren.
Aktualisiere das Template, statt targetSdk anzuheben
Ältere WebViewGold-Projekte zielten auf ein API-Level unter 35 ab und mussten sich nie mit Edge-to-Edge befassen. Wer die Zahl von Hand anhebt, überspringt den Code, der dazugehört. Das aktuelle Template enthält die Anpassungen der Statusleiste für Android 15 (ab Changelog-Version 16.4) und spätere Verfeinerungen der Statusleiste; übertrage deine Einstellungen wie im Guide zum Target API Level beschrieben oder baue im Cloud Builder neu.
Leg fest, wer die Insets übernimmt
Für die meisten Vibe-Coding-Apps ist das native Setup am sichersten:
TRANSPARENT_STATUS_BARfalse und deine Markenfarbe alscolorPrimaryDark. Wähle das transparente Setup nur, wenn dein Design Inhalte hinter der Statusleiste braucht, und behandle die Insets dann konsequent im CSS.Farben und Icon-Kontrast festlegen
Stell
blackStatusBarTextpassend zu deiner Farbe ein. Ändert sich die Farbe pro Seite (Dark Mode, ein farbiger Hero-Bereich), schalte sie aus JavaScript mitstatusbarcolor://R,G,Bundstatusbartextcolor://whiteoderstatusbartextcolor://blackum;bottombarcolor://undnavbartextcolor://machen dasselbe für die Android-Navigationsleiste. Siehe die Dynamic-UI-API.Füge das CSS hinzu, auf Wunsch nur für die App
Pack das Safe-Area-CSS in deine Web-App oder in die custom.css des Projekts, wenn es nur in der App gelten soll. Ersetze
100vhbei Screens in voller Höhe durch100dvh.Teste die Matrix
Emulatoren mit Android 15 und Android 16, jeweils einmal mit Gestennavigation und einmal mit Drei-Button-Navigation; ein Geräteprofil mit Display-Ausschnitt (Cutout); Querformat, wo
HIDE_NAVIGATION_BAR_IN_LANDSCAPEhelfen kann; und ein Formular mit geöffneter Tastatur. Prüf jeweils den Header, die untere Leiste und den ersten und letzten Listeneintrag.Hochladen und das Dashboard erneut prüfen
Lade mit höherem Version Code hoch. Eine Empfehlung zu veralteten APIs, die auf eine Bibliothek zeigt, kann bestehen bleiben; entscheidend ist, dass nichts in deiner Oberfläche unter einer Systemleiste liegt.
Prompt: Mach deine Web-App Edge-to-Edge-sicher
Der Prompt lässt das Desktop-Layout unangetastet und ergänzt nur die Insets.
In Lovable, Bolt, Cursor oder Claude Code einfügen
Meine Web-App läuft auch in nativen Android- und iOS-Apps (WebViewGold). Android 15 und neuer zeichnen Apps Edge-to-Edge, daher können fixierte Elemente unter der Statusleiste und der Navigationsleiste landen. Bitte passe das Layout an: 1. Ergänze viewport-fit=cover im bestehenden Viewport-Meta-Tag und behalte seine anderen Werte bei. 2. Definiere CSS-Variablen für env(safe-area-inset-top), env(safe-area-inset-bottom), env(safe-area-inset-left) und env(safe-area-inset-right), jeweils mit 0px als Fallback. 3. Füge den oberen Inset zum Padding des sticky oder fixierten Headers hinzu und den unteren Inset zum Padding jeder fixierten unteren Leiste, jedes Floating Action Buttons und jedes Cookie-Banners. 4. Ergänze am Hauptinhalt ein passendes Padding unten, damit der letzte Eintrag nicht hinter der unteren Leiste verschwindet. 5. Ersetze 100vh bei Layouts in voller Höhe durch 100dvh. 6. Ändere in einem normalen Desktop-Browser keine Farben, Abstände oder Verhaltensweisen. Liste jede Datei und jeden Selektor auf, den du geändert hast.
Edge-to-Edge-Checkliste
- Aus dem aktuellen WebViewGold-Template gebaut, nicht aus einem alten Projekt mit angehobenem targetSdk.
- Nur einer ist für die Insets zuständig: nativ (deckende Statusleiste) oder CSS (transparente Statusleiste), nie beides.
- Icons der Statusleiste auf jeder Seite lesbar, im hellen und im dunklen Modus.
- Header und untere Leiste frei von den Systemleisten, mit Gesten- und mit Drei-Button-Navigation.
viewport-fit=coverplus Padding mitenv(safe-area-inset-*)an fixierten Elementen.- Auf Android 15 und 16 getestet, im Hoch- und Querformat, mit geöffneter Tastatur.
Häufig gestellte Fragen
Kann ich Edge-to-Edge unter Android noch abschalten?
Nicht für einen neuen Upload. Das Opt-out-Attribut funktionierte für Apps mit API-Level 35 als Ziel; für Apps mit API-Level 36 ist es auf Android-16-Geräten deaktiviert, und Google Play verlangt für neue Apps und Updates inzwischen API-Level 36.
Warum sind die Icons in meiner Statusleiste unsichtbar?
Die Leiste hat dieselbe Farbe wie die Icons, meist weil sie über einem hellen oder dunklen Header transparent ist. Stell blackStatusBarText passend zur Farbe deiner Statusleiste ein oder schalte pro Seite mit statusbartextcolor://white oder statusbartextcolor://black um.
Betrifft Android Edge-to-Edge meine iOS-App?
Nein, aber iOS hat eigene Safe Areas. WebViewGold für iOS behandelt sie standardmäßig mit autoAdjustSafeAreaInsets, und das CSS auf dieser Seite funktioniert in beiden Apps.
Die Play Console sagt, ich nutze setStatusBarColor, aber das habe ich nie geschrieben. Warum?
Die Empfehlung listet Aufrufe, die irgendwo im Bundle gefunden wurden, auch in Bibliotheken wie den Material Components. Es ist eine Empfehlung, keine Ablehnung. Halte das Template und seine SDKs aktuell und sorg dafür, dass deine Oberfläche nicht von den Systemleisten verdeckt wird.
Mein Tablet-Layout hat sich nach dem Update verändert. Hängt das damit zusammen?
Teilweise. Für Apps, die auf Android 16 abzielen, ignoriert Android auf großen Bildschirmen (kleinste Breite ab 600 dp) Einschränkungen für Ausrichtung und Größenänderung, eine Hochformat-Sperre in TABLET_ORIENTATION greift dort also möglicherweise nicht mehr. Sorg dafür, dass deine Web-App ein brauchbares Tablet- und Querformat-Layout hat.
Drei Wege, deine App in die Stores zu bringen
Gleiches Ergebnis, unterschiedlich viel Arbeit auf deiner Seite. Alle drei kommen mit Genehmigungsgarantie und 24/7 Support von echten Menschen.
Selbst machen
$109 pro Plattform, einmalig
Die WebViewGold-Lizenz: ein fertiges Xcode- oder Android-Studio-Projekt. URL einfügen, Name und Icon setzen, Features einschalten, bauen und einreichen. Kostenlose Updates für immer.
Pakete auf der Hauptseite ansehenCloud Builder
$349 pro Lizenz, einmaliges Add-on
Kein Mac, kein Xcode, kein Android Studio: Du konfigurierst im Browser, wir bauen beide Apps in der Cloud und übergeben sie an App Store Connect und die Play Console.
So funktioniert der Cloud Builder Kostenlose Demo ausprobierenFull Service
$698 pro Plattform $798
Schick uns deine URL und dein Icon. Unser Team konfiguriert, baut und liefert deine App innerhalb von 72 Stunden, White-Label, inklusive Quellprojekten. Beide Plattformen für $1,158.
Full-Service-Details Powered by
Winter-Sale-Preise gültig bis 31. Dezember 2026.