Ash Nohe: Make WebViews edge-to-edge in Android
Original post Make WebViews edge-to-edge in Android
Article Summary
Android 16 just made edge-to-edge mandatory for all apps. If your WebViews aren't ready, they'll break on launch.
Google's Android Developer Relations team published a comprehensive guide on handling WebView layouts in the new edge-to-edge world. The article covers both external content and owned web content scenarios, with full code samples for Compose and Views.
Key Takeaways
- External WebViews need container padding plus background color matching
- Owned content can use JavaScript injection with CSS variables for insets
- IME insets must be handled or keyboards will obscure webpage content
- Convert raw pixels to density independent pixels before CSS injection
- Meta viewport tag viewport-fit=cover required for edge-to-edge web pages
Two distinct approaches exist: pad the container for external content, or inject JavaScript with CSS variables for content you control.
Continue reading
What This Article Covers
Android 16 removes the ability to opt-out of edge-to-edge rendering. Developers now have to handle system bar and display cutout insets in WebViews, or they risk UI collisions and overlapping content.
Ash Nohe's guide offers two paths depending on your setup. For external WebViews, wrap them in containers using windowInsetsPadding in Compose or fitsSystemWindows in Views. For content you own, use JavaScript to inject CSS variables that convert raw pixels to density-independent pixels for safe-area insets.
Developers can keep WebView compatibility across Android 15 and 16 by using the provided code samples for Compose and Views. These samples handle system bars, display cutouts, and IME insets at the same time, which keeps layouts accessible.
This page summarizes “Make WebViews edge-to-edge in Android” by Ash Nohe, published Mar 25, 2025. All credit for the original work goes to the authors.
