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
Critical Insight
Two distinct approaches exist: pad the container for external content, or inject JavaScript with CSS variables for content you control.
