Tabbed Page - Tab Text truncate issue for MAUI 8.

Question

Hi,

I have converted project from Xamarin Forms to MAUI 8.

There is a new feature request to Add Tab bar navigation on the app. There are 5 tabs at the bottom of app.

I have implemented AppTabbedPage.xaml and added 5 pages. for Tab navigation.

One of the Tab has Text - "Jacobs Connect", that is truncating on Android app but working fine on iOS

Is there a mechanism I can update the text to two lines or adjust the width of Tab.

Can someone help with the implementation this.

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage
    x:Class="Jacobs.AppTabbedPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:pages="clr-namespace:Jacobs.Views"
    xmlns:android="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific;assembly=Microsoft.Maui.Controls"
    android:TabbedPage.IsSwipePagingEnabled="False"
    BarBackgroundColor="{DynamicResource TabBarBackGroundColor}"
    SelectedTabColor="{DynamicResource TabBarSelectedTabColor}"
    UnselectedTabColor="{DynamicResource TabBarUnSelectedColor}"
    android:TabbedPage.ToolbarPlacement="Bottom"
    NavigationPage.HasNavigationBar="False">

    <pages:HomePage Title="Home" IconImageSource="{DynamicResource HomeIcon}" />
    <pages:AppContentPage Title="Jacobs Connect" IconImageSource="{DynamicResource JacobsConnectIcon}" />
    <pages:ChatBotContentPage Title="Atlas" IconImageSource="{DynamicResource AtlasIcon}" />
    <pages:NotificationPage Title="Notifications" IconImageSource="{DynamicResource NotificationTabIcon}" />
    <pages:ProfilePage Title="Profile" IconImageSource="{DynamicResource ProfileIcon}" />
</TabbedPage>

Answer 1

Hello,

The default setting of Tabbar mode in Android system is Fixed. This is a mode that evenly distributes the length of each Tab. Therefore, when setting a long title, it will be truncated.

The recommended way for Android is to set TabBar to scrollable mode so that your text can be displayed.

There has been a detailed discussion and multiple solutions on how Maui applications can modify TabMode on Android in Maui migrating Xamarin to Maui - Tabbed Page Scroll Issue - Tabs are not scrolling #16470. You can refer to the method that is more suitable for you.

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.