c# Xamarin Forms: NavigationPage icon not showing

Question

I have just created a portable app from the default (app.cs) template, changed none of the code (although it seems I had to update Xamarin.Forms to fix a startup exception) and ran it. I got this (No icon showing):

Just to be thorough, here is the code (once again, nothing changed from the template):

namespace App3
{
    public class App : Application
    {
        public App()
        {
            // The root page of your application
            var content = new ContentPage
            {
                Title = "App3",
                Content = new StackLayout
                {
                    VerticalOptions = LayoutOptions.Center,
                    Children = {
                        new Label {
                            HorizontalTextAlignment = TextAlignment.Center,
                            Text = "Welcome to Xamarin Forms!"
                        }
                    }
                }
            };

            MainPage = new NavigationPage(content);
        }

Droid project, main activity:

[Activity(Label = "App3", Icon = "@drawable/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
    protected override void OnCreate(Bundle bundle)
    {
        TabLayoutResource = Resource.Layout.Tabbar;
        ToolbarResource = Resource.Layout.Toolbar;

        base.OnCreate(bundle);

        global::Xamarin.Forms.Forms.Init(this, bundle);
        LoadApplication(new App());
    }
}

However, when I run the ModelessAndModel app from Petzold's book (chapter 24 Source can be found here), I get this (Icon showing!):

Nothing special in code. app.cs:

   public class App : Application
    {
        public App()
        {
            MainPage = new NavigationPage(new MainPage());
        }
...

MainPage.cs:

namespace ModelessAndModal
{
    public class MainPage : ContentPage
    {
        public MainPage()
        {
            Title = "Main Page";

            Button gotoModelessButton = new Button
            {
                Text = "Go to Modeless Page",
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.CenterAndExpand
            };
            gotoModelessButton.Clicked += async (sender, args) =>
            {
                await Navigation.PushAsync(new ModelessPage());
            };

            Button gotoModalButton = new Button
            {
                Text = "Go to Modal Page",
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.CenterAndExpand
            };
            gotoModalButton.Clicked += async (sender, args) =>
            {
                await Navigation.PushModalAsync(new ModalPage());
            };

            Content = new StackLayout
            {
                Children =
                {
                    gotoModelessButton,
                    gotoModalButton
                }
            };
        }
    }
}

droid project MainActivity.cs:

[Activity(Label = "ModelessAndModal", Icon = "@drawable/icon", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsApplicationActivity
{
    protected override void OnCreate(Bundle bundle)
    {
        base.OnCreate(bundle);

        global::Xamarin.Forms.Forms.Init(this, bundle);
        LoadApplication(new App());
    }
}

I'm sure, it is something simple, but I can't seem to find what the key diffrence is. What does it take to have my app have the icon show up in the navigation pane?

Answer 1

For a Forms app using FormsAppCompatActivity, I believe that the way to add an icon to the toolbar is to do it in the .axml file for the Toolbar in the Android app project. The default layout for the toolbar in a new template Forms app is:

<android.support.v7.widget.Toolbar 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

But you can add controls to this, e.g. to add an icon:

<android.support.v7.widget.Toolbar 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:popupTheme="@style/ThemeOverlay.AppCompat.Light" >
    <ImageView
        android:src="@drawable/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
    />
</android.support.v7.widget.Toolbar>

If there is a better way to do this, I have yet to find it.