Can we make scrollable bottom tabbed page in xamarin.forms

Question

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.

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);

Why are you doing the tabs in native android instead of a shared xaml view? — o_w, Jan 06 '21 at 10:54
Please clarify because your question is about Xamarin.Forms (uses xaml) while your code is Xamarin.Android (Native, uses xml) it is completely different. So Xamarin.Forms or Xamarin.Android? — Cfun, Jan 06 '21 at 11:11
I have defined tabbedpage in shared itself @o_w , The code is for reference about how I defined the tabMode. — sahithi, Jan 06 '21 at 12:53
Sorry for the confusion @Cfun, I am using xaml. I will update my xaml code. — sahithi, Jan 06 '21 at 12:54

Cfun · Accepted Answer · 2021-01-07T12:42:18.693

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.

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.

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

Thank you @cfun, I will try this. – sahithi Jan 06 '21 at 15:16 — sahithi, Jan 06 '21 at 15:16

Can we make scrollable bottom tabbed page in xamarin.forms

1 Answers1