How to customize arrow icon, page icon and page title in MasterDetailPage - Xamarin.Forms

Question

I have created a new Blank App (Xamarin.Forms Portable) project in Visual Studio 2015 and modified App.cs to get "hamburger menu":

public class App : Application
{
    public App()
    {
        var masterPage = new ContentPage()
        {
            Content = new Label { Text = "Hello from Master!"},
            Title = "Master Page"
        };

        var detailPage = new ContentPage()
        {
            Content = new Label { Text = "Hello from Detail!" },
            Title = "Detail Page"
        };

        var mainPage = new MasterDetailPage()
        {
            Master = masterPage,
            Detail = detailPage,
            Title = "Main Page"
        };

        // The root page of your application
        MainPage = mainPage;
    }
    . . .
}

Everything works fine, but how can I customize these four things:

1) Hide / change Arrow

2) Hide / change Icon

3) Hide / change Title text

4) Hide whole toolbar

Solution

1. You can change arrow to hamburger icon if you use your DetailPage within NavigationPage:

   Detail = new NavigationPage(detailPage);
   

2. To change icon, just change project files:

   • YourProject/Resources/drawable/icon.png
   • YourProject/Resources/drawable-hdpi/icon.png
   • YourProject/Resources/drawable-xhdpi/icon.png
   • YourProject/Resources/drawable-xxhdpi/icon.png

   or on your MasterDetailPage set Icon property to another resource.

   If you want to hide icon - it only applies to Android. It can be solved with custom renderer (http://developer.xamarin.com/guides/cross-platform/xamarin-forms/custom-renderer/):

   public class CustomNavigationRenderer : NavigationRenderer
   {
       protected override void OnElementChanged(ElementChangedEventArgs<NavigationPage> e)
       {
           base.OnElementChanged (e);
   
           var actionBar = ((Activity)Context).ActionBar;
           actionBar.SetIcon (Resource.Color.transparent);
       }
   }
   

   EDIT: It can also be done in MainActivity.cs:

   ActionBar.SetIcon (new ColorDrawable(Resources.GetColor (Android.Resource.Color.Transparent)));
   

3. Just use Title property on Page.

4. SetHasNavigationBar(page, false);

Comments

[Ashish-BeJovial]

But i haven't found Resources folder in portable project, but it is available in xamarinMyProject.Droid

[Joseph Katzman]

I used your code and got null value for actionBar. What I did wrong?

[VahidShir]

@JosephKatzman If your MainActivity extends from FormsAppCompatActivity then you need to use SupportActionBar instead of ActionBar.