Status bar overlap application on android

Question

I'm learning native script by following this course on udemy and on the first lines of my code, I'm facing a problem on Android.

I just created a component with a Stacklayout and inside a Label. When I run this on both ios and android emulator, everything is ok on ios. But on android the label is behind the status bar. I tried to run it on my real android device and the result is the same. The project is really simple, I basically ran TNS create, deleted all unnecessary components and routing stuff.Then added this very basic component. No css rules at all are involved.

In this video of the course, the teacher doesn't have this problem. What is wrong with my config?

Answer 1

I encounter the same issue and it is now fixed by changing below code:

Navigate to App_Resources/Android/src/main/res/values/styles.xml and values-v21/styles.xml

and either make the below code false instead of true or totally remove it.

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

It will fix your problem.

Answer 2

I your case you are right. The behaviour of the preview is not guarantee to match at 100% the behaviour of a real build. Here is some more info: https://nativescript.org/blog/nativescript-preview/ Also in your case the bar you see in the preview on android is the status of the status bar of the preview app and not your app.

This behaviour is may be dependant on:

1. NativeScript flavour (vue, angular, core...)
2. The layout orders (some layout behave differently)
3. The version of nativescript
4. The Phone Os version
5. All the package used

There might be multiple way of addressing the status bar issue.

In my case I used backgroundSpanUnderStatusBar on the page tag to indicate that the status bar color should be the same as the background of the top component.

On IOS this is great. But on android the my app started "under" the status bar. This is the same describe behaviour of the question. This is because the status bar is os specific.

The solution/cheat I found (inspired from a plugin I do not remember). Calculate the height of the Os status bar and add a top padding to the root element. Here is the calculated height function:

import * as application from 'tns-core-modules/application';
import * as utils from 'tns-core-modules/utils/utils';

getStatusBarHeight() {
  let result = 0;
  if (application.android) {
    const resourceId = (application.android.foregroundActivity || application.android.startActivity).getResources().getIdentifier('status_bar_height', 'dimen', 'android');
    if (resourceId) {
      result = (application.android.foregroundActivity || application.android.startActivity).getResources().getDimensionPixelSize(resourceId);

      result = utils.layout.toDeviceIndependentPixels(result);
    }
  }
  return result;
},

And in use with nativescript vue:

<DockLayout :paddingTop="getStatusBarHeight()"></DockLayout>

Note that I return 0 if on ios and on android I return the calculated value. This is a kind of cheat but works pretty well.

I am running tns-core 6.5.1. Newer version may fix some problem of the status bar on android.