Xamarin Forms with native Android Toolbar

Question

We currently have an app designed in Xamarin NativeUI (shared code and Xamarin.Android, Xamarin.UWP etc) are in the process deciding whether Xamain.Forms is mature enough to transition to.

One of my core concerns is that we have a very customized actionbar/toolbar that makes use of Android inbuilt handling of automatically moving items to overflow based on screen size, having overflow menus and submenus, custom controls in place of icons+text.

I have managed to get custom controls and hardcoded overflow items. But I'm not sure if the rest is possible without going native. And if we do need to go native I'm not sure how you would then use Xamarin.Forms and then have a Xamarin.Android ActionBar.

Another fun thinig to add to the equation is that we have to support Android 4.3 so that means using the support library actionbar.

Apologies, the question is a bit rambling but can be broken into 2 specifics:

1) With Xamarin.Forms can items move to or from overflow in toolbar automatically based on screen size available in similar fashion to Android native toolbar?

2) If using Xamarin.Forms can you use a toolbar defined in Xamarin.Android? How?

Answer 1

This should be possible in Xamarin Forms using a custom renderer.

You are one step ahead in that you understand what you want to do and how to do it in Xamarin Native.

Here is an overview on custom renderers.

Here is a link to a very basic navigation page custom renderer for Android. You should be able to expand it to include the native Android code you require.

Be aware that you probably need to override NavigationPageRenderer if you are using app compat to support earlier versions of Android.

Answer 2

In addition to @Steve Chadbourne's answer, it's really important to know what page control are you using in PCL of your XF project, if you open the MainActivity.cs file in client android project, you can find by default it codes like this:

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());
    }
}

As you can see, there is defined Toolbar which you can find in the Resources/layout folder in client Android project:

<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" />

This Toolbar is used by default within some page type control in XF, for example NavigationPage.

For native control of XF, I think it's possible that you didn't notice that Xamarin.Forms.ToolbarItem. It is also rendered like Toolbar and you can set the Order property to ToolbarItem to specify the item to be displayed on primary, secondary or default toolbar surfaces.

For custom renderers, it's possible that you can refer to this blog: Xamarin Forms - ContentPage with SearchBar in the Navigation bar.

Don't know which is the best choice for you, but I want to explain to your two questions. XF is like a UI toolkit, all controls it has are created based on the native SDK, means all controls are renderered as a matching native control so it can be used in native platform. So if a XF control is rendered as Toolbar in Android platform, the behavior should be the same as normal Toolbar in native Android, BUT like we customize the renderers, when the XF control is created, many properties are hard coded in its code, which may have effect the result here. If you meet such problem, I suggest to read the open source on Github.

For your last question:

If using Xamarin.Forms can you use a toolbar defined in Xamarin.Android? How?

You can either using custom renderers or directly modify the code in Toolbar.axml in native client Android project.