Search code examples
xamlxamarin.formsscrollabletabbedpagebottomtabs

Can we make scrollable bottom tabbed page in xamarin.forms

I am having four tabs on the bottom, the problem is, the last tab title is not completely visible, I am thinking by setting tab mode to scrollable it would set, Even after I set the tabmode to scrollable the problem exists.

can someone help me to achieve this, please. enter image description here

enter image description here

Here is my xaml code:

    <?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
             android:TabbedPage.BarItemColor="LightGray"
             android:TabbedPage.BarSelectedItemColor="White"
             android:TabbedPage.IsSmoothScrollEnabled="True"         
             x:Class="MyApp.Views.DashBoardTabbedPage" BarBackgroundColor="#00abbf">
  <!--Pages can be added as references or inline-->
</TabbedPage>

xaml.cs constructor

var  _dashboardview = new DashBoard();
            _dashboardview.Title = "1";
            _dashboardview.IconImageSource = "refresh";
            this.Children.Add(_dashboardview); //Added other 3 tabs in this way
            On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);
Solution

  • If you are interested you can change your application base page to the newer Shell type, then use a combination of nesting Tabbar and Tab to define bottom and upper tabs. Although the default behavior is that beyond 5 bottom tabs the remaining ones will be hidden in a grouped list accessed thru a 3 dots "More" menu on the right edge.

                              enter image description here

    But, if you prefer having scrollable tabs, I recommend using either one of the below package as it is not built-in inside Xamarin.Forms:

    • Xamarin.CommunityToolkit with TabView gives great control and customization options for your tabs, including a built-in scrolling, the documentation will soon be available the same for the first stable release (planned for this week but already available in pre-releases), but meantime you can take a look at TabView. Please note that this packages comes with plenty of diverse and helpful features not only for Tabs.

                            enter image description here

    • Another nice package that you can take a look at is Sharpnado.Tabs with TabType.Scrollable.