[Ionic v4] ion-header ion-toolbar height to big on Android devices

[peterpeterparker]

Ionic Info
@ionic/angular: "4.0.0-beta.2"

Describe the Bug
The ion-header ion-toolbar height is too big on (real) Android devices (see Screenshot)

Expected Behavior
A correct header size on devices

Related
In beta.2 the same issue was solved for iOS, don't know if it's related #15073

Screenshot

[MarJaysonSanAgustin]

I solved the issue using these steps:

1. On MainActivity.java file on Android platform folderplatforms/android/src/../../MainActivity.java, paste the following code after super.onCreate()

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
	getWindow().getDecorView().setSystemUiVisibility(
	   View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
	   View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
}

2. Add these packages in MainActivity.java

import android.os.Build;
import android.view.View;

Reference: https://github.com/jeneser/ionic-super-bar

[peterpeterparker]

@JAYiSON021 I don't think that's related. With the same platform version I don't face the problem with v3 only with v4

[MarJaysonSanAgustin]

@peterpeterparker I tried that in my newly generated project (v4) because i had the same problem on native device.

[peterpeterparker]

@JAYiSON021 in that case that's a workaround, thx ;) Out of the box I think that the height of the header of a Ionic app should match the device without any modification in the platform code therefore I think it need a fix

[bleuscyther]

what happens if you do :
this.statusBar.overlaysWebView(false);

or

this.statusBar.overlaysWebView(true);

also check the config.xml to see if its enabled/disabled

[peterpeterparker]

@bleuscyther I migrate my app from v3 to v4, the statusbar settings are exactly the same

[bleuscyther]

i just noticed that the page looking at for a reference has no header.
Same issue reported here: #15138

[brandyscarney]

@peterpeterparker Are you still seeing this on beta.3?

[peterpeterparker]

@brandyscarney thx for asking. yes the issue is still here with beta.3

screenshot of my paired device

screenshot from the device

[brandyscarney]

@manucorporat I think we need to check for the platform class for this: https://github.com/ionic-team/ionic/blob/master/core/src/components/app/app.scss#L6

[abou-emish]

@brandyscarney you are right, the following CSS fixed it

ion-header.header-md ion-toolbar:first-child {
    padding-top: 0;
}

[peterpeterparker]

I could confirm that, with v4-beta.5, the height of my toolbar/header is now correct on both real iPhone 6s and Android Samsung Edge and simulated iPhone X

Thx a lot!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.