Search code examples
androidxamarin.android

NavigationBar shows up when toolbar menu is clicked


Hello,

I am trying to make my android app fullscreen and hide the navigation bar.

It works well but I noticed that when I press a button on my custom toolbar the navigation bar reappears and stays visible. It has a solid black color, so it is not the "normal" semi-transparent version that briefly shows up if you swipe up from the bottom etc.

How can I make sure the bar stays hidden? And as a bonus question, is it possible to also hide the temporary semi-transparent version so the bar is completely removed?

I am using the following code in the activity to hide the NavigationBar, and create the toolbar:

    protected override void OnResume()
    {
        base.OnResume();
        WindowCompat.SetDecorFitsSystemWindows(Window, false);
        var windowInsetsControllerCompat = new WindowInsetsControllerCompat(Window, _MainContainer);
        windowInsetsControllerCompat.Hide(WindowInsetsCompat.Type.SystemBars() | WindowInsetsCompat.Type.NavigationBars());
        windowInsetsControllerCompat.SystemBarsBehavior = WindowInsetsControllerCompat.BehaviorShowTransientBarsBySwipe;
    }

    public override bool OnCreateOptionsMenu(IMenu menu)
    {
        MenuInflater.Inflate(Resource.Menu.custom_toolbar_menu, menu);
        return true;
    }

And my Menu looks like this:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/selectItem"
        android:icon="@drawable/select_item_48"
        android:title="@string/title_select_item"
        app:showAsAction="always">
    </item>
    
    <item
        android:id="@+id/moreVertical"
        android:icon="@drawable/baseline_more_vert_black_48"
        android:title="@string/more"
        app:showAsAction="always">
        <menu>
            <item
                android:id="@+id/logout"
                android:title="@string/title_logout"/>
        </menu>
    </item>
</menu>

EDIT

After moving my code to OnWindowFocusChanged instead it works better, but I still have a small back arrow visible while the focus change is happening. The bar itself is fully transparent and the app is still fullscreen, the only issue is that the back arrow for some reason is visible.

public override void OnWindowFocusChanged(bool hasFocus)
    {
        Log.Debug(Constants.TAG, $"SaleActivity OnWindowFocusChanged: {hasFocus}");
        base.OnWindowFocusChanged(hasFocus);

        WindowCompat.SetDecorFitsSystemWindows(Window, false);
        var windowInsetsControllerCompat = new WindowInsetsControllerCompat(Window, Window.DecorView);
        windowInsetsControllerCompat.Hide(WindowInsetsCompat.Type.SystemBars() | WindowInsetsCompat.Type.NavigationBars());
        windowInsetsControllerCompat.SystemBarsBehavior = WindowInsetsControllerCompat.BehaviorShowTransientBarsBySwipe;
    }

Solution

  • At first, I had test the menu item and think that it is clicked, the system will call some method to show the navigation bar. So you can put the following code into the activity to make the navigation bar disaappear when the focused change.

      public override void OnWindowFocusChanged(bool hasFocus)
        {
            base.OnWindowFocusChanged(hasFocus);
            Window.SetFlags(WindowManagerFlags.Fullscreen, WindowManagerFlags.Fullscreen);
    
            Window.DecorView.SystemUiVisibility = (StatusBarVisibility)
                                     (SystemUiFlags.LowProfile
                                     | SystemUiFlags.Fullscreen
                                     | SystemUiFlags.HideNavigation
                                     | SystemUiFlags.Immersive
                                     | SystemUiFlags.ImmersiveSticky);
        }