Custom toolbar, menu icons not showing Xamarin Android

Question

I am trying to replace the action bar in a Xamarin android project with a custom toolbar. I want my toolbar to display a logo on the left, and then my menu icons on the right.

I followed this tutorial from Microsoft closely Replacing the Action Bar

But my menu icons no longer display (when I was using ActionBar, my menu icons displayed just fine). There is however a 3 dot overflow icon, but when clicking it nothing happens. Here is a screenshot of the built app with my custom toolbar:

I have tried:

• I thought my image view was blocking the menu icons, so I removed it but my menu icons do not show.
• Changing what MainActivty extends, I have tried Activity, and AppCompactActivity
• I thought my OnCreateOptionsMenu may not be getting called, So I tried: toolbar.InflateMenu(Resource.Menu.actionbar);

I am stuck and not sure what is wrong here, I would appreciate any help!

Here is my Code:

Toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<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:minHeight="?android:attr/actionBarSize"
    android:background="#4F703A"
    android:theme="@android:style/ThemeOverlay.Material.Dark.ActionBar">
    <RelativeLayout 
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="match_parent">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minHeight="?android:attr/actionBarSize"
        android:src="@drawable/logo_app"/>
  </RelativeLayout>
</Toolbar>

MainActivity.cs (omitted some irrelevant code)

public class MainActivity : Activity
{
    [System.Obsolete]
    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        Xamarin.Essentials.Platform.Init(this, savedInstanceState);
        // Set our view from the "main" layout resource
        SetContentView(Resource.Layout.activity_main);
        //Activate customer toolbar
        var toolbar = FindViewById<Toolbar>(Resource.Id.toolbar);
        SetActionBar(toolbar);
        ActionBar.Title = "";
    }

My menu items (actionbar.xml)

    <?xml version="1.0" encoding="utf-8" ?>
<!--For all properties see: https://aka.ms/android-menu-resource-->
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
  <item android:id="@+id/action_search"
        app:showAsAction="always"
        android:text="Search"
        android:icon="@android:drawable/ic_menu_search"/>
  <item android:id="@+id/action_addnew"
        app:showAsAction="always"
        android:text="Search"
        android:icon="@android:drawable/ic_menu_add"/>     
</menu>

style.xml

<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <style name="MyTheme" parent="@android:style/Theme.Material.Light.DarkActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowActionBar">false</item>
    <item name="android:colorPrimary">#5A8622</item>
  </style>
</resources>

activity_main.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:id="@+id/frameLayoutParent"
        android:background="#4F703A">
        <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar"/>
    <android.support.v4.widget.SwipeRefreshLayout 
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:fillViewport="true"
        android:id="@+id/swipeLayout"
        android:paddingTop="?android:attr/actionBarSize">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:id="@+id/headerLinearLayout">
            <TextView
                android:text="Thumbnail"
                android:id="@+id/headerThumb"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight=".01"
                android:gravity="center_horizontal"
                android:textSize="16sp"/>
            <TextView
                android:text="Address Line"
                android:id="@+id/headerAddressLine"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight=".01"
                android:gravity="center_horizontal"
                android:textSize="16sp"/>
            <TextView
                android:text="City"
                android:id="@+id/headerCity"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight=".01"
                android:gravity="center_horizontal"
                android:textSize="16sp"/>
            <TextView
                android:text="State"
                android:id="@+id/headerState"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight=".01"
                android:gravity="center_horizontal"
                android:textSize="16sp"/>
            <TextView
                android:text="Zip Code"
                android:id="@+id/headerZipCode"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight=".01"
                android:gravity="center_horizontal"
                android:textSize="16sp"/>
        </LinearLayout>
        <ListView
                android:paddingTop="5dp"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/myListView"/>
        </LinearLayout>

    </android.support.v4.widget.SwipeRefreshLayout>
    <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/editSearch"
            android:hint="Search"
            android:textColor="#000"
            android:editable="true"
            android:paddingTop="?android:attr/actionBarSize"/>

</FrameLayout>

Answer 1

My Issue was in my menu xml file, xmlns:app for the showAsAction attributes

app:showAsAction="always"

is needed for the v7 support toolbar, but is not used for the new lollipop toolbar. So it should look like this:

android:showAsAction="ifRoom"

After I fixed this, I couldn't click my menu items. I figured out my layout was displaying over top, so I needed to add

 android:layout_marginTop="?android:attr/actionBarSize"

To the layout below my custom toolbar!

Answer 2

A TitleView Sounds like the best option for what you're trying to do. Instead of those long processes you could just do this

<NavigationPage.TitleView>
    <StackLayout Orientation="Horizontal">
       <Image Source="Logo.png"/>
       <label Text="Company Name"/>
    </StackLayout>
</NavigationPage.TitleView>