I am working on ionic angular project where in beginning the navigation bar was not overlapping the UI and for making statusbar transparent i used
StatusBar.setOverlaysWebView({ overlay: true }); StatusBar.setStyle({ style: Style.Light });
then status bar and navigation both was working fine as i wanted
then i added screen orientation service for portrait and landscape from then the navigation bar is overlapping the UI and the only way i can fix it till now i have to make " web view overlay : false "
then the statusbar is not transparent
it is kinda trade off between navigation bar and status bar
Help me !
1 Like
This kinda sounds like Android’s Edge-to-edge change/issue - Edge to edge Android. Capawesome created a plugin mentioned there and Capacitor 7.1.0 was just released with a fix - Release 7.1.0 · ionic-team/capacitor · GitHub.
1 Like
Thanks for your reply @twestrick we are working on ionic v7.2.0 and capacitor v6.2.0 will it work?
Edge-to-edge only affects your app when using Capacitor 7 which targets Android SDK 35 - source.
Thankyou sir for giving attention to this post
I did see some people saying the fixes in Capacitor 7.1.0 weren’t helping or caused more issues. You could try the plugin Capawesome made as a temporary fix - Capacitor Android Edge-to-Edge Support Plugin - Capawesome.
Our app is still on Capacitor 6 waiting for all the kinks to get worked out with 7 
1 Like
Hi,
we are also using capacitor 7 and we are also facing same issue of our UI overlapping with navigation bar.
So as you said earlier we have installed “@capawesome/capacitor-android-edge-to-edge-support”: “^7.1.0”,.
and then
private async initializeApp() {
this.platform.ready().then(async () => {
if (Capacitor.isNativePlatform()) {
StatusBar.setOverlaysWebView({ overlay: true });
//Throwing error should use only color in hex
// StatusBar.setBackgroundColor({ color: 'transparent' });
// Using the proper enum value Style.Light
await EdgeToEdge.setBackgroundColor({ color: '#000000' });
StatusBar.setStyle({ style: Style.Light });
}
this.setupDeepLinks();
});
}
now the problem is we are not able to make the status bar transparent and extend our app behind status bar.
Any help would be appreciated.
Thank you in advance.