Xamarin NavigationView menu item customization

Question

Hi I use C# and Xamarin to develop my new application and ran into many problems using this platform. Is it possible to customize menu items inside NavigationView using xamarin? all I found are the valid properties for the menu items. But what if instead of this:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
      android:id="@+id/itemOne"
      android:title="Go to page one" />
    <item
      android:id="@+id/itemTwo"
      android:title="Go to page two" />
</menu>

I want to do this:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <TextView></TextView>
    <Button></Button>
    <SomeOtherControlHere></SomeOtherControlHere>
</menu>

Is it possible using xamarin? What are my other options?

Aside from that I found that Xamarin API's are very restrictive, for example you cant use custom ttf fonts directly inside xml to set the fonts for menu items:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
        <item
          android:id="@+id/itemOne"
          android:title="Go to page one" 
          android:fontFamily="MyCustomFontName Or MyPathToFonts" /> <-- NOT VALID
</menu>

Also if I apply style for an entire menu items container it is also not possible to use custom fonts, the only fonts we can use is the built in fonts...

Even if I get reference inside my Activity to an individual menu item (IMenuItem), there is no property or function to set font family.

How do you use NavigationView? Can you show this part of your axml? — Stefan Wanitzek, May 18 '16 at 14:48

Stefan Wanitzek · Accepted Answer · 2016-05-18T14:59:26.273

It's possible to define a more complex NavigationView. Just put the child controls inside the NavigationView-Tag. For example, this is how I use the NavigationView to implement a footer. There are no restrictions to the child controls so you can you Buttons etc. as well:

<android.support.design.widget.NavigationView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:id="@+id/navigation_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    local:headerLayout="@layout/drawer_header"
    local:theme="@style/NavigationDrawerStyle"
    local:menu="@menu/drawer_menu">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="bottom"
        android:orientation="vertical">
        <TextView
            android:id="@+id/empty_spacer"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:clickable="false"
            android:text="" />
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="65dp"
            android:background="@drawable/footer_small"
            android:orientation="vertical"
            android:weightSum="1" />
    </LinearLayout>
</android.support.design.widget.NavigationView>

To change the TextSize of the items for example, you have to define an own style:

<style name="NavigationDrawerStyle">
   <item name="android:textSize">24sp</item>
   <!-- more properties -->
</style>

Then assign it to your NavigationView:

<android.support.design.widget.NavigationView app:theme="@style/NavigationDrawerStyle">
   <!-- ... -->
</android.support.design.widget.NavigationView>

score 0 · Answer 2 · answered Jan 09 '18 at 09:43

This is how I format the Navigation Menu Item which starts by icon, then menu text and the last one is number. It look like the one in gmail app.

OnCreate

navigationView = FindViewById<NavigationView>(Resource.Id.wnl_nav_view);

            //Add customize menu item style
            IMenu menuNav = navigationView.Menu;
            View view = View.Inflate(this, Resource.Layout._drawerMenuItemTemplate, null);
            IMenuItem logoutItem = menuNav.FindItem(Resource.Id.nav_mail);
            MenuItemCompat.SetActionView(logoutItem, view);
            TextView txtNewNumber = view.FindViewById<TextView>(Resource.Id.txtNewNumber);

_drawerMenuItemTemplate.axml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/primary_text"
        android:text="3/30"
        android:id="@+id/txtNewNumber"
        android:layout_gravity="right"
        android:fontFamily="@string/abc_font_family_display_2_material"
        android:textSize="13sp"
        android:textStyle="bold"
        android:paddingRight="6dp"
        android:layout_marginTop="14dp" />
</FrameLayout>

Xamarin NavigationView menu item customization

2 Answers2