Xamarin.forms: [Enhancement] TabbedPage Improvements (LazyLoading, Customisation, Embedding)

[muhaym]

Summary

The current Xamarin Forms Tabbed Page is very limited and restrictive in nature.

Listing out a few common problems faced by developers

1. All the pages IList<Page> inside TabbedPage is rendered at a go before loading, which leads to a huge performance issue in apps where the landing page is TabbedPage.

eg. Scenario, If there are 5 tabbed pages, and each page has enough custom controls, or complex control like Maps, the initial load of the tabbed page will take comparatively more time to load.

1. Customizing Tab Controls are very restrictive (recent addition of support for BottomNavigationBar is awesome), but still

• ability to change icon colour for individual items
• dynamic selected item colour/icon
• disabling page loading

etc are still hard

1. Positioning TabbedPage (or making a new TabbedControl maybe?), embedding a tabbed page (tabcontrol) inside another content page/navigation page, etc are not possible yet (which is a very common requirement in modern mobile apps)

API Changes

1. For the first issue problem discussed, something to defer the loading of individual pages inside tabbedpage (unless it's loaded as default page or on user interaction) would help increase performance.

<TabbedPage LazyLoadEnabled="True">
    <ContentPage Title="A"/>
    <ContentPage Title="B"/>
</TabbedPage>

Once LazyLoadEnabled flag is set, the pages should only be created once it's selected instead of creating all at the same time. By Default, the flag should be False so that updating won't affect existing apps.

1. I have created Custom Renderer to meet a few of the scenarios mentioned in the second problem statement. Although in-built options would delight many users. (Reference https://github.com/muhaym/ElegantTabs)

2. This is to be really discussed by all the Xamarin.Forms user, because it will be super cool to have on inbuilt in Xamarin Forms. Syncfusion / Grial UI kit has one.

https://grialkit.com/features/ (Custom Tab Control)
https://help.syncfusion.com/xamarin/sftabview/getting-started

This are very initial thought processes, let's discuss to make the best possible outcome for the entire Xamarin Forms community.

But the first (Lazy Loading) should be something of a higher priority because it's an issue plaguing in multiple Xamarin Forms project I believe.

[KSemenenko]

I like your idea

[GiampaoloGabba]

I agree with you, tabbed page needs some love.
The most important thing is the lazy loading of pages. Currently i'm developing 2 simple apps with tabbed as a starting page. The loading performance is very, very poor (expecially on Android, ofc. But we know all this).

I made some research and i found this awesome post by @andreinitescu :
https://enginecore.blogspot.com/2019/01/xamarin-forms-lazy-load-tabs-in_10.html

[muhaym]

@Evolutionlab yeah, I saw a Spanish article of code level implementation for same for Prism somewhere. Guess we need to set this simply using inbuilt functionality because of the performance implication of tabbed page

[rredoh]

@muhaym Is this what you mean?

[muhaym]

@rredoh Yes, tried it, not a ultimate solution though!

[rredoh]

Is your ElegantTabs support lazy loading tab?

[muhaym]

@rredoh It doesn't support lazy loading. ElegantTabs is just a renderer for a bit more flexibility in Icon, Selected Icons, and handling / deferring tab clicks and handling it manually

[rredoh]

@muhaym Ok then.. Thanks for the insight :)

[muhaym]

@davidortinau

What are your ideas about implementing ContentTemplate concept as in Shell for TabbedPage.

It will help in performance enhancements.

[TingtingAn]

Any plan to support Lazy Loading Tab? @samhouts

[samhouts]

All the pages IList inside TabbedPage is rendered at a go before loading, which leads to a huge performance issue in apps where the landing page is TabbedPage.

From what I remember, this is only true on Android. You can actually control this behavior with the OffscreenPageLimit platform specific, although the minimum you can set here is 1. That will significantly improve your initial loading performance, but will, of course, degrade your experience upon switching between tabs.

At this time, we have no plans to work on lazy loading in the core platform. We understand that this reduces the time it takes for your app to load; we're currently focusing on reducing the time it takes for your app to load AND be fully usable.

That said, I'm loving the conversation on this issue, and we're happy to keep this under consideration. Thanks!!

[BillyMartin1964]

@samhouts , are you saying you can only do one or the other? Could you or one of your colleagues at least do a thorough video on this? Tabs are one of the most popular trends right now, but no one is going to wait 7-10 seconds for a tabbed page to load.

@jamesmontemagno , are you familiar enough with this to put it in your show? Hearing a lot of complaints about the tabbed page speed out here. ):

Thanks to all of you for doing what you have.

[BillyMartin1964]

Found this and Prism also has some stuff:

https://enginecore.blogspot.com/2019/01/xamarin-forms-lazy-load-tabs-in_10.html?m=1&fbclid=IwAR2CVOiEQCLoKF9vdsTAp6Dv3CesRLxlBWJgK2jvEvIrGhucELJGXI_kiG0

https://github.com/andreinitescu/TabbedPageLazyLoadApp

[alallo]

As a workaround I created a new class extending the Xamarin.Forms.TabbedPage and I send a message every time one of the tabs is clicked (or in general is diplayed)

public enum TabbedPages
{
    MyPage1 = 0,
    MyPage2 = 1,
    MyPage3 = 2,

}

public class BottomBarPage : Xamarin.Forms.TabbedPage
{
    protected override void OnCurrentPageChanged()
    {
        base.OnCurrentPageChanged();
        var newCurrentPage = (TabbedPages)Children.IndexOf(CurrentPage);
        MessagingCenter.Send<Xamarin.Forms.TabbedPage>(this, newCurrentPage.ToString("g"));
    }
}

and then on the view models (used for each page loaded when clicking on the tab) I subscribe to the message and call my APIs

public class MyPage2ViewModel
{
    public MyPage2ViewModel()
    {
        MessagingCenter.Subscribe<TabbedPage>(this, TabbedPages.MyPage2 .ToString("g"), async (obj) =>
        {
            //API call
        });
    }
}