7

I want to make a tabbed page with 7 content page (in xamarin forms, NOT in native project). but the menu bar in red (I don't know what this thing is called so I call it menu bar) is not a scroll menu, so the title of each content page is not shown well. Like this:

the thing that I actually have
the thing that I actually have

Somebody knows to make something like this?

thing that I want it to be
thing that I want it to be

Cœur
  • 37,241
  • 25
  • 195
  • 267
Dunno Your
  • 81
  • 1
  • 6

2 Answers2

14

Well cannot say much without seeing some code! - but my assumption is that your problem is with your theme...

Open up your 'Tabbar.axml' and change this line of code:

app:tabMode="fixed"

To:

app:tabMode="scrollable"

UPDATE:

Then simply add the new line app:tabMode="scrollable" because by default is "fixed"

Anyways as you requested here is my Tabbar.axml :

<?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/colorPrimaryDark"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:tabIndicatorColor="@android:color/white"
    app:tabGravity="fill"
    app:tabMode="scrollable" />
MalokuS
  • 446
  • 3
  • 12
  • i cant find this line, can you show me your code in xaml file please? – Dunno Your Aug 04 '17 at 12:58
  • @DunnoYour take a look at the updated answer! Hope it helps. ... Also distinguish the difference between xaml and axml, as xaml is used inside Xamarin Forms to create UI's and axml is Android platform specific design language! – MalokuS Aug 04 '17 at 13:10
  • ah, i forgot to tell you that i dont want to make custom render in native projet, i will modify my question, thanks for your answer – Dunno Your Aug 04 '17 at 13:15
  • 3
    @DunnoYour This doesn't use any custom renderers ! Just open Tabbar.axml under Resources/layout/Tabbar.axml on your app Droid directory and edit it... – MalokuS Aug 04 '17 at 13:18
  • but this will change only for droid project, if i want to do the same thing in ios project, i have to change in ios project? sorry for too much question because i make entire project with forms project and not with native project – Dunno Your Aug 04 '17 at 13:22
  • Yes correct, because the default appearance of a UITabBarController in iOS is that it shows only 4 elements(tabs) and if it has more than that it adds an extra tab with "More" option... Here is the documentation [UITabBarController Documentation](https://developer.apple.com/library/content/documentation/WindowsViews/Conceptual/ViewControllerCatalog/Chapters/TabBarControllers.html) – MalokuS Aug 04 '17 at 13:32
  • so i cant do anything in a xamarin forms PCL project? but anyway thank you – Dunno Your Aug 04 '17 at 13:54
  • for the iOS side, unfortunately no because that's the native representation of the TabbedPage. If you want to override the native look and feel for iOS you can write custom renderers... You're welcome, hopefully I was able to answer your question :) – MalokuS Aug 04 '17 at 14:00
  • 1
    Easily the most relevant answer. Creating a custom renderer for a built in feature seems overkill, especially since each platform handles scrolling tabs independently. – Jason Aug 02 '18 at 20:14
8

You can also change this by creating a CustomRednerer. My solution is good if you want to create many tabbed pages in your application and you want to make one of them with scrollable tabs and second with non-scrollable tabs.

Here is code for Droid project:

using Android.Support.Design.Widget;
using App1;
using App1.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android.AppCompat;

[assembly: ExportRenderer(typeof(ScrollableTabbedPage), typeof(ScrollableTabbedPageRenderer))]
namespace App1.Droid
{
    public class ScrollableTabbedPageRenderer : TabbedPageRenderer
    {
        public override void OnViewAdded(Android.Views.View child)
        {
            base.OnViewAdded(child);
            var tabLayout = child as TabLayout;
            if (tabLayout != null)
            {
                tabLayout.TabMode = TabLayout.ModeScrollable;
            }
        }

    }
}

For Portable project:

using System;
using Xamarin.Forms;

namespace App1
{
    public class ScrollableTabbedPage : TabbedPage
    {
    }

    public class App : Application
    {
        public App()
        {
            var tabbedPage = new ScrollableTabbedPage();
            for (int i = 0; i < 7; i++)
            {
                tabbedPage.Children.Add(this.GetMyContentPage(i));
            }

            MainPage = new NavigationPage(tabbedPage);
        }

        private ContentPage GetMyContentPage(int i)
        {
            return new ContentPage
            {
                Title = "Tab number " + i,
                Content = new StackLayout
                {
                    Children = {
                        this.GetMyButton()
                    }
                }
            };
        }

        private Button GetMyButton()
        {
            var myButton = new Button()
            {
                Text = "Welcome to Xamarin Forms!",
            };

            myButton.Command = new Command(() =>
            {
                myButton.Text = "Start" + DateTime.Now.ToString();
            });
            return myButton;
        }
    }
}

And for result you get this:

page with scrollable tabs

Paweł Kanarek
  • 2,317
  • 2
  • 10
  • 17