XAML Font sizes work on iOS but not on Android

This is my XAML:

 <View.Resources>
    <Style x:Key     ="windowTitleStyle"
           TargetType="Label">
        <Setter Property="FontSize"
                Value   ="Large" />
        <Setter Property="FontAttributes"
                Value   ="Bold" />
        <Setter Property="TextColor"
                Value   ="Black" />
    </Style>
    <Style x:Key     ="fieldTitleStyle"
           TargetType="Label">
        <Setter Property="FontSize"
                Value   ="Small" />
        <Setter Property="TextColor"
                Value   ="Gray" />
    </Style>
    <Style x:Key     ="fieldContentStyle"
           TargetType="Label">
        <Setter Property="FontSize"
                Value   ="Large" />
        <Setter Property="FontAttributes"
                Value   ="Bold" />
        <Setter Property="TextColor"
                Value   ="Black" />
    </Style>
</View.Resources>
<StackLayout>
    <Label HorizontalTextAlignment="Center"
           VerticalOptions        ="CenterAndExpand"
           Text                   ="Dispatch Prepared"
           FontAttributes         ="Bold"
           BackgroundColor        ="Transparent" />
    <Label Style="{StaticResource Key=fieldTitleStyle}"
           Text ="Time" />
    <Label x:Name         ="dispatchTime"
           Style          ="{StaticResource Key=fieldContentStyle}"
           BackgroundColor="Transparent"
           Text           ="{Binding StartTimeAsString}"
           FontSize       ="Medium"
           VerticalOptions="CenterAndExpand" />
    <Label Style="{StaticResource Key=fieldTitleStyle}"
           Text ="Address" />
    <Label x:Name         ="dispatchData"
           Style          ="{StaticResource Key=fieldContentStyle}"
           BackgroundColor="Transparent"
           Text           ="{Binding Details}"
           FontSize       ="Medium"
           VerticalOptions="CenterAndExpand" />
    <Button Opacity        ="0.95"
            CornerRadius   ="12"
            BackgroundColor="Transparent"
            VerticalOptions="FillAndExpand"
            TextColor      ="Black"
            Text           ="Revise It"
            FontSize       ="Medium" />
    <Button x:Name         ="dispatchItButton"
            Opacity        ="0.95"
            CornerRadius   ="12"
            BackgroundColor="Green"
            TextColor      ="White"
            VerticalOptions="FillAndExpand"
            Text           ="Dispatch It"
            FontSize       ="Medium" />
</StackLayout>

These are the weird things going on: on iOS, the different font sizes appear to work, but on Android, all the font sizes are the same. But even on iOS, the Large font size only works for the fieldTitleStyle elements, and doesn't work for the fieldContentStyle elements.

Help please very much.

