How to make Tabbed page of many content page with

Question

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

Somebody knows to make something like this?

thing that I want it to be

Answer 1

@Paweł Kanarek Your code for Droid project works perfectly. There's only a change needed to solve a build error.

Change the line:

[assembly: ExportRenderer(typeof(ScrollableTabbedPage), typeof(ScrollableTabbedPageRenderer))]

to:

[assembly: ExportRenderer(typeof(TabbedPage), typeof(App1.Droid.ScrollableTabbedPageRenderer))]

Thanks for your solution. It helped me perfectly.

Answer 2

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" />

Answer 3

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: