xamarin forms Tabbed page title no wrap - xamarin.forms

Question

i have tabbed page with number of pages , the issue here that the title of the page is not appearing well, it need to be no wrap or expand to fit the text.
any suggestion to solve this issue.

Answer 1

You Need to create one TabbedPageRenderer
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android.AppCompat;
using AppTab.Droid;
using Android.Support.V4.View;
using Android.Support.Design.Widget;
using System.ComponentModel;
using Xamarin.Forms.Platform.Android;
using AppTab;
using Android.Graphics.Drawables;
using Android.Graphics;
[assembly: ExportRenderer(typeof(CustomTabbedPage), typeof(ScrollableTabbedPage))]
namespace AppTab.Droid
{
public class ScrollableTabbedPage : TabbedPageRenderer
{
public override void OnViewAdded(Android.Views.View child)
{
base.OnViewAdded(child);
var tabLayout = child as TabLayout;
if (tabLayout != null)
{
tabLayout.TabMode = TabLayout.ModeScrollable;
}
}
public static void Init()
{
var unused = DateTime.UtcNow;
}
private CustomTabbedPage FormsTabbedPage => Element as CustomTabbedPage;
private Android.Graphics.Color _selectedColor = Android.Graphics.Color.Black;
private static readonly Android.Graphics.Color DefaultUnselectedColor = Xamarin.Forms.Color.Gray.ToAndroid();
private static Android.Graphics.Color _barBackgroundDefault;
private Android.Graphics.Color _unselectedColor = DefaultUnselectedColor;
ViewPager _viewPager;
TabLayout _tabLayout;
protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
{
base.OnElementChanged(e);
// Get tabs
for (var i = 0; i < ChildCount; i++)
{
var v = GetChildAt(i);
var pager = v as ViewPager;
if (pager != null)
_viewPager = pager;
else if (v is TabLayout)
_tabLayout = (TabLayout)v;
}
if (e.OldElement != null)
{
_tabLayout.TabSelected -= TabLayout_TabSelected;
_tabLayout.TabUnselected -= TabLayout_TabUnselected;
}
if (e.NewElement != null)
{
_barBackgroundDefault = (_tabLayout.Background as ColorDrawable)?.Color ??
Android.Graphics.Color.Blue;
SetSelectedColor();
SetBarBackgroundColor();
_tabLayout.TabSelected += TabLayout_TabSelected;
_tabLayout.TabUnselected += TabLayout_TabUnselected;
SetupTabColors();
SelectTab(0);
}
}
void SelectTab(int position)
{
if (_tabLayout.TabCount > position)
{
_tabLayout.GetTabAt(position).Icon?
.SetColorFilter(_selectedColor, PorterDuff.Mode.SrcIn);
_tabLayout.GetTabAt(position).Select();
}
else
{
throw new IndexOutOfRangeException();
}
}
void SetupTabColors()
{
_tabLayout.SetSelectedTabIndicatorColor(_selectedColor);
_tabLayout.SetTabTextColors(_unselectedColor, _selectedColor);
for (int i = 0; i < _tabLayout.TabCount; i++)
{
var tab = _tabLayout.GetTabAt(i);
tab.Icon?.SetColorFilter(_unselectedColor, PorterDuff.Mode.SrcIn);
}
}
private void TabLayout_TabUnselected(object sender, TabLayout.TabUnselectedEventArgs e)
{
var tab = e.Tab;
tab.Icon?.SetColorFilter(_unselectedColor, PorterDuff.Mode.SrcIn);
}
private void TabLayout_TabSelected(object sender, TabLayout.TabSelectedEventArgs e)
{
var tab = e.Tab;
_viewPager.CurrentItem = tab.Position;
tab.Icon?.SetColorFilter(_selectedColor, PorterDuff.Mode.SrcIn);
}
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
int lastPosition = _tabLayout.SelectedTabPosition;
switch (e.PropertyName)
{
case nameof(CustomTabbedPage.BarBackgroundColor):
case nameof(CustomTabbedPage.BarBackgroundApplyTo):
SetBarBackgroundColor();
SetupTabColors();
SelectTab(lastPosition);
break;
case nameof(CustomTabbedPage.SelectedColor):
SetSelectedColor();
SetupTabColors();
SelectTab(lastPosition);
break;
default:
base.OnElementPropertyChanged(sender, e);
break;
}
}
private void SetSelectedColor()
{
if (FormsTabbedPage.SelectedColor != default(Xamarin.Forms.Color))
_selectedColor = FormsTabbedPage.SelectedColor.ToAndroid();
}
private void SetBarBackgroundColor()
{
if (FormsTabbedPage.BarBackgroundApplyTo.HasFlag(BarBackgroundApplyTo.Android))
{
_tabLayout.SetBackgroundColor(FormsTabbedPage.BarBackgroundColor.ToAndroid());
_unselectedColor = FormsTabbedPage.BarBackgroundColor != default(Xamarin.Forms.Color)
? FormsTabbedPage.BarBackgroundColor.ToAndroid()
: DefaultUnselectedColor;
}
else
{
_tabLayout.SetBackgroundColor(_barBackgroundDefault);
_unselectedColor = DefaultUnselectedColor;
}
}
}
}
Second you Need CustomTabbedPage class
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace AppTab
{
[Flags]
public enum BarBackgroundApplyTo
{
None = 0x01,
Android = 0x10,
iOS = 0x100
}
public class CustomTabbedPage : TabbedPage
{
public CustomTabbedPage()
{
}
public static readonly BindableProperty SelectedColorProperty =
BindableProperty.Create(nameof(SelectedColor), typeof(Color), typeof(CustomTabbedPage), default(Color));
public Color SelectedColor
{
get => (Color)GetValue(SelectedColorProperty);
set => SetValue(SelectedColorProperty, value);
}
public static readonly BindableProperty BarBackgroundApplyToProperty =
BindableProperty.Create(nameof(BarBackgroundApplyTo), typeof(BarBackgroundApplyTo), typeof(CustomTabbedPage), BarBackgroundApplyTo.Android);
public BarBackgroundApplyTo BarBackgroundApplyTo
{
get => (BarBackgroundApplyTo)GetValue(BarBackgroundApplyToProperty);
set => SetValue(BarBackgroundApplyToProperty, value);
}
public new static readonly BindableProperty BarBackgroundColorProperty =
BindableProperty.Create(nameof(BarBackgroundColor), typeof(Color), typeof(CustomTabbedPage), default(Color));
public new Color BarBackgroundColor
{
get => (Color)GetValue(BarBackgroundColorProperty);
set => SetValue(BarBackgroundColorProperty, value);
}
}
}
And Third You Need CustomMain Page
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Xamarin.Forms;
namespace AppTab
{
public class CustomMain : CustomTabbedPage
{
public CustomMain()
{
BarBackgroundApplyTo = BarBackgroundApplyTo.Android;
//BarBackgroundColor = Color.Red;
Children.Add(new abc() { Title = "ABC"});
Children.Add(new xyz() { Title = "XYZ" });
Children.Add(new pqr() { Title = "PQR" });
Children.Add(new str() { Title = "STR" });
Children.Add(new ftx() { Title = "FTX" });
Children.Add(new dtb() { Title = "DTB" });
}
}
}
Click here for ScreenShot

Answer 2

In Resources->Layout->Tabbar.xml set tabMode to "scrollable".
It should work.