Detect Android soft navigation bar height in Ionic 2

keyboardresizemode
scroll to the focused item input when the keyboard is up cordova
keyboardwillhide ionic
ionic keyboard isvisible
hidekeyboardaccessorybar ionic 4
ion keyboard
resizeonfullscreen
ionic 4 keyboard covers input

In my Ionic 2 application, I have a grid component with items, that scrolls vertically.

The problem is that in Android devices with soft navigation bar (included in the screen) The scrolling stops before the entire content has revealed (see the bottom of the screen).

Example screenshot of an Android Nexus 5 (with soft bottom navigation bar):

Example screenshot of an iPhone 7 (without soft bottom navigation bar):

My question is: How can I detect the soft navigation bar's height (if existent) so that I can add it to the grid's bottom padding?

Try to use Cordova Fullscreen Plugin or add the below settings in your config file,

<preference name="Fullscreen" value="true" />

resizeOnFullScreen makes app extend below Navigation Bar · Issue , I used the solution here to obtain the navigation bar's height: I know next to nothing about Android development so if there are any mistakes do help to dm.​density; //http://stackoverflow.com/a/4737265/1091751 detect if keyboard is bar​. If Ionic team wants a demo app to reproduce, we can provide that. I am trying to determine soft navigation bar through the android program. I didn't find straight way to determine. Is there anyway to find the navigation bar availability. Soft Navigation bar image is here.

Answer:

We can use the global screen object, in order to get the dimensions of the entire screen, and the normal platform.height() to get the dimensions if the window (without the soft navigation bar's height).

Sample method:

/**
   * On some Android devices there is a soft navigation bar,
   * which overlaps with the screen.
   * For that reason, we need to compute an extra space for
   * the drawer so that the items in the last
   * row are not shown "behind" the navigation bar
   * @returns {number} the difference in pixels.
   */
  getMarginBottomPropertyForDrawer() {
    const difference = screen.height - this.platform.height();
    return difference;
  }

Keyboard height includes height of system soft menu buttons at the , That includes the 48px soft menu bar at the bottom. <plugin name="ionic-​plugin-keyboard" source="npm" version="2.0.1" confirm, same for me Nexus 7 Android 6, but seems like height includes height of status bar. Detect keyboard height change on iOS; Calculate Android screen height properly #  Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

Adding to Paul's answer in case someone else is having this issue:

You can get the height of the soft navigation bar using the original answer, and then inject that as a CSS variable and use it directly in your style:

  ngOnInit(){

    this.platform.ready().then(() => {
      this.checkSoftButton();
    });
  }


  private checkSoftButton(){
    const softButton=(screen.height - this.platform.height());
    const body:any=document.querySelectorAll('body');
    body.forEach((e:any)=>{
      e.classList.add('soft-button');
      e.style= '--ion-soft-button:' + softButton + 'px';
    });
  }

You can do this once in the first component and then use it in your style like

  height:calc(100% - var(--ion-soft-button));

or

  height:calc(100vh - var(--ion-soft-button));

You can even use the soft-button class added to the body in case you need to perform another operation inside your app if there is a soft button.

Android navigation bar height react native, Oct 17, 2017 · Detecting Android soft navigation keys in React Native. Ionic Framework is the free, open source mobile UI toolkit for developing high-quality  Android navigation bar The Android navigation bar houses the device navigation controls: Back, Home, and Overview. It also displays a menu for apps written for Android 2.3 or earlier.

Navigation Bar, The NavigationBar plugin allows you to hide and auto hide the android navigation bar. ionic cordova plugin add cordova-plugin-navigationbar npm install  Detect window dimension change when virtual .height 2. On the samsung s8 the virtual home/back button can be hidden so i will toggle this on or of and a layout

Detecting Android soft navigation keys in React Native, Detecting Android soft navigation keys in React Native we can see how to '​remove' (make transparent/translucent) the bottom navigation bar from our app: Step 2. The System Navigation has a height of 48dp. The Bottom  This lesson describes how to hide the navigation bar, which was introduced in Android 4.0 (API level 14). Even though this lesson focuses on hiding the navigation bar, you should design your app to hide the status bar at the same time, as described in Hiding the Status Bar. Hiding the navigation and status bars (while still keeping them readily

Footer comes up with keyboard android ionic, Hi, I want my footer fixed at bottom even if virtual keyboard is open. used in HTML to apply css class according to the keyboard to adjust the height of ionic view. On Android not in fullscreen mode, i. bar-footer jumps up above the keyboard to our Ionic Framework apps to make them look even better in Ionic Navigation  Ionic’s navigation stack is stored in and controlled by the NavController class. By injecting this class into a @Page , you can manipulate the navigation stack. Adding items to the stack uses a push method and removing items from a stack uses a pop method, very similar to an array in javascript.

Comments
  • Thanks for your comment. Won't this plugin result in both the soft navigation and the status bar to be hidden? I would not want that. I would like just to have a way of measuring the screen height, with the soft navigation bar in mind.
  • Where is this.platform defined at? I can't find it referenced anywhere.
  • Idt I can edit comments, but just for reference I'm using cordova version 7, and I did some research into platform. It looks like that's an ionic feature and I don't have access to it. Do you know of any workarounds?
  • Hi, to have access to this.platform, all you have to do is to inject it in the constructor, like this: constructor(private platform: Platform)