MasterDetailPage menu icon is a back button

AlisonFernandes

Hi,

I have a NavigationPage used as the Detail of a MasterDetailPage. In Android at least, the menu icon is the back button, so, how can one change this?

From everything I've tested, I could only change the icon that appears next to the back button (which, again, doesn't navigate back, opens the menu)

FredrikNilsson

Update your MasterPage.xaml to the following and it should work:

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MDPBug.MasterPage">
  <MasterDetailPage.Master>
    <ContentPage Title="Menu" Icon="slideout.png">
        <StackLayout>
            <Button Text="MenuItem1"/>
            <Button Text="MenuItem1"/>
        </StackLayout>
    </ContentPage>
  </MasterDetailPage.Master>
</MasterDetailPage>

As you can see I moved the Icon property from MasterDetailPage to ContentPage instead...

Hope this is what you are looking for!

/Fredrik

MichaelRumpler

That (and some other things) are explained in http://motzcod.es/post/115523285992/material-design-theming-for-xamarin-forms-android

AlisonFernandes

@MichaelRumpler unless I'm missing something, it doesn't. Unlike the Hanselman App, my navigation bar isn't even showing that old hamburguer icon, due to it not being correctly set as the MasterDetailPage.Icon.

This is more of a "what I'm doing wrong" question. Before posting this I've followed the Hanselman app code and it didn't work in my case. (slideout.png as a AndroidResource in the Android project Resources folder + setting the MDP.Icon with the filename + extension)

RafaelMoura

@AlisonFernandes u can try this:

In APP:

public App()
{
// The root page of your application
MainPage = GetMainPage();
}

static RootPage MDPage;

    public static Page GetMainPage()
    {
        MDPage = new RootPage();
        return MDPage;
    }

RootPage: https://gist.github.com/1d76658a0087f966730d

MenuPage: https://gist.github.com/32c280718a8c7895e872

MenuListView: https://gist.github.com/d003f7b6c4700ef85b21

MenuListData: https://gist.github.com/6de44e94fca6a6910daf

MenuItem: https://gist.github.com/2d709116c4497efda13e

Menu page have prop Icon, set it like

Icon = "drawable/home.png";

AlisonFernandes

@RafaelMoura thanks for the code! I'm assuming you have put the image in Android "drawable" folder and set that path, if so, it isn't supposed to be necessary since that would only work for Android.

That being said, tested it just in case and didn't work, I still have a navigate "back" icon.

RafaelMoura

Guy, i commit this code to GitHub

Please, downlaod and try implement same

This is Only Portable Class

This have erros because i remove service depencies

https://github.com/rafaelrmou/IconMasterDetail/tree/master/BHS

RafaelMoura

@AlisonFernandes see

JesperJakobsen

To remove the back icon you just need to add the following to your navigationpage

NavigationPage.SetHasBackButton(this, false);

I'm guessing you already had success removing the app icon from the ActionBar, otherwise just use the following code in the OnCreate method of your MainActivity

ActionBar.SetIcon(Android.Graphics.Color.Transparent);

AlisonFernandes

@JesperJakobsen thank you for your help! Unfortunately that was the first thing I tested and it didn't had any effect on the button icon. Notice I'm referring to the back button icon and not the NavigationPage icon (which by default is the Xamarin logo), which you're able to change directly in Forms.

I've created a self contained demo app to demonstrate two problems related to those static NavigationPage set methods.

https://github.com/vvolkgang/XamFormsMDPBug

FredrikNilsson

Update your MasterPage.xaml to the following and it should work:

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MDPBug.MasterPage">
  <MasterDetailPage.Master>
    <ContentPage Title="Menu" Icon="slideout.png">
        <StackLayout>
            <Button Text="MenuItem1"/>
            <Button Text="MenuItem1"/>
        </StackLayout>
    </ContentPage>
  </MasterDetailPage.Master>
</MasterDetailPage>

As you can see I moved the Icon property from MasterDetailPage to ContentPage instead...

Hope this is what you are looking for!

/Fredrik

AlisonFernandes

@FredrikNilsson huge thanks, setting the MasterDetailPage.Master page Icon did the trick!

ElielDinaully

Hi @AlisonFernandes ,

if you try your code in landscape, you will have a back arrow as described there : https://forums.xamarin.com/discussion/comment/113529/#Comment_113529

Anyone know how to hide/remove that back arrow icon when the user launch the app?

Thanks by advance!

AlisonFernandes

@ElielDinaully tested it just now and shows as expected (check attach). I'm betting your app has the back button regardless of the phone orientation because, the link you pasted was doing the same thing I was in the first place (setting the icon in the MDP). As @FredrikNilsson correctly answered, your icon must be set in the menu ContentPage, which is set as your MasterDetailPage.Master.

If you wish to hide that icon altogether from Forms, you can set the icon as a transparent image (this can also be done for the app icon that shows after the menu button) or implement platform specific code to achieve that.

allen.8290

@FredrikNilsson tks,Really solve my problem

petercresswell.9880

Running into this myself. @AlisonFernandes , pulled your code as is and run on Android Samsung Galaxy Tab S (android 4.4.2). Can confirm that @ElielDinaully comment is accurate.

The slide out icon appears (cut off actually) in portrait but in landscape, the back icon appears and replaces the slideout icon.

@ElielDinaully any luck on finding an answer when in landscape.

ElielDinaully

@AlisonFernandes , your code works well on a phone.

I'm using a galaxy S5 for my test, and I don't have any problem but when i deploy it on the Galaxy Tab Pro, the back icon appears.

@petercresswell : i haven't found a solution for that. I tried playing with :

ActionBar.SetHomeAsUpIndicator(Android.Resource.Color.Transparent) in the MainActivity. First time the app is launched on the galaxy tab pro, no back icon at all in landscape mode. If you switch to portrait, the burger menu appears as expected, get back to landscape, and the back icon appears... again.

I have disabled the split functionality on Android for the moment. I don't know why the Xamarin team didn't find a solution to that for the moment.

AlisonFernandes

@ElielDinaully great find! I was expecting that, being a tablet related problem. I call it a framework bug, will report it ASAP

EDIT

Wait, is it a known bug?

ElielDinaully

@AlisonFernandes I haven't found that bug on the Xamarin bugzilla so I guess it's not a known bug. But they should have been aware of that as the masterdetailpage always split by default on a tablet, and it's the first thing a user will see on the top left corner...

rnitsch

I have the same problem and I have created a bug report for this issue (including a project to reproduce this issue):
"MasterDetailPage showing back button instead of Icon in landscape mode (Tablet only)"
https://bugzilla.xamarin.com/show_bug.cgi?id=39831