Beautiful Tabs with Xamarin Community Toolkit TabView

Gerald Versluis

One of the hardest parts of apps to customize is the tab bar. To overcome this, we’ve added the TabView to the Xamarin Community Toolkit. With the TabView you have full control over the look-and-feel of the tab bar. In this blogpost we’ll learn what it’s all about.

Xamarin.Forms TabbedPage

The way to implement a tab bar in Xamarin.Forms is by using a TabbedPage. This works great and maps to the native equivalents on all platforms supported, but that is just the thing: it uses the native look and feel. Over the years we’ve surfaced more APIs that allow you to style the tab bar more, but the native platforms kept limiting us. There was a big ask for having a bit action button floating on that tab bar or being able to scroll through tabs, have animations, and more!

To be able to provide you with all the above, and more, there is now… TabView!

TabView: All You’ve Ever Wanted from a Tab Bar

By creating a tab bar from all Xamarin.Forms elements a whole new world opens. We’re able to bind items to tabs, scroll through them (both the pages as the actual tabs!), have animations, badges, and most of all… We can implement that big, floating, rounded action button. The TabView is available in the Xamarin Community Toolkit, today! But before you go off and install it right away, let me show you a couple of the cool things it can do.

Basic Usage

Basic usage of the TabView looks like below. You can already see so many options that are not available on the default tab bar. Placement top or bottom, background color, specify a height, enable an indicator and give it a color. It’s crazy.

If we look a little bit closer, we see that we have a TabView at the root and inside of the you’ll need to use TabViewItem. Those items even have more properties to customize. But more importantly; inside of these items you will specify the content. So, in practice, the TabViewItems will act as your actual tabs.


<Grid>
        <xct:TabView
                TabStripPlacement="Bottom"
                TabStripBackgroundColor="Blue"
                TabStripHeight="60"
                TabIndicatorColor="Yellow"
                TabContentBackgroundColor="Yellow">

                <xct:TabViewItem
                    Icon="triangle.png"
                    Text="Tab 1"
                    TextColor="White"
                    TextColorSelected="Yellow"
                    FontSize="12">
                    <Grid 
                        BackgroundColor="Gray">
                        <Label
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent1" />
                    </Grid>
                </xct:TabViewItem>

                <xct:TabViewItem
                    Icon="circle.png"
                    Text="Tab 2"
                    TextColor="White"
                    TextColorSelected="Yellow"
                    FontSize="12">
                    <Grid>
                        <Label    
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent2" />
                    </Grid>
                </xct:TabViewItem>
        </xct:TabView>
  </Grid>

When running the above code, it will show up like in the screenshot below.

Basic TabView Implementation Running on iOS

See this full sample code in context (or run it!) in the Xamarin Community Toolkit sample app.

TabView With Action Button

I’ve already mentioned it: the floating action button that looks so fancy in all those designs. You can see an example in the screenshot below.

TabView with Action Button Running on Android

To achieve this, we can use the following code. This is again taken from an example in the Xamarin Community Toolkit sample app. The code has been adapted to show just the crucial things here.


        <xct:TabView
                TabStripPlacement="Bottom"
                TabStripBackgroundColor="Blue"
                TabStripHeight="60"
                TabIndicatorColor="Yellow"
                TabContentBackgroundColor="Yellow">

                <!-- First TabViewItem -->

                <xct:TabViewItem
                    Text="Tab 2"   
                    Icon="circle.png"
                    ControlTemplate="{StaticResource FabTabItemTemplate}"
                    Style="{StaticResource TabItemStyle}"
                    TabTapped="OnFabTabTapped" />

                <!-- Third TabViewItem -->
        </xct:TabView>

The thing you might notice about this code is that the middle action button is just another TabViewItem. But by not assigning any content and instead assigning an event to the TabTapped property, you suddenly gain a button instead of another tab. Another thing that stands out is that you can use a ControlTemplate to style the TabViewItem any way you want. I’ll admit that the tabs shown in this post might need a bit more styling…

