Bottom tabs for Xamarin.Android (in the Xamarin.forms application)

Question

I am making an application using Xamarin.forms.

You all know the usual Android tabs from Xamarin.forms. TabbedPage is at the top. Because it should be there if it is an Android application that respects Android UX.

But now everything has changed. Even Google announced a new bottom tab bar called "bottom Navigation". https://github.com/roughike/BottomBar Many large applications use the bottom tab bar.

But I can not use the new bottom navigation. Because my application is based on Xamarin.forms and uses TabbedPage from forms. It will be harder if I try to use bottom navigation.

(I also make an iOS application from forms)

Thus, the best approach is to move your own tabs down.

So, I have found this. (maybe old) http://envyandroid.com/align-tabhost-at-bottom/

But I don’t know how to use it in Xamarin.Android. could you help me?

Answer 1

Having run the same problem, I tried to create a custom TabbedPageRenderer from the code present in GitHub, but no luck due to several classes and interfaces covered as internal. Found a solution that was hacked, but it seems to work fine in our case.

BottomTabbedPage, TabbedPage, Renderer Android, Renderer :

[assembly: ExportRenderer(typeof(BottomTabbedPage), typeof(BottomTabbedPageRenderer))]
namespace My.XForms.Droid.Renderers
{
    public class BottomTabbedPageRenderer : TabbedPageRenderer
    {
        protected override void OnLayout(bool changed, int l, int t, int r, int b)
        {
            InvertLayoutThroughScale();

            base.OnLayout(changed, l, t, r, b);
        }

        private void InvertLayoutThroughScale()
        {
            ViewGroup.ScaleY = -1;

            TabLayout tabLayout = null;
            ViewPager viewPager = null;

            for (int i = 0; i < ChildCount; ++i)
            {
                Android.Views.View view = (Android.Views.View)GetChildAt(i);
                if (view is TabLayout) tabLayout = (TabLayout)view;
                else if (view is ViewPager) viewPager = (ViewPager)view;
            }

            tabLayout.ScaleY = viewPager.ScaleY = -1;
            viewPager.SetPadding(0, -tabLayout.MeasuredHeight, 0, 0);
        }
    }
}

, , TabbedPageRenderer ViewPager TabLayout, , .

, , TabbedPage.

Answer 2

BottomNavigationBarXF NuGet Xamarin.
: