Xamarin Forms - How do I add extra controls to the top bar in a MasterDetailPage?

Question

Please see the attached image:

Highlighted top bar in Android add

How do I add items such as the ones highlighted in the picture, on the top bar (near the hamburger menu / title), when using a MasterDetailPage with Xamarin Forms?

More precisely, I need to add these type of controls to the highlighted area in the second image:

Highlighted Xamaring Forms top bar

Answer 1

Use Toolbar.

In the tool bar you can add ToolbarItem.

From code :

var contentPage = new ContentPage ();
page.ToolbarItems.Add (new ToolbarItem (....));

from XAML :

<ContentPage.ToolbarItems>
  <ToolbarItem .... />
</ContentPage.ToolbarItems>

You can have a look at this answer too.

You should be able to set the Order of the ToolBarItem to Secondary to force the option into an overflow menu on Android:

<ContentPage.ToolbarItems>
        <ToolbarItem Text="{Binding EditButtonText, Mode=TwoWay}" Clicked="EditClicked" Order="Secondary" />
</ContentPage.ToolbarItems>

The following forum threads should help you :

1. Icon image on Toolbar item in xamarin Forms
2. Adding toolbar items, buttons and menus

Use the properties to get the toolbar to your liking :

• Order - Gets or sets a value that indicates on which of on the primary, secondary, or default toolbar surfaces to display this ToolbarItem element.
• Priority - Gets or sets the priority of this ToolbarItem element.
• Icon - Gets or sets a string that identifies the image that is displayed on this ToolbarItem element.

Answer 2

As @Rohit mentioned You can do something like this:

private void ShowToolbarItems()
{
ToolbarItem toolbarItem;
if (Device.OS == TargetPlatform.iOS)
{
    // move layout under the status bar
    this.Padding = new Thickness(0, 20, 0, 0);

    toolbarItem = new ToolbarItem("Sync", "sync_icon.png", () =>
    {
        SyncService();
    }, 0, 0);
    ToolbarItems.Add(toolbarItem);
}

if (Device.OS == TargetPlatform.Android)
{

    toolbarItem = new ToolbarItem("Sync", "sync_icon.png", () =>
    {
        SyncService();
    }, 0, 0);
    ToolbarItems.Add(toolbarItem);

}

Where "sync_icon.png" is a Resource on your iOS/Android/WP projects. Hope this helps.

Here is also a great blog post for Material design in Android:

https://blog.xamarin.com/android-tips-hello-toolbar-goodbye-action-bar/