MAUI: how to get the system navigation bar height on Android?

Question

On a MAUI app, we display some information at the bottom of the screen: for example we display the version number of the at the bottom of the menu in the Shell.

On most devices, the screen is well displayed and is fully visible. However, on some devices, the "system navigation bar", which contains "back", "home" and "recent" buttons, is displayed above the app screen. This bar is also called "soft keys" or "system bar".

Is there a way to get the height of this system navigation bar?

Answer 1

You can get it on each platform using custom renderer.

For Android

public class NaviRendererForAndroid : NavigationPageRenderer
{
    public CustomNaviForAndroid(Context context) : base(context)
    {

    }

    protected override void OnElementChanged(ElementChangedEventArgs<NavigationPage> e)
    {
        base.OnElementChanged(e);

        var height = 0;

        Resources resources = Context.Resources;
        int resourceId = resources.GetIdentifier("navigation_bar_height", "dimen", "android");
        if (resourceId > 0)
        {
            height = resources.GetDimensionPixelSize(resourceId);
        }
    }
}

For iOS

  public class NaviRendererForiOS : NavigationRenderer
{
    protected override void OnElementChanged(VisualElementChangedEventArgs e)
    {
        base.OnElementChanged(e);

        var height = NavigationBar.Bounds.Height;
    }
}

For how to use Custom Renderers in MAUI,you can check Using Custom Renderers in .NET MAUI.