0

How can I draw a top line for the selected tab item ?

enter image description here

I'm using the standard xamarin Forms pagged layout shell and this is in context of the footer tabbed navigation. I'm building with xamarin for both ios,android.

John Mokien
  • 435
  • 4
  • 12
  • 1
    I think you'll need to give a bit more context. What is the code that you're using to show these tabs? TabbedPage? TabView? Custom renderers? Android, iOS? Not trying to be an ass, but this is too little info to be able to say anything useful. Remember, we don't know your codebase – Gerald Versluis Feb 10 '21 at 13:51

1 Answers1

0

Depends on what is your current context but an alternative could be to to use TabView from Xamarin community toolkit package, where this capability is already built-in and a lot more.

properties relevant to this question are TabIndicatorPlacement, TabIndicatorColor. and TabStripPlacement

<xct:TabView 
    TabStripPlacement="Bottom"
    TabStripBackgroundColor="Blue"
    TabStripHeight="60"
    TabIndicatorPlacement="Top"
    TabIndicatorColor="Yellow"
    TabContentBackgroundColor="Yellow">
    <xct:TabViewItem
        Icon="triangle.png"
        Text="Tab 1"
        TextColor="White"
        TextColorSelected="Yellow"
        FontSize="12">
        <Grid 
            BackgroundColor="Gray">
            <Label
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent1" />
        </Grid>
    </xct:TabViewItem>

<xct:TabViewItem
    <xct:TabViewItem
        Icon="circle.png"
        Text="Tab 2"
        TextColor="White"
        TextColorSelected="Yellow"
        FontSize="12">
        <Grid>
            <Label    
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent2" />
        </Grid>
    </xct:TabViewItem>
</xct:TabView>

enter image description here

Edit

Shell is not defining a strip indicator for bottom tabs (for top tabs yes), so you are more probably needs to do it with a custom renderer (for each platform) or even build it yourself natively (on each platform).

Cfun
  • 8,442
  • 4
  • 30
  • 62