Correct native Android navigation

[GuyMicciche]

How can I make the "hamburger" button on Android be on top of the navigationbar and the title moved over, like on native Android apps.

Currently this is what it looks like:

Here is the XAML:

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <utu:NavigationBar Content="Main Page"
                           Style="{StaticResource MaterialNavigationBarStyle}" />
        <muxc:NavigationView Grid.Row="1"
                             x:Name="NavView">
            <muxc:NavigationView.MenuItems>
                <muxc:NavigationViewItem Content="One" />
                <muxc:NavigationViewItem Content="Two" />
                <muxc:NavigationViewItem Content="Three" />
            </muxc:NavigationView.MenuItems>
        </muxc:NavigationView>
    </Grid>

[kazo0]

Hi @GuyMicciche, great question!

You can use the MainCommand of the NavigationBar to serve as the burger menu button for your app and manually toggle the IsPaneOpen property of your NavigationView when the MainCommand is clicked.

You can find more info on the MainCommand property of NavigationBar in this section of the NavigationBar docs

First thing you will want to do is to set the MainCommandMode of the NavigationBar to Action. This is explained in the docs here

After that, you can define your own custom AppBarButtton with a custom BitmapIcon as the Icon and add a handler for the Click event to do something like NavView.IsPaneOpen = !NavView.IsPaneOpen;.

I have created a small sample app that achieves this that you can find here: https://github.com/kazo0/NavApp

You'll also want to disable the default burger toggle button from the NavView by setting IsPaneToggleButtonVisible="False"

You can see what it looks like on iOS/Android here:

|

[GuyMicciche]

Thanks so much for this example! I will compare it to my current setup and make the necessary changes!

[GuyMicciche]

@kazo0 What software you use to make the GIFs?

[kazo0]

This is actually using the build in recording features from the Android emulator and iOS simulator

Otherwise sometimes I use ScreenToGif https://www.screentogif.com/

[kazo0]

Also, I got something cooking on creating a responsive navigation shell that would use a bunch of different navigation related components from Uno / Uno Toolkit that looks like it could be interesting to what you are building so I will ping you back here once I have some working samples and documentation for it

[GuyMicciche]

@kazo0 I believe that would be great for the community! I can make myself available for testing or to contribute to these samples if you want additional help. =)