Tabbed Page - Tab Text truncate issue for MAUI 8.

Chaurasia, Gaurav 0

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>

1 answer

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 44,481 Reputation points Microsoft Vendor

2024-11-20T07:20:20.4533333+00:00

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.
Please sign in to rate this answer.
nandu kathmandi 1 Reputation point

2024-11-20T16:46:40.19+00:00

Hello ,

"Thank you for the solution provided in this issue! I tested it in my application and found that it works as expected when the ToolbarPlacement is set to TOP it shows the scroll only after clicking the Tab not by default when tabs load. In Bottom it does not work at all. Our requirement is show Tab at the Bottom ONLY Can you please replicate both scenarios by changing the Tab position in the attached code.
Any help on showing full text “Jacobs Connect” in 5 tabs layout is appreciated.
Here is I am providing the git link for the reference. https://github.com/Nandulucky/MauiTabbedPage

`

var tabs = Platform.CurrentActivity?.FindViewById<FragmentContainerView>(Microsoft.Maui.Resource.Id .navigationlayout_toptabs); var tabLayout = tabs?.GetChildAt(0); if(tabLayout is TabLayout layout) { layout.TabMode = TabLayout.ModeScrollable; layout.SetSelectedTabIndicatorColor(Colors.White.ToAndroid()); } }}`
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

Tabbed Page - Tab Text truncate issue for MAUI 8.

1 answer

Your answer