Xamarin Forms: Tabbedpage icon and title overlapping

SreeeeSreeee INMember ✭✭✭✭✭

I have created a tabbed page in my xamarin forms project. Using android:TabbedPage.ToolbarPlacement="Bottom" option I added it on the bottom of android device. But Currently the icon and text are overlapping in tabs.

Screenshot:

enter image description here

TabbedPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:SmartWCM;assembly=SmartWCM"
            BarTextColor="#0091da"
            xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            android:TabbedPage.ToolbarPlacement="Bottom"
            BarBackgroundColor="#f2f2f2"
            android:TabbedPage.BarItemColor="#0091da"
            android:TabbedPage.BarSelectedItemColor="#0091da"
            x:Class="Proj.MyTabbedPage">
</TabbedPage>

TabbedPage.xaml.cs

//I have added all the child from xaml.cs like below.
var homePage = new Pages.HomePage(false)
            {
                Title = "Home",
                Icon = "ic_home_xx.png"
            };

            var topicsPage = new TweetsTopicsPage()
            {
                Title = "Announcements",
                Icon = "ic_topics_fill_xx.png"
            };

            var groupPage = new TweetsGroupPage()
            {
                Title = "Class",
                Icon = "ic_group_xx.png"
            };

            var ABPage = new DirectoryPage()
            {
                Title = "Contacts",
                Icon = "ic_addressbook_xx.png"
            };
            Children.Add(homePage);
            Children.Add(topicsPage);
            Children.Add(groupPage);
            Children.Add(ABPage);

Already found the same issue here. Is there any way to solve this issue from xaml.cs? Because I have a lot of conditions in xaml.cs.

Best Answers

  • SreeeeSreeee IN ✭✭✭✭✭
    Accepted Answer

    @LeonLu

    This is due to the "shift mode" that is activated when there are 4 or more tabs.

    I added the custom renderer from here but still the text is overlapped with icon, see the below screenshot.

  • LeonLuLeonLu Xamurai
    Accepted Answer

    I added the shift mode, then disabled the shiftmode. I got the following GIF.

    There is my code.

Answers

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    Can you change another icons to your application, I test your code, but I got the result is different,
    here is running GIF.

    I uploaded my demo, you can running it in your VS, If it is worked?

    And you can use my icon to your project, If your application cound run normally.

  • SreeeeSreeee INMember ✭✭✭✭✭
    Accepted Answer

    @LeonLu

    This is due to the "shift mode" that is activated when there are 4 or more tabs.

    I added the custom renderer from here but still the text is overlapped with icon, see the below screenshot.

  • LeonLuLeonLu Member, Xamarin Team Xamurai
    Accepted Answer

    I added the shift mode, then disabled the shiftmode. I got the following GIF.

    There is my code.

  • SreeeeSreeee INMember ✭✭✭✭✭
    edited June 17

    @LeonLu It's working now, I didn't do any changes. Currently no overlapping issues.

    Thanks :)

Sign In or Register to comment.