Tab indicator in Xamarin Forms Tabbed Page placed at bottom

mac121mac121 Member ✭✭✭
edited February 8 in Xamarin.Forms

I have a Xamarin Forms bottom placed tabbed page rendered using C#. I want a tab indicator to be displayed above each tab icons as it would in a top placed tabbed page. Is it possible? I am not able to find solution anywhere. I came across this SO post - https://stackoverflow.com/a/41570159/10329199, where we can define app:tabIndicatorColor="#123456" in Tabbar.axml. But I didnt work because I'm rendering the tabbar using C# not in AXML. I also want this tab indicator in iOS. Thanks

Answers

  • mac121mac121 Member ✭✭✭

    @AlessandroCaliaro, thanks for your reply
    In the link you shared, there is only mentioning of defining color for BarItemColor, BarSelectedItemColor.
    For eg, BarItemColor=Black and BarSelectedItemColor=Red will give

    But I want tab indicator like this

    A thick solid gold-colored line on top of Settings icon and text. I also want a solution for iOS

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    @paul_mac said:
    @AlessandroCaliaro, thanks for your reply
    In the link you shared, there is only mentioning of defining color for BarItemColor, BarSelectedItemColor.
    For eg, BarItemColor=Black and BarSelectedItemColor=Red will give

    But I want tab indicator like this

    A thick solid gold-colored line on top of Settings icon and text. I also want a solution for iOS

    It's not true. In the link there is also how you can set the tabbar on the bottom

    android:TabbedPage.ToolbarPlacement="Bottom"
    

    This is what XF gives to you. If you need more, you have to create by your own

  • NMackayNMackay GBInsider, University mod

    @paul_mac said:
    @AlessandroCaliaro, thanks for your reply
    In the link you shared, there is only mentioning of defining color for BarItemColor, BarSelectedItemColor.
    For eg, BarItemColor=Black and BarSelectedItemColor=Red will give

    But I want tab indicator like this

    A thick solid gold-colored line on top of Settings icon and text. I also want a solution for iOS

    Read the documentation provided!

    <TabbedPage ...
                xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
                android:TabbedPage.ToolbarPlacement="Bottom"
                android:TabbedPage.BarItemColor="Black"
                android:TabbedPage.BarSelectedItemColor="Red">
    </TabbedPage>
    
    
  • mac121mac121 Member ✭✭✭

    I think I have posted the question title in a misleading way...
    I have a bottom placed tabbed page rendered using C# (I can't change this to XAML for binding reasons - else view gets NULL). I just want to know how I can bring the solid bar/line on top of selected tab icon as in the image I gave in my last comment.

    What I have now is this

    Hope I'm clear...Sorry guys, please excuse

Sign In or Register to comment.