[Bug] TabView - TabIndicatorColor isn't working on load

[NunoBem]

Description

In a ContentPage, I'm using TabView. After updating to the newest Xamarin.Forms 5.0.0.2083, Xamarin.Essentials 1.7.0 and Xamarin.CommunityToolkit 1.3.0-pre1, the TabIndicatorColor in TabView doesn't show up until we start changing tabs.

Steps to Reproduce

1. Start a new Xamarin Forms project
2. Update to the latest Xamarin.Forms 5.0.0.2083
3. Add a new TabView on a page
4. Give the TabView a TabIndicatorColor property a color value
5. Run the app and not see the tab indicator

Expected Behavior

TabIndicatorColor should appear bellow the tab selected

Actual Behavior

TabIndicatorColor won't show up until starting to change tabs

Basic Information

• Version with issue: 1.3.0-pre1, 1.2.0 , 1.1.0, 1.03
• Last known good version: 1.0.2
• IDE: Visual Studio 2019 Version 16.10.4
• Platform Target Frameworks:
  • iOS: 14.5
  • Android: Android 11.0 (R)
• Affected Devices: Android and iOS

Workaround

Reproduction imagery

Reproduction Link

https://github.com/NunoBem/TabViewIssue

[jfversluis]

Hey thanks for the report! Did you by any chance also test other platforms if it's happening there too?

[NunoBem]

@jfversluis Hey thanks for the report! Did you by any chance also test other platforms if it's happening there too?

Hi Gerald,

iOS same bug

[RNaves84]

Hey thanks for the report! Did you by any chance also test other platforms if it's happening there too?

@jfversluis Hi, on the androind platform it works perfectly

[NunoBem]

Hey thanks for the report! Did you by any chance also test other platforms if it's happening there too?

@jfversluis Hi, on the androind platform it works perfectly

@RNaves84 what workaround did you do?

I just updated Xamarin.CommunityToolkit to 1.3.0-pre2 to see if it was fixed, but it's the same (android and ios).

[RNaves84]

Hey thanks for the report! Did you by any chance also test other platforms if it's happening there too?

@jfversluis Hi, on the androind platform it works perfectly

@RNaves84 what workaround did you do?

I just updated Xamarin.CommunityToolkit to 1.3.0-pre2 to see if it was fixed, but it's the same (android and ios).

@NunoBem

Hello, I'm on version 1.0.2, and it's ok on the android platform, the problem only occurs for ios with me.
for iOS we decided to leave it unmarked for now by assigning the transparent color until we found a solution
****sorry for my english i'm from brazil i'm still learning lol
Android
iOS

[NunoBem]

@NunoBem

Hello, I'm on version 1.0.2, and it's ok on the android platform, the problem only occurs for ios with me.
for iOS we decided to leave it unmarked for now by assigning the transparent color until we found a solution
****sorry for my english i'm from brazil i'm still learning lol
Android
iOS

@RNaves84 (and @jfversluis)

I downgraded to 1.0.2 and it works in both Android and iOS (1.0.3 is where the bug starts to appear).

Check the sample repo and do the downgrade.

[maxchu92]

I am having the same issue as well on iOS, but it works for me on Android
Xamarin.Forms v5.0.0.2012
XCT v1.2.0

[donatellijl]

I have this issue as well.
Xamarin.Forms v5.0.0.2012
XCT v1.2.0
Any ETA on when this will be fixed? I want to use LazyView too, but I can't because I have to stay on XCT 1.0.2 due to this issue.

[ajramos27]

I have the same issue only in iOS. I'm using XCT v1.2.0. Any workaround?

[LewisEKay]

I fixed the issue on mine for Android, haven't checked iOS yet.
If you name your TabView component and manually set its index on load it will work. Seems to be that the tab view doesnt know what index it's on or something?

public MyPageView() { InitializeComponent(); tabs.SelectedIndex = 0; // For first item selected }

Edit: Sorry for formatting of code, not sure how to make it nice.

[donatellijl]

It always worked for me on Android. iOS is the one that doesn't work.

I fixed the issue on mine for Android, haven't checked iOS yet. If you name your TabView component and manually set its index on load it will work. Seems to be that the tab view doesnt know what index it's on or something?

public MyPageView() { InitializeComponent(); tabs.SelectedIndex = 0; // For first item selected }

Edit: Sorry for formatting of code, not sure how to make it nice.

[kainaalmeida]

I was going through the same problem and I built this workaround. Hope it helps guys :)

<xct:TabView.TabIndicatorView> <BoxView BackgroundColor="#0CB498" HeightRequest="3" WidthRequest="{Binding Source={x:Reference tabItemBase}, Path=Width}" /> </xct:TabView.TabIndicatorView> <xct:TabViewItem x:Name="tabItemBase" FontSize="12" Text="Todos" TextColor="#4D4D4D" TextColorSelected="#4D4D4D"> <views:TodosView /> </xct:TabViewItem>