Customizable Tabs with TabView for Xamarin.Forms

With the TabView in the Xamarin Community Toolkit you gain a fully customizable tab bar for your Xamarin.Forms app. Swipe to change tabs, background colors, badges, different styling for selected state, top or bottom placement and much more! All you can do without any custom renderers and on any platform.

In this video we will see what the TabView is and how to get started with it.

💝 Join this channel to get access to perks:

🔗 Links

⏱ Timestamps
0:00 Intro
0:46 Sample App Outline
1:23 Install Xamarin.CommunityToolkit NuGet
3:15 Add Xamarin.CommunityToolkit Namespace in XAML
4:30 Add TabView to Our Sample App
7:30 Add TabViewItem Text
8:15 Set TabView Placement to Top or Bottom
8:40 Disable Swipe to Change Tab Selection
9:05 Set TabViewItem BackgroundColor and TextColor
11:40 Set TabStripHeight
12:00 Add Badges to a TabViewItem
13:15 Add Icons to Your Tabs
15:12 Outro

🙋‍♂️ Also find my...

[adamdiment]

Hi Gerald, thanks for the video, the control looks great.

I would be interested to use this for swiping between pages, and to have hooks for on each tab, so I an register / deregister for view updates and keep the memory profile low. On that point, lazy loading of tabs would be a real plus too.

Cheers!

[SigmuStube]

Thanks for the video! It was very helpful!

[prayashff]

Awesome video man it helped me a lot !! Thanks buddy

[LobsterHarry]

I am using Tabs a lot lot in my Application. I hope that these Tabs also support IsEnabled and IsVisible for each Tab, that would be awesome ! I will definitely check it out !

[heinzd]

Hi Gerald. Great Video, exactly what I have been looking for) My Question might not specificly apply to this video however I'll ask anyway. How do I change the color of the pulldown tool bar (no sure if this is the correct terminology) on the very top of the Android screen?

[shiwanz]

Hi Gerald. I'm trying to change the format of the letters of tabs because it appears always in upper case. Is there something like TextTransform="none" in the tabViewItem?

[PumpdaBrakes-ubkp]

nice. would love to see tabs on top and bottom with icons on all tabs

[justadaniel]

Hey bud, how would you go about implementing this with Shell? Or would you suggest to rip shell out and just use the older approach?

[deakinwilson]

Hi Gerald, is there a way to customize the content of the tab itself, e.g. layout horizontally with icon and text, or, add a stacklayout to the tab (not the page the tab will show, but the tab itself) to allow any content at all?

[andrewtruckle]

Hi. Thanks for the tutorial. I thought I would try this and whist it is OK for my iOS build it is not OK for my MacOS build. The MacOS is showing a button bar at the top but nothing is showing in the content of the tab items.

[menschmaier]

Hello, thanks for the video, but i have one question:

is it possible to put inside the tabViewItem a complete contentpage which then has it's own Viewmodel? so for example <TabViewItem>

Thanks in advance!

[cliffshivkar]

Great Video! What is the performance hit, with all the GUI happening?

[ajramos]

Great video! Is there a way to change the position of the badges? In iOS they appear in the center of the tab and I'm not using icons only text

[zaibatsumozu]

Great nice feature, .. but I'm struggle with its is only supported with contentview only (if I'm not wrong), I can not handle the right way to implement MVVM Binding, etc.. because I want to separate viewmodel on each tab content view, and I can not use Page.

[BeatzInfinite]

Thanks for another great video! With Shell, I can click on a tab and then tap into subsequent NavigationPages while still in the context of that tab. Is this possible with XCT TabView?

[BreakingSkiesMedia]

Is there a way to change the shown tab from code?

[tempacc]

Good video. Can we use this Tabview like ViewPager? What I mean was there is static view at the top of the ContentPage, then after that the TabView which I want to swipe. Problem is it works on Android but not in iOS.

[tonytalksbr]

Hi Gerald, I have a Shell app with FlyoutItems, there's a performance gain/loss between ContentTemplate of Flyout and ContentViews of TabView?

[makatozi]

Nice work! Does the tab view always take up the entire page? Is it possible to have something else on the page, either above or below? What I'me trying to accomplish is a form with a map showing a location, and just below it is a section for entering the location. I want to give the user a choice of several different ways of specifying a location such as current, address, geo coordinates, etc. And then more content below the tab view such as Save and Cancel Buttons. It is this section that I am thinking of having as a TabView. Is this possible?

[ToDoAccordeao]

As always, this is an amazing video.
I am waiting for it to accept contentPages as content, so the Xaml can be cleaner and compact.
I am, although, struggling in Android as the tabViewItem text is always uppercase. I added the textAllCaps property with value false, in styles.xml but the text is still upper case. Do you know if this is a known issue or if there is a workaround?