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?

Jemima

This might be an Android native issue where the Status Bar space taken is not included in the layout window. The same happens in React Native, which is why they include a StatusBar component on the StackLayout which essentially blocks the amount of space the status bar takes in each platform. So you could create a View that is as tall as the StatusBar. – Axum

Thanks for the answer. I see but I think it might be a problem on transparent status bar because it will take the color of this view. Don't know why I can't find other topics on that common issue. – Jemima

Are you able to reproduce the issue with Playground? – Concerned

I wrote this simple code in playground and i don't have this problem. Here is the link just in case play.nativescript.org/…. So the problem is from my config/install... Should I try to re install nativescript completely? – Jemima

I've just re installed everything (nativescript/angular), re created the project, re wrote the component and I still have the same problem... – Jemima

Landed here for the same problem. Do you know...If I launch the app with tns preview, the status bar is ok on my real device. With tns run android instead, the status bar overlaps the content. So it's a difference between the preview & run build? With tns – Shend

Same problem here, going to start a bounty! – Secundas

I run your playground and cannot reproduce this overlap bug on Mi 9. – Kep

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.

Xhosa

Hi Himanshu, please try to format code by using the markdown features of the text editor, as it can be hard to read otherwise. – Axum

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.

Duffey