Nativescript: Content goes behind soft buttons on Android

[TheDanO]

Dear friend, we, the rest of the NativeScript community really
appreciate your feedback! While we are doing all we can to take care of every
issue, sometimes we get overwhelmed. Because of that, we will consider issues
that are not constructive or problems that cannot be reproduced "dead".
Additionally, we will treat feature requests or bug reports with unanswered
questions regarding the behavior/reproduction for more than 20 days "dead". All
"dead" issues will get closed.

Please, provide the details below:

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo? Yes

Tell us about the problem

Soft navigation buttons on Android overlap content that stretches to the bottom of the screen.

Which platform(s) does your issue occur on?

Android

Please provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it)
  2.2.1
• Cross-platform modules: (check the 'version' attribute in the
  node_modules/tns-core-modules/package.json file in your project)
  2.2.1
• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the
  package.json file of your project)
• Plugin(s): (look for the version number in the package.json file of your
  project)
  "dependencies": {
  "@angular/common": "2.0.0-rc.4",
  "@angular/compiler": "2.0.0-rc.4",
  "@angular/core": "2.0.0-rc.4",
  "@angular/http": "2.0.0-rc.4",
  "@angular/platform-browser": "2.0.0-rc.4",
  "@angular/platform-browser-dynamic": "2.0.0-rc.4",
  "@angular/platform-server": "2.0.0-rc.4",
  "@angular/router": "3.0.0-beta.2",
  "moment": "^2.14.1",
  "nativescript-angular": "0.3.1",
  "nativescript-drop-down": "^1.3.2",
  "nativescript-telerik-ui": "^1.3.1",
  "numeral": "^1.5.3",
  "rxjs": "5.0.0-beta.6",
  "tns-core-modules": "2.2.1",
  "tns-platform-declarations": "^2.2.0",
  "underscore": "^1.8.3"
  },
  

  Please tell us how to recreate the issue in as much detail as possible.

Basically any content that is forced to the bottom of the device (such as fixed buttons) are hiding behind the soft navigation buttons. I don't know if this is because of the ScrollView or not (see code below) but I have been able to recreate it in the Groceries sample app. Do we need to find the soft button height like Here?

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

<GridLayout rows="*, auto", columns="*">
    <ScrollView orientation="vertical" row="0" col="0">
        <StackLayout>
            <Label text="anything here"></Label>
        </StackLayout>
    </ScrollView>
    <StackLayout orientation="horizontal" col="0" row="1" horizontalAlignment="center">
        <Button text="Approve"></Button>
        <Button text="Reject"></Button>
    </StackLayout>
</GridLayout>

[NathanaelA]

@TheDanO - Question, can you actually see content behind the soft buttons? If so that can be a pretty cool feature to highlight one of the soft buttons...

I also assume your missing the Final in your example and nothing else needs to be present...

[TheDanO]

I cannot see the content behind the soft navigation buttons but when I rotate the device (in emulator), the buttons show up. I am guessing this is due to the soft nav moving to the side after rotation.

Yep, good catch I am missing the closing GridLayout tag on the code. That's not the issue in question -- I'll edit my initial question.

[NathanaelA]

Are you seeing this on a emulator and/or real device? If so, which emulator/version?

I have a couple of fairly complex layouts using gridlayouts, scrollviews and the layouts still had the proper layout...

The missing close gridlayout was just an aside.

[TheDanO]

I am seeing this on an emulator. When I deploy it to my Samsung S7 which doesn't have soft nav buttons, I do not see the issue. The emulator is targetting Android 5.1.1, API 22, emulating the Nexus 6 with the Intel Atom (x86_64) CPU/ABI. Imgur Link to what the issue looks like. Also, the code in the imgur is below:

<GridLayout rows="*, auto" , columns="*">
  <ScrollView orientation="vertical" row="0" col="0">
    <StackLayout>
      <Label text="kljsdf"></Label>
      <Label text="kljsdf"></Label>
      <Label text="kljsdf"></Label>
      <Label text="kljsdf"></Label>
      <Label text="kljsdf"></Label>
      <Label text="kljsdf"></Label>
      <Label text="kljsdf"></Label>
      <Label text="kljsdf"></Label>
      <Label text="kljsdf"></Label>
      <Label text="kljsdf"></Label>
      <Label text="kljsdf"></Label>
      <Label text="kljsdf"></Label>
      <Label text="kljsdf"></Label>
      <Label text="kljsdf"></Label>
      <Label text="kljsdf"></Label>
      <Label text="kljsdf"></Label>
      <Label text="kljsdf"></Label>
      <Label text="kljsdf"></Label>
      <Label text="kljsdf"></Label>
      <Label text="kljsdf"></Label>
    </StackLayout>
  </ScrollView>
  <StackLayout orientation="horizontal" col="0" row="1" horizontalAlignment="center">
    <Button text="Approve"></Button>
    <Button text="Reject"></Button>
  </StackLayout>
</GridLayout>

[TheDanO]

I just figured it out! The View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION was making content fall behind the soft nav buttons. I disabled that line and am working now

// Make the Android status bar transparent.
  // See http://bradmartin.net/2016/03/10/fullscreen-and-navigation-bar-color-in-a-nativescript-android-app/
  // for details on the technique used.
  if (application.android) {
    application.android.onActivityStarted = function() {
      if (application.android && platform.device.sdkVersion >= "21") {
        var View = android.view.View;
        var window = application.android.startActivity.getWindow();
        window.setStatusBarColor(0x000000);

        var decorView = window.getDecorView();
        decorView.setSystemUiVisibility(
          View.SYSTEM_UI_FLAG_LAYOUT_STABLE
          | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION //REMOVE THIS LINE
          | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
          | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
      }
    }
  }

[NathanaelA]

@TheDanO - Awesome, I just saw your image; and I could see what you were seeing in those images. But I have two separate apps with really complex layouts and they laid out properly on the reduced size screens with the soft buttons. I was trying to figure out how mine was working and yours wasn't.

Glad you figured it out... Those dang flags... ;-)

[weijyewang]

Been troubled by this for months until i found @TheDanO answers. You are a life savior! Thanks man!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.