Labels appear in Android emulator but not on physical device

Question

I created a navigation sidebar app with Xamarin.Forms, and before I had even made any changes to the project, I noticed something was wrong. When I launch the Pixel 2 emulator on my computer, I see the following correct view.

Emulator picture

However, when I either sent the APK or attached it to my computer and debugged the program I noticed that the labels were not appearing, as seen below from a screenshot on my OnePlus 8T + 5G (Android 11).

Phone screenshot

There are obviously more than a few differences between my phone and the emulator, but under most circumstances this should be the same across all devices and the app does load other elements (like buttons and images) correctly. What's going on here?

Things I've tried

• Searching for other posts, like this one, that show different results on the emulator vs. phone. No luck.
• Changing between Debug/Release and changing APK preferences to avoid code shrinking and possible loss of data. No luck.

Here's the code.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Car_Scan.Views.BrowsePage"
             xmlns:vm="clr-namespace:Car_Scan.ViewModels"
             Title="{Binding Title}">
    
    <ContentPage.BindingContext>
        <vm:AboutViewModel />
    </ContentPage.BindingContext>
    
    <ContentPage.Resources>
        <ResourceDictionary>
            <Color x:Key="Accent">#96d1ff</Color>
        </ResourceDictionary>
    </ContentPage.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackLayout BackgroundColor="{StaticResource Accent}" VerticalOptions="FillAndExpand" HorizontalOptions="Fill">
            <StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="Center">
                <ContentView Padding="0,40,0,40" VerticalOptions="FillAndExpand">
                    <Image Source="xamarin_logo.png" VerticalOptions="Center" HeightRequest="64" />
                </ContentView>
            </StackLayout>
        </StackLayout>
        <ScrollView Grid.Row="1">
            <StackLayout Orientation="Vertical" Padding="30,24,30,24" Spacing="10">
                <Label Text="Start developing now" FontSize="Title"/>
                <Label Text="Make changes to your XAML file and save to see your UI update in the running app with XAML Hot Reload. Give it a try!" FontSize="16" Padding="0,0,0,0"/>
                <Label FontSize="16" Padding="0,24,0,0">
                    <Label.FormattedText>
                        <FormattedString>
                            <FormattedString.Spans>
                                <Span Text="Learn more at "/>
                                <Span Text="https://aka.ms/xamarin-quickstart" FontAttributes="Bold"/>
                            </FormattedString.Spans>
                        </FormattedString>
                    </Label.FormattedText>
                </Label>
                <Button Margin="0,10,0,0" Text="Learn more"
                        Command="{Binding OpenWebCommand}"
                        BackgroundColor="{StaticResource Primary}"
                        TextColor="White" />
            </StackLayout>
        </ScrollView>
    </Grid>

</ContentPage>

Answer 1

I had the same problem. I was able to reproduce by creating a new Xamarin.Forms project and running it as-is. On my phone the text is not visible but when ran on an emulator it is. After trying several different things, I realized my phone was set to Dark Mode. I turned to Light Mode and it worked. I am still not sure what exactly it is about Dark Mode that is making this happen, because I have had my phone set to Dark Mode for a long time now. I found this that I am going to try to implement to see if it allows me to switch between light and dark mode seamlessly. Hope that's helpful

Answer 2

Try setting the TextColor Property to a color. like this:

<Label Text="Start developing now" FontSize="Title" TextColor="Black"/>
                                                    ^ this