How to create a bottom toolbar using Xamarin.Forms for Android

Jl.1516Jl.1516 USMember
edited April 2016 in Xamarin.Forms

Hi,

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!
Jeffrey

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

Best Answers

Answers

  • Jl.1516Jl.1516 USMember

    Thanks SIUS! Yes, it's actually a tabbed page. I'll try the boxview and report back.

  • ThomasBurkhartThomasBurkhart DEMember ✭✭✭✭

    I also would create the toolbar "manually"

  • NMackayNMackay GBInsider, University mod
    edited April 2016

    @Jl.1516

    Forms respects the native platform styling guidelines. As an Android user I'd never expect tabs at the bottom of the screen so your really bending the framework doing stuff like this IMO.

    If you want the app to look exactly the same across devices then perhaps Hybrid is a better solution for you but from experience, our users far prefer the native Xamarin apps to the Hybrid ones. I'd never choose Hybrid again.

  • Jl.1516Jl.1516 USMember
    edited April 2016

    Thanks NMackay and ThomasBurkhart! The business owner insists that the Android app have the same bottom toolbar and I actually manually made a bottom toolbar with a stacklayout, the issue is, when switching tab, the tabs "flash" as the tabs are part the of the page get loaded and the business owner didn't like it. I could use Xamarin Android separately but I don't have enough time now.

    So I tried to make a custom TabbedRenderer and I can put images on the tabs, is there any properties or methods exposed in TabbedRenderer that I could get hold of and try to push the tabs to the bottom? :-)

    Thanks so much!

  • Jl.1516Jl.1516 USMember

    Thanks NMackay! This is really helpful! I started to write Xamarin Android at the same time and I totally agreed with you that the native approach is much better.
    Thanks again!

  • MichaelLattaMichaelLatta USUniversity
    edited April 2016

    @NMackay said:
    @Jl.1516

    Forms respects the native platform styling guidelines. As an Android user I'd never expect tabs at the bottom of the screen so your really bending the framework doing stuff like this IMO.

    If you want the app to look exactly the same across devices then perhaps Hybrid is a better solution for you but from experience, our users far prefer the native Xamarin apps to the Hybrid ones. I'd never choose Hybrid again.

    Well Android has a native bottom navigation bar. https://google.com/design/spec/components/bottom-navigation.html#bottom-navigation-usage

    Plenty of Android apps use it, including Google photos, so It wouldn't be going against platform guidelines.

  • RichardGRichardG USMember
    edited June 2016

    Thanks for the share

Sign In or Register to comment.