Hide bottom system bar in android - ionic v4

Question

I come in with a question about the bottom system bar, if the bar status was easy to hide so the bottom one did not, I tried hideFormAccessoryBar, but it did not help

Answer 1

This took me a bit of digging but I managed to find a solution. As it turns out this piece of UI is call the "Navigation Bar". There's a view value SYSTEM_UI_FLAG_HIDE_NAVIGATION that can be set in your MainActivity.java file that will hide it. The official documentation is here,

https://developer.android.com/training/system-ui/navigation#java

IljaDaderko offer's a solution for how to implement the property here https://github.com/ionic-team/capacitor/issues/2423 and there is a PR out standing for ionic to support this out of the box.

Basically as of today you will need to open your MainActivity.java file in your android folder (should android/app/src/main/java/... in ionic 4, 3 may be slightly different) and update the file to look like so,

package io.ionic.starter;

import android.os.Bundle;
import android.view.View;

import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;

import java.util.ArrayList;

public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    hideSystemUI();

    /**
    * Initialize capacitor bridge
    */
    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
      // Additional plugins you've installed go here
      // Ex: add(TotallyAwesomePlugin.class);
    }});
  }

  @Override
  public void onWindowFocusChanged(boolean hasFocus) {
    super.onWindowFocusChanged(hasFocus);
    if (hasFocus) {
      hideSystemUI();
    }
  }

  /**
  * Hide android navbar and toolbar for full screen experience
  */
  private void hideSystemUI() {
    final int flags = View.SYSTEM_UI_FLAG_LAYOUT_STABLE
            | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
            | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
            | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
            | View.SYSTEM_UI_FLAG_FULLSCREEN
            | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY;
    View decorView = getWindow().getDecorView();

    decorView.setSystemUiVisibility(flags);
    decorView.setOnSystemUiVisibilityChangeListener((int visibility) ->  {
      if((visibility & View.SYSTEM_UI_FLAG_FULLSCREEN) == 0) {
        decorView.setSystemUiVisibility(flags);
      }
    });
  }
}