Search code examples
xamarinxamarin.formsxamarin.androidfreshmvvm

Scrollable tab bar with FreshTabbedNavigationContainer


With FreshMVVM's FreshTabbedNavigationContainer all tabs want to be visible simultaneously and truncated:

enter image description here

I want them to be full width and scrollable like with regular TabbedPage:

enter image description here

I don't actually have so many tabs. This is just an example to show what I mean.


Solution

  • You need to use CustomRednerer.
    For example:
    In Droid project:

    [assembly: ExportRenderer(typeof(ScrollableTabbedPage), typeof(ScrollableTabbedPageRenderer))]
    namespace ScrollableFreshTabbed.Droid
    {
        class ScrollableTabbedPageRenderer : TabbedPageRenderer
        {
            public ScrollableTabbedPageRenderer(Context context) : base(context)
            {
    
            }
            public override void OnViewAdded(Android.Views.View child)
            {
                base.OnViewAdded(child);
                var tabLayout = child as TabLayout;
                if (tabLayout != null)
                {
                    tabLayout.TabMode = TabLayout.ModeScrollable;
                }
            }    
        }
    }
    

    In the Portable project:

    public class ScrollableTabbedPage :  FreshTabbedNavigationContainer
    {
        public ScrollableTabbedPage ()
        {
    
        }
    }
    

    App.xaml.cs:

            public App ()
            {
                InitializeComponent();
                var tabbedNavigation = new ScrollableTabbedPage();
                tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
                tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
                tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
                tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
                tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
                tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
                tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
                tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
                tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
                tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
                tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
                tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
                tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
                tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
                tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
                tabbedNavigation.AddTab<QuotePageModel>("Contacts", null);
    
                MainPage = tabbedNavigation;    
            }
    

    And the result is:
    enter image description here