Answers

  • BillyLiuBillyLiu Member, Xamarin Team Xamurai

    @CalmBreathsSlowPulse

    These are the weird things going on: on iOS, the different font sizes appear to work, but on Android, all the font sizes are the same.

    I have tested your code, it works fine. Could you reproduce this issue in a blank project?

    But even on iOS, the Large font size only works for the fieldTitleStyle elements, and doesn't work for the fieldContentStyle elements.

    I think the reason is that you have set the FontSize to Medium in the control, so it will not use the value you set in style.

    <Label x:Name         ="dispatchData"
           Style          ="{StaticResource Key=fieldContentStyle}"
           BackgroundColor="Transparent"
           Text           ="{Binding Details}"
          ** FontSize       ="Medium"**
           VerticalOptions="CenterAndExpand" />
    
  • @BillyLiu Thanks for catching that FontSize conflict! Amazing how we can stare at something so simple and miss it.

    This code pretty much is in a stand-alone project, because of layout problems I was having I needed to isolate it. The only other code is a ViewModel that supplies the "address" and "details" fields.

    Here is how my iOS screen renders in the preview (I've simplified the font stylings a little to make visual comparison easier):

    The font sizes are easily distinguishable.

    Here's how the Android version renders:

    All these fonts look the same size to me. An easy way to compare is to look at the letter "d", which appears in most fields.

    ... also, I am using Visual Studio for Mac, if that makes any difference.

  • BillyLiuBillyLiu Member, Xamarin Team Xamurai

    @CalmBreathsSlowPulse

    You could try to use OnPlatform while you set the fontsize. And seta large number for Android.

                <Setter Property="FontSize">
                    <Setter.Value>
                        <OnPlatform x:TypeArguments="x:Double">
                            <On Platform="iOS" Value="15"/>
                            <On Platform="Android" Value="40"/>
                        </OnPlatform>
                    </Setter.Value>
                </Setter>
    

    Please check the following link:
    https://montemagno.com/important-onplatform-changes-xamarin-forms/

  • @BillyLiu the problem there is that I lose the dynamic sizing implied by using size categories instead of specific font sizes. What I most want to avoid is having to detect the screen size and then calculate font sizes based on that. If categories don’t work, that’s what’s necessary to make sure fonts are the right size across devices. Ironically enough this is more of a problem on Android than iOS, and Android is the platform it doesn’t work on!
  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭

    So is your problem that you want to use a font NamedSize in OnPlatform?

  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭

    Hmm... this thread indicates that it should work but there's a bug.

    To get around Forms making bad decisions on font sizes when using the NamedSize, we ended up writing our own helper class which we then used in our XAML, to (more) reliably give a size in points depending on category. I can share this if you like.

  • @JamesLavery sounds great, please do.

    It seems the promise of XAML needs a little propping up here and there, always glad to find some help.

  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭

    Sorry, having checked our code that's not quite what we did. I remember we investigated this solution but ended up with a different solution (not related to your problem).

  • JoeMankeJoeManke USMember ✭✭✭✭✭
    edited October 2018

    I wrote a markup extension to deal with the issue of using NamedSizes to set a FontSize in OnPlatform. I believe I've posted it on the forum before but I might as well share it again:

    Code:

    [ContentProperty(nameof(NamedSize))]
    public class NamedSizeExtension : IMarkupExtension
    {
        public NamedSize NamedSize { get; set; }
    
        [TypeConverter(typeof(TypeTypeConverter))]
        public Type TargetType { get; set; }
    
        public object ProvideValue(IServiceProvider serviceProvider)
        {
            return Device.GetNamedSize(NamedSize, TargetType);
        }
    }
    

    XAML usage:

    <Label Text="Large on iOS, Medium on Android, Small on UWP">
        <Label.FontSize>
            <OnPlatform x:TypeArguments="x:Double">
                <On Platform="iOS"
                    Value="{extensions:NamedSize Large, TargetType=Label}" />
                <On Platform="Android"
                    Value="{extensions:NamedSize Medium, TargetType=Label}" />
                <On Platform="UWP"
                    Value="{extensions:NamedSize Small, TargetType=Label}" />
            </OnPlatform>
        </Label.FontSize>
    </Label>
    
  • @JoeManke that is a super-nifty bit of code, and I got it working, but I'm sorry to say, for me, it only works for iOS.

    Basically I'm getting the exact same results. I wish I could say different!

  • Update: it appears to work fine in the simulator. It only renders incorrectly in the Preview pane. What a pain!

  • NMackayNMackay GBInsider, University mod

    @CalmBreathsSlowPulse said:
    Update: it appears to work fine in the simulator. It only renders incorrectly in the Preview pane. What a pain!

    The Forms previewer? ignore that, it doesn't work....it really doesn't

  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭
    I've never bothered with the Forms Previewer - I've never got it working reliably.

    LiveXAML is my choice.
  • The previewer sure is finicky but for iOS, when it works, it works great. Saves a ton of time.

    What’s LiveXAML, and do you need an android phone for it?
  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭
    edited October 2018

    LiveXAML (https://www.livexaml.com) is a XAML previewing package which allows live XAML updates to be viewed in your app, on devices and on Emulators/Simulators.

    I've found it invaluable.

    It's not free, but is worth the money. Free stuff which doesn't work is not worth the money!

Sign In or Register to comment.