Toolbar display on Android

Capacitor
1

I recently decided to update an app I have to the latest ionic and angular libraries. When testing the android version, I saw that the toolbar is jammed all the way to the top of the device screen and the controls in the toolbar are unresponsive. Anyone know anything about this.

You can replicate this by creating a new angular, side menu project and then adding android. Simulators have the latest updates from google.

Details:

Ionic cli v7.2.1

package.json

"@angular/animations": "^20.0.0",
"@angular/common": "^20.0.0",
"@angular/compiler": "^20.0.0",
"@angular/core": "^20.0.0",
"@angular/forms": "^20.0.0",
"@angular/platform-browser": "^20.0.0",
"@angular/platform-browser-dynamic": "^20.0.0",
"@angular/router": "^20.0.0",
"@capacitor/android": "7.4.3",
"@capacitor/app": "7.0.2",
"@capacitor/core": "7.4.3",
"@capacitor/haptics": "7.0.2",
"@capacitor/keyboard": "7.0.2",
"@capacitor/status-bar": "7.0.2",
"@ionic/angular": "^8.0.0",
"ionicons": "^7.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.15.0"

Android simulators
Pixel pro 8
Pixel 6a

Android studio 2025.1.2 Patch 2

pixel 8 pro
pixel 8 pro1344Ă—2992 115 KB

2

Yes, this is Android’s Edge-to-Edge “feature”. There are already lots of posts about this here.

See Edge to edge Android which has other posts referenced. Also look at Capactor 7 on Android - Toolbar and Tab Bar - display issue.

I am actually just upgrading our app to Capacitor 7 right now and trying to figure out what solution works best for us :grinning_face_with_smiling_eyes:

3

Adding the following code to capacitor.config.ts fixed the issue for me:

android: {

    adjustMarginsForEdgeToEdge: 'force',

},
1 Like
4

Thanks Angela. Worked for me.

1 Like
5

Solution shared by @angela-IT worked for me. I did notice that the common android phone stuff at the top was missing though. My app looks fine.