Forum Xamarin.Forms

How to change "Back button" to "Menu" on MasterDetailPage? [Android]

rugairugai BRMember ✭✭

Hi there! I'm facing the following issue:

I have a drawer menu (implemented with MasterDetailPage) with 3 items. When you first run the app you see an hamburger menu icon on top left.
When you click in one of these items, the page loads with an back arrow.
I'm trying to accomplish that these three pages must still have the hamburger menu item on its Action Bar. And the navigation after those, loads with the back button.

I ended up thinking that the Icon property for MasterPage won't work for Android.

I made it work on iOS but nothing I do seems to work on Android.

My code:

MainPage.cs
public class MainPage : MasterDetailPage { protected override void OnAppearing() { base.OnAppearing(); this.GetMenuPage().ListView.ItemSelected += OnItemSelected; } private void OnItemSelected(object sender, SelectedItemChangedEventArgs e) { var item = e.SelectedItem as Menu; if (item == null) return; // this.GetNavigationPage().PushAsync((Page)Activator.CreateInstance(item.Pagina)); ((NavigationPage)this.Detail).PushAsync((Page)Activator.CreateInstance(item.Pagina)); this.GetMenuPage().ListView.SelectedItem = null; IsPresented = false; } }

MenuPage.xaml

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="BNB.CapturaGeodesica.MenuPage" Padding="0,40,0,0" BackgroundColor ="#A5183C" Title="Menu " Icon="ic_hamburguer_menu"> <!-- ## This works on iOS. But on Android, it won't show up. ##-->

DetailPage1.cs
public DetailPage1() { NavigationPage.SetHasBackButton(this, false); // Here I get rid of the back button. But I can't manage to show the menu icon on Android. InitializeComponent(); }

I'm attaching the result on iOS and Android. Just to clarify, to reach "Second page" on iOS or Android, assume that I opened the drawer menu and selected "Second page".

OBS: I need to have the page history.

Thank you for any help!

  • this is my first post, if I messed it up, sorry -

Answers

  • @rugai hi, sorry before if i don't answer your questions. because i have the same issue.
    by the way, can you tell me how you can change status bar color?
    in your screenshot the status bar color and navigation bar color are the same. thanks :)

  • rugairugai BRMember ✭✭
    edited December 2016

    @nmuhammadsetia said:
    @rugai hi, sorry before if i don't answer your questions. because i have the same issue.
    by the way, can you tell me how you can change status bar color?
    in your screenshot the status bar color and navigation bar color are the same. thanks :)

    Hi there!
    You must set MainPage.Detail.BarBackgroundColor = Color.FromHex("youHexHere");.

    Like this:

    MainPage = new MainPage { Master = new MenuPage(), Detail = new NavigationPage(new HomePage()) { BarBackgroundColor = Color.FromHex("#A5183C"), BarTextColor = Color.White } };

    EDIT: I think I misunderstanded you. To tint the status bar, you need to set
    <item name="colorPrimary">#2196F3</item> inside <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar"> on Resource/values/styles.xml on you Droid project.

  • rugairugai BRMember ✭✭

    @rugai said:
    EDIT: I think I misunderstanded you. To tint the status bar, you need to set

    misanderstood****

  • Luis_dmLuis_dm USMember ✭✭✭

    try it:

    <MasterDetailPage.Master>
        <ContentPage  Title="Menu" Icon="hamburger.png">      
    </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
    ...
    ...
    </MasterDetailPage.Detail>
    
    </MasterDetailPage>
    
  • rugairugai BRMember ✭✭
    edited January 2017

    @LuisRodriguez92 said:

    try it:



    <MasterDetailPage.Master>

    </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
    ...
    ...
    </MasterDetailPage.Detail>

    Hi there!

    Actually, in my MenuPage.xaml I already got this:

    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="BNB.CapturaGeodesica.MenuPage" Padding="0,40,0,0" BackgroundColor ="#A5183C" Title="Menu" Icon="ic_hamburguer_menu">

    But I gave it a try in my App.xaml.cs, and I got something like this:

    MainPage = new MainPage { Master = new MenuPage { Title="Menu", Icon="ic_hamburguer_menu" }, Detail = new NavigationPage(new HomePage()) { BarBackgroundColor = Color.FromHex("#A5183C"), BarTextColor = Color.White } };

    Not successful :neutral:

  • Luis_dmLuis_dm USMember ✭✭✭

    Does exist the file "ic hamburguer menu" in the Android project?

    ic hamburguer menu without extension (.png, .jpg) ?

  • rugairugai BRMember ✭✭
    Actually I don't use extensions on source, but yeah, I've already tried with the extension and I'm sure that the file exists
  • Ashish_sharmaAshish_sharma INMember ✭✭✭

    @Luis_dm said:

    try it:



    <MasterDetailPage.Master>

    </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
    ...
    ...
    </MasterDetailPage.Detail>

    it's not working

  • Ashish_sharmaAshish_sharma INMember ✭✭✭

    i want to change master detail icon and as well as i want to reduce master detail width, i search more but no successful solution get. have any one solution please provide me solution.

    thank's in advance.

Sign In or Register to comment.