Master-Detail Page and Android back button on Xamarin.Forms

yu_ka1984
yu_ka1984
Aug 9, 2017 · 2 min read

In order to implement “Side Navigation Menu” with Xamarin.Forms, we use Master — Detail Page.

However, many sample programs have not been considered for the Android back button.

For example, in Google Map or Gmail, move back to another screen in the side menu and press back button to return to the first screen.

The usability of applications that are not like this is bad.

For example, when supposing a case like “Open the setting screen and change the setting and return to the original screen”

In the case of an application not considering the back button, you have to operation in this way.

Home screen -> Open menu -> Go to setting screen -> setting operation -> opening menu -> return home `

But, many people do the following operation and unintentionally terminate the application.

Home screen -> Open menu -> Go to setting screen -> setting operation -> back button

Here are techniques to solve this problem.


Applyed technique on Visual Studio 2017 Xamarin.Forms Template

Configure Master-Detail Page like this.

MasterDetailPage
Master -- ContentPage
Detai -- NavigationPage(outer)
       ----NavigationPage(inner)
           ----ContentPage(Home)

The important point is to do

NavigationPage.SetHasNavigationBar 

on the Content Page to be added to Child of “Inner Navigation Page”.

If you selected About Page from Menu, PushAsync AboutPage on Inner Navigation Page.

NavigationPage(outer)
-------NavigationPage(inner)
-------------ContentPage(Home)
-------------ContentPage(About)

This will switch Detail while the humberger button remains. If AboutPage is displayed and tap HomeButton in SideMenu, perform PopToRoot.

If another menu is selected while AboutPage is open, PushAsync new ContentPage to inner NavigationPage, then AboutPage to RemovePage.

When moving to NewItemPage, it will be as follows.

NavigationPage(outer)
-------NavigationPage(inner)
-------------ContentPage(Home)
-------ContentPage(Newitem)

By pushAsync to NavigationPage (outer), the hamburger menu of NavigationBar changes to arrow icon and it feels like navigating.

With a little twist you can realize a good UX even with Xamarin.Forms😊.

yu_ka1984

Written by

yu_ka1984

Microsoft MVP Azure Technologies / https://github.com/yuka1984 / Xamarin / .NET / ASP.NET Core / Web Front End / Azure

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade