Xamarin Community Toolkit — TabView + Xamarin Forms Shell
Hey yo!
It’s been over a month now, thereabout, since the release of the super awesome toolkit referred to as Xamarin Community Toolkit from Microsoft. Personally, I see this as a game changer in the mobile world and I hope to state some of my reasons. Of course, that’s why I’m here … lols.
Basically, I would through writing share some of my experiences lately exploring this toolkit particularly the TabView which is currently in use in one of my production apps on playstore titled MedTracker. More about this later. Also, I hope to attach link to code snippets and a sample project so you could focus on enjoying the read. Let’s get started right away huh ? Yeah.
Firstly, Microsoft released Xamarin Forms Shell in the upgrade to Xamarin Forms 4.0 sometime in year 2019, as an effort to enable .NET developers focus more on the business logic of their applications and have less complexity in crafting beautiful mobile UIs. This is really cool as it saves time in crafting app UIs, handles the many navigation issues seamlessly and so on. So what this means basically is, I don’t necessarily need to install frameworks to craft my mobile apps in Xamarin. Frameworks such as Prism and the likes which are really cool could become a choice since the existence of Xamarin Forms Shell. Personally, I would choose Xamarin Forms Shell for my mobile app developments as opposed to external frameworks as this decision imparts my app size which in turn affects app performance amongst a host of other reasons. To get started with Xamarin Forms Shell, check this docs out: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/
As cool as Xamarin Forms Shell is for crafting mobile apps, there are still some pain points facing the tool. From experience, one of such problem can be seen when using the TabBar for a bottom page in Shell. Having experimented with the TabBar, a very obvious problem is an inability to override your app’s toolbar. This is because once you’re using Shell for your mobile app UI designs, your custom shell renderer doesn’t affect pages within the TabBar or Flyout visual heirarchy. The pages that inherit or are affected by your custom shell renderer are pages within ShellItem visual heirarchy. This I see as an advantage to using Flutter for crafting mobile apps. How do I mean ? Flutter basically is geared towards crafting beautiful mobile UIs and requires somewhat processes to get the hang of your business logics to work in a decoupled manner interacting with the beautifully crafted UIs. In other words, you craft cross-platform UIs without much restrictions using Flutter. That’s pretty cool if you ask me. However, Flutter won’t be a best choice to building large apps such as enterprise mobile apps due to high need of SOLID principles and other Software Engineering principles.etc. To learn more about custom renderer for different views in Xamarin, check this docs out: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/
Yay!!!! … So this brings us to something I find really cool. And I hope you could guess ? … All hail, Xamarin Community Toolkit … lols. I feel with the way Microsoft particularly the Xamarin team is advancing their tools, Xamarin would really be in high demand in the coming years for cross-platform mobile development. Well, we await .NET MAUI coming up in .NET 6 sometime this year 2021. So as an effort to give flexibility to .NET developers for crafting cool mobile apps, Microsoft came up with the Xamarin Community Toolkit. Alot of goodies there, you can check it up here: https://docs.microsoft.com/en-us/xamarin/community-toolkit/
My findings with Xamarin Community Toolkit — TabView in Xamarin Forms Shell.
Firstly, it is good to establish the possibility of using TabView in Shell and TabView is not a replacement for the TabBar in Shell. You could use both or either of them at your choice and project needs.
Here are my observations from the TabView in Xamarin Community Toolkit v1.0.2 as used in Xamarin Forms Shell:
- The TabView used exclusively as a tab in shell for crafting mobile apps would solve the custom shell renderer issue stated above. You could override your app’s toolbar at choice. You could literally craft whatever complex UIs and whatever your mind can imagine.
- The use of the TabBar and TabView would not solve the custom shell renderer issue for your app’s toolbar. This of course can give your tabbed pages to benefit from the swiping feature that TabView comes along with when enabled in Xaml for a TabViewItem.
- Finally, it is possible to have a nested TabView used in shell. The only effect as at the time of writing this article is your swiping feature when enabled even on both TabViewItems would only be applicable to the outermost nested TabViewItem.
To explore this observations for yourself, fork the sample project through this GitHub url: https://github.com/Ezeji/TabViewShell
Code Snippets showing the use of TabView and TabBar in Shell:
And lastly, I promised to share more information to one of my apps currently in production that uses TabView in Shell. MedTracker is an android app that reminds patients of their medications which they’ve created as a plan on the app. They get a reminder through an automated notification scheduled based on their time preference and are further expected to record the progress of their medication intake on the app. Patients’ medication histories are properly stored and each medication’s progress displayed on their dashboard. Patients can also book an appointment with a medical personnel and much more. Access MedTracker here: https://play.google.com/store/apps/details?id=com.appworld.medtracker
I hope you enjoyed reading and I hope to drop more contents going forward as I explore Microsoft development tools ranging from the web, mobile, desktop.etc. Please applaud, share and drop your comments at the comment section.
Live | Love | Code | Swim.