TabBar Scrollable problems

osorrenti · November 2020

Hi everyone, I'm new to Xamarin.
I'm trying to display Scrollable TAbs in a TabPage. I have looked at some posts that indicated to edit app: tabMode = "scrollable" in Tabbar.xml (Android) but it doesn't work. Please have any ideas? I am attaching the XAML code and the tabbar.xml

<?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:mypages="clr-namespace:unica.Views.KodiViews"
            Title="Music"

            BarBackgroundColor="{StaticResource NavigationPrimary}"
            BackgroundColor="{StaticResource NavigationPrimary}"
            Style="{StaticResource TabbedStyle}"
            x:Class="unica.Views.KodiViews.KodiMusic">
      <TabbedPage.Children >
          <mypages:KodiOverView Title="OVERVIEW"/>
          <mypages:KodiAlbums Title="ALBUMS"/>
          <mypages:KodiArtists Title="ARTISTS"/>
          <mypages:KodiPlayLists Title="PLAYLIST"/>
          <mypages:KodiGenres Title="GENRES"/>
          <mypages:KodiSongs Title="SONGS"/>
          <mypages:KodiMusicVideos Title="MUSICVIDEO"/>
      </TabbedPage.Children>
</TabbedPage>

Tabbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.TabLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/sliding_tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:tabIndicatorColor="@android:color/white"
    app:tabGravity="fill"
    app:tabMode="scrollable" />

jezh · November 2020

Make sure you have the following code in your MainActivity.cs:

     TabLayoutResource = Resource.Layout.Tabbar;

The code will like this:

    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate (Bundle bundle)
        {
            base.OnCreate (bundle);

            TabLayoutResource = Resource.Layout.Tabbar;

            global::Xamarin.Forms.Forms.Init (this, bundle);

            LoadApplication (new App ());
        }
    }

The result is:

jezh · November 2020

Make sure you have the following code in your MainActivity.cs:

     TabLayoutResource = Resource.Layout.Tabbar;

The code will like this:

    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate (Bundle bundle)
        {
            base.OnCreate (bundle);

            TabLayoutResource = Resource.Layout.Tabbar;

            global::Xamarin.Forms.Forms.Init (this, bundle);

            LoadApplication (new App ());
        }
    }

The result is:

osorrenti · November 2020

Thanks a lot.
I entered what was suggested but I still had a problem on the styles in the tabbar.xml I had to fix those too and now it works thanks again

jezh · November 2020

Congrats, if my reply is useful for this problem, could you please mark it as answered so that others who have similar problem will get help from here?

Thanks in advance.

osorrenti · December 2020

A strange thing happened to me, it's been a while since I solved this problem with your instructions and between one build and the next it no longer works I have not changed anything ... I have the correct tabbar.xml and the lines
ToolbarResource = Resource.Layout.Toolbar;
TabLayoutResource = Resource.Layout.Tabbar;

inserted but at any moment it now behaves with tabbars as "fixed". Is there anything I need to clean up to get back to the situation before? I tried to delete the bin and Obj but they remain fixed.

Xamarin

Quick Links

TabBar Scrollable problems

Best Answer

Answers