How to fix the ominous Android Status Bar Issue

Remember Capacitor + Android Status Bar = 🤯?

🪲 This bug has haunted me for months—stalling the Android release of poketto.me and draining way too much mental energy. It’s one of those dreaded dev problems: no obvious solution, hard to debug, and endless rabbit holes.

Eventually, I had to bite the bullet and dig in. Here’s what I found:

💣 Issue #1: The Capacitor status bar plugin only half-works. There’s a StatusBar.setOverlaysWebView(true/false) API, but on modern Android versions it doesn’t behave as advertised. Why?

💣 Issue #2: Since API level 35 (Android 15+), activities render “edge-to-edge” by default, something that the Capacitor status bar plug-in doesn’t seem to be aware of. You could fix that also in the layout XML of your Android activity, but…

💣 Issue #3: With Capacitor, you can’t directly modify the XML layout of the main activity (since it hosts Capacitor’s WebView).

My solution:

Opt out of edge-to-edge rendering via the app’s theme. Plus: You can do that for specific API versions by creating a separate folder (called “values-35” in this case) and put a styles.xml in there which contains:

<style name=\"AppTheme.NoActionBar\" parent=\"Theme.AppCompat.NoActionBar\"\>
<item name=\"android:windowOptOutEdgeToEdgeEnforcement\"\>true\</item\>
</style\>

Bonus:

Android also exposes an API to recolor the status bar directly: window.setStatusBarColor(\...)

The result:

👉 The status bar renders outside the app, consistently across Android versions

👉 By default, it uses the system color

👉 When the user switches poketto.me’s reader theme (e.g. dark or midnight), the Angular app notifies the Android layer, which recolors the status bar on the fly

😅 Way harder than it should have been—but it finally works!