How to create a bottom toolbar for Android using Xamarin forms

Question

I've been working on two Xamarin forms projects and both require a bottom toolbar across iOS and Android. I've been struggling to put together the bottom toolbar for Android using Xamarin forms. I tried to write a custom TabbedRenderer for Android but can't seem to find the right method to override to push the tabs to the bottom. I also tried to use a StackLayout at the bottom of every page for the tabs but the result doesn't look very good - when switching tab, the tabs flash as they are loaded as part of the page.

Is there any better solution for writing a bottom toolbar with Xamarin forms or is there a "native" bottom toolbar coming with Xamarin forms in the near future as Google is now officially embracing bottom navigation with an update to the Material Design spec.?

Thanks!

using System;
using Xamarin.Forms.Platform.Android;
using Android.App;
using Xamarin.Forms;

[assembly: ExportRenderer(typeof(TabbedPage), typeof(ylbCross.Droid.CustomTabRenderer))]

namespace MyApp.Droid
{
    public class CustomTabRenderer : TabbedRenderer
    {
        private Activity _activity;

        protected override void OnElementChanged (ElementChangedEventArgs<TabbedPage> e)
        {

            base.OnElementChanged (e);

            _activity = this.Context as Activity;


        }

        public override void OnWindowFocusChanged(bool hasWindowFocus)
        {   
            ActionBar actionBar = _activity.ActionBar;

            if (actionBar.TabCount > 0)
            {
                ActionBar.Tab tabOne = actionBar.GetTabAt(0);
                tabOne.SetIcon (Resource.Drawable.home_Blue48);

                tabOne.TabSelected += (sender, e) => {
                    tabOne.SetIcon (Resource.Drawable.home_Blue);
                };
                tabOne.TabUnselected += (sender, e) => {
                    tabOne.SetIcon (Resource.Drawable.home_Grey);
                };

                ActionBar.Tab tabTwo = actionBar.GetTabAt(1);
                tabTwo.SetIcon (Resource.Drawable.QA_Grey);
                tabTwo.TabSelected += (sender, e) => {
                    tabTwo.SetIcon (Resource.Drawable.QA_Blue);
                };
                tabTwo.TabUnselected += (sender, e) => {
                    tabTwo.SetIcon (Resource.Drawable.QA_Grey);
                };

                ActionBar.Tab tabThree = actionBar.GetTabAt(2);
                tabThree.SetIcon(Resource.Drawable.consulting_Grey);
                tabThree.TabSelected += (sender, e) => {
                    tabThree.SetIcon (Resource.Drawable.consulting_Blue);
                };
                tabThree.TabUnselected +=   (sender, e) => {
                    tabThree.SetIcon (Resource.Drawable.consulting_Grey);
                }

                ActionBar.Tab tabFour = actionBar.GetTabAt(3);
                tabFour.SetIcon(Resource.Drawable.aboutMe_Grey);
                tabFour.TabSelected += (sender, e) => {
                    tabFour.SetIcon (Resource.Drawable.aboutMe_Blue);
                };
                tabFour.TabUnselected +=    (sender, e) => {
                    tabFour.SetIcon (Resource.Drawable.aboutMe_Grey);
                }

            }

            base.OnWindowFocusChanged(hasWindowFocus);
        }
    }
}

KFactory KFactory · Accepted Answer · 2017-06-25T16:09:15

I think this question is duplicated. You can find the solution here:

Duplicated question answer (XF Bottom navigation bar)

In summary, you should use a third party control or if you are a good designer, you can easily create your own bottom bar.

The proposed component in this answer, use Material Design for Android platform. Don't forget to mark as answered if this answer is correct for you.

How to create a bottom toolbar for Android using Xamarin forms

1 Answers