Forum Xamarin.Forms

MasterDetailPage menu icon is a back button

AlisonFernandesAlisonFernandes USMember ✭✭
edited April 2015 in Xamarin.Forms

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)

Best Answer

Answers

  • MichaelRumplerMichaelRumpler ATMember ✭✭✭✭✭
  • AlisonFernandesAlisonFernandes USMember ✭✭

    @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)

  • RafaelMouraRafaelMoura BRInsider, University, Developer Group Leader ✭✭✭
    edited April 2015

    @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";

  • AlisonFernandesAlisonFernandes USMember ✭✭
    edited April 2015

    @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.

  • RafaelMouraRafaelMoura BRInsider, University, Developer Group Leader ✭✭✭

    Guy, i commit this code to GitHub

    Please, downlaod and try implement same :)

    This is Only Portable Class :D

    This have erros because i remove service depencies :)

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

  • RafaelMouraRafaelMoura BRInsider, University, Developer Group Leader ✭✭✭
  • JesperJakobsenJesperJakobsen DKMember

    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);

  • AlisonFernandesAlisonFernandes USMember ✭✭

    @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

  • AlisonFernandesAlisonFernandes USMember ✭✭

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

  • ElielDinaullyElielDinaully USMember

    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! :smile:

  • AlisonFernandesAlisonFernandes USMember ✭✭
    edited May 2015

    @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.8290allen.8290 USMember

    @FredrikNilsson tks,Really solve my problem

  • 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.

  • ElielDinaullyElielDinaully USMember

    @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.

  • AlisonFernandesAlisonFernandes USMember ✭✭
    edited May 2015

    @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?

  • ElielDinaullyElielDinaully USMember

    @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...

  • rnitschrnitsch USMember

    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

Sign In or Register to comment.