What About Lazy Loading?

That is a question we hear a lot, and with good reason! Lazy loading is not built into the TabView directly, however, also in the Xamarin Community Toolkit, we have the LazyView. With LazyView you can make any view lazy loading, including the ones used in TabView. LazyView isn’t out in stable yet at the time of writing this blog but will be part of version 1.1 and available in the nightly pre-release versions.

And Much, Much More…

I wish I could go over all the great stuff that is in the TabView, but where’s the fun in that? I invite you to go give it a try yourself and let us know. If you want to learn more, make sure to go check out the Docs page, the sample app that we have for the Xamarin Community Toolkit or the video down below where I talk with Javier about all the things that you can do with this.

I can’t wait to see what beautiful designs you can produce!

See it in Action!

If you want to see the TabView in action, right now, check out the video of the Xamarin Show below. In this episode I have Javier as my guest who shows everything that is possible.

12 comments

Discussion is closed. Login to edit/delete existing comments.

  • Leo Mck 0

    I loved the idea, the control has a lot of customizations possibilities, I was able to customize it exactly like the UI designer wanted. But it breaks on some scenarios, like when something on the screen force it to change size (https://github.com/xamarin/XamarinCommunityToolkit/issues/625) or as I just found out that the TabViewItems does not render on screen when the TabView is inside an StateLayout (but maybe this is a problem with the StateLayout too). As such, as much I appreciate the work done, for me it is not usable, now I am replacing the CommunityToolkit TabView for Sharpnado.Tabs and although I still could not get it to look exactly like I want, it works as expected so if your app is more than 1 simple page without changes, I strongly suggest Sharpnado.Tabs.

    • Gerald VersluisMicrosoft employee 0

      Sorry to hear that! And appreciate the feedback 🙂

      I hope we can fix those things and make it better for everyone. The control is pretty new so we have some things to work out. If you find things or have valuable details to add to existing issues that would be much appreciated!

  • MitchBomcanhao 0

    Hi Gerald, these toolkit controls are great, but tabview as it stands is considerably broken on UWP… as I’m interested in cross-platform support that includes UWP, a lot of new stuff made by Microsoft (and open source contributors) is inaccessible to me 🙁

    • Gerald VersluisMicrosoft employee 0

      Thank you for reaching out Mitch! Please see if there are already issues on the repository for this or create them if not so we can see and address them 🙂

      Thanks!

  • Adam Knight 0

    The customisation is a fantastic step up from the tabbed page.

    Do you have any examples of how to use pages rather than views for the content of a tab? For instances where you only have a single page within a tab I can see how this can be easily refactored into a content view but for instances where you have a navigation page with several child pages, I am struggling to see how this could be done without loosing the xamarin forms navigation service and page events (such as appearing and disappearing). Thanks

    • Gerald VersluisMicrosoft employee 0

      Hey Adam!

      Unfortunately using pages isn’t supported right now. I think we’re also planning a AppBar/NavBar that should help you with this scenario. For right now with the particular scenario with the NavigationPage that isn’t supported.

  • OBAKENG MATABOGE 0

    The Tabview is great with all the customizations,

    but how do you make the tab text titles to lower-caps on Android?

    • Gerald VersluisMicrosoft employee 0

      This is a completely custom control so there shouldn’t be any restrictions on using any kind of caps on any platform 🙂

  • Salman Mohammadi 0

    This idea also improves UX, Thanks for sharing,

    • Gerald VersluisMicrosoft employee 0

      Glad you like it!

  • Hendrik Wittke 0

    I like the TabView a lot but I am missing personally two features:

    1. Disable a single Tab so it can not be selected/shown.
    2. I would like to disable swiping Tabs only to the right side. That is for me “next”. “Next” is only allowed if something is selected in the previous tab. Back though is allowed all the time.
    • Gerald VersluisMicrosoft employee 0

      Make sure to add that to the repository if it’s not already mentioned somewhere so we can actually work on it 🙂

Feedback usabilla icon