Actionbar behind Statusbar on Android

[csimpi]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

√ Component nativescript has 6.3.3 version and is up to date.
√ Component tns-core-modules has 6.3.2 version and is up to date.
√ Component tns-android has 6.3.1 version and is up to date.

package.json

{
  "name": "frontend",
  "version": "0.0.0",
  "scripts": {
    "android": "tns run android",
    "ios": "tns run ios",
    "mobile": "tns run",
    "preview": "tns preview",
    "ng": "ng",
    "start": "ng serve --ssl --host 192.168.0.10  --disableHostCheck",
    "build": "ng build --resourcesOutputPath resources --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.2.0-next.0",
    "@angular/cdk": "^8.1.3",
    "@angular/common": "~8.2.0-next.0",
    "@angular/compiler": "~8.2.0-next.0",
    "@angular/core": "~8.2.0-next.0",
    "@angular/forms": "~8.2.0-next.0",
    "@angular/platform-browser": "~8.2.0-next.0",
    "@angular/platform-browser-dynamic": "~8.2.0-next.0",
    "@angular/router": "~8.2.0-next.0",
    "@ckeditor/ckeditor5-angular": "^1.1.0",
    "@ckeditor/ckeditor5-build-classic": "^12.4.0",
    "@ckeditor/ckeditor5-image": "^14.0.0",
    "@fortawesome/fontawesome-free": "^5.9.0",
    "@fullpage/angular-fullpage": "0.0.14",
    "@mapbox/mapbox-gl-draw": "^1.1.2",
    "@nativescript/schematics": "^1.0.0",
    "@nativescript/theme": "~2.2.1",
    "@ng-bootstrap/ng-bootstrap": "^5.0.0-rc.1",
    "@ngneat/content-loader": "^4.1.0",
    "@ngu/carousel": "^1.5.5",
    "@sweetalert2/ngx-sweetalert2": "^7.0.1",
    "@turf/turf": "^5.1.6",
    "@types/chart.js": "^2.7.56",
    "@w11k/angular-sticky-things": "^1.1.2",
    "alertifyjs": "^1.11.4",
    "angular-bootstrap-datetimepicker": "github:Bitmads/angular-bootstrap-datetimepicker",
    "angular-bootstrap-md": "^7.5.4",
    "angular-fittext": "^2.1.1",
    "animate.css": "^3.7.2",
    "bootstrap": "^4.3.1",
    "chart.js": "^2.5.0",
    "core-js": "^3.1.4",
    "easy-pie-chart": "^2.1.7",
    "hammerjs": "^2.0.8",
    "laravel-echo": "^1.5.4",
    "mapbox-gl": "^0.54.0",
    "moment": "^2.24.0",
    "nativescript-angular": "~8.20.0",
    "nativescript-mapbox": "^4.4.1",
    "ng-circle-progress": "^1.4.1",
    "ng-uikit-pro-standard": "git+https://oauth2:*********@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git",
    "ngx-content-loading": "^0.1.3",
    "ngx-facebook": "^2.4.0",
    "ngx-filter-pipe": "^2.1.2",
    "ngx-img-fallback": "^1.3.4",
    "ngx-laravel-echo": "^1.0.26",
    "ngx-lightbox": "^2.1.0",
    "ngx-mapbox-gl": "^3.3.0",
    "ngx-moment": "^3.4.0",
    "ngx-order-pipe": "^2.0.3",
    "ngx-swiper-wrapper": "^8.0.2",
    "noty": "^3.2.0-beta",
    "ol": "^6.1.1",
    "reflect-metadata": "~0.1.12",
    "rxjs": "~6.5.2",
    "screenfull": "^3.3.0",
    "sweetalert2": "^9.4.1",
    "tns-core-modules": "~6.3.0",
    "tslib": "^1.10.0",
    "wowjs": "^1.1.3",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "nativescript-dev-webpack": "~1.4.0",
    "@nativescript/schematics": "~1.0.0",
    "@nativescript/tslint-rules": "~0.0.5",
    "@angular-devkit/build-angular": "~0.801.0",
    "@angular/cli": "~8.1.0",
    "@angular/compiler-cli": "~8.2.0-next.0",
    "@angular/language-service": "~8.2.0-next.0",
    "@types/jasmine": "~3.3.13",
    "@types/jasminewd2": "~2.0.3",
    "@types/mapbox-gl": "^0.51.10",
    "@types/node": "~12.0.12",
    "codelyzer": "~5.1.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "node-sass": "^4.13.1",
    "protractor": "~5.4.0",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "3.4.5"
  },
  "browser": {
    "fs": false,
    "path": false,
    "os": false
  },
  "nativescript": {
    "id": "org.nativescript.ngsample",
    "tns-android": {
      "version": "6.3.1"
    }
  }
}

Describe the bug

I have a basic starter Nativescript - Angular project. I'm building the app for Android with tns run android. I'm testing on my Note 8 phone and an emulator too.

I don't know why but the Actionbar appears behind the Statusbar. When I'm running tns preview it appears as expected, Actionbar is below the Statusbar! When I'm testing a sample app in Android studio (without Nativescript and Angular) the actionbar appears as expected too.

I've tried a lot of version of template file

• Only Actionbar in the template
• Actionbar Wrapped into a Layout
• Actionbar Wrapped into a FlexboxLayout and Page
• Actionbar outside (above) of a Page and/or FlexboxLayout

To Reproduce

This is a huge Angular project I don't know how should anybody reproduce this issue.

Expected behavior

Actionbar's content appears below the statusbar, statusbar shouldn't cover it.

Sample project

Here is the full code:
https://stackoverflow.com/questions/59802806/actionbar-is-behind-statusbar

Additional context

[NickIliev]

@csimpi remove the following line from App_Resources/Android/src/main/res/values/styles.xml and from App_Resources/Android/src/main/res/values-v21/styles.xml

<item name="android:windowTranslucentStatus">true</item>

And then rebuild the app. The issue is discussed here

[csimpi]

Thank you! I just created a new native script project and overwrite the whole App_Resources folder with the new one and the issue has disappeared. It's still a question why the App Resources content was corrupted after the first installing? I was following the Angular migration document.