Home > Blockchain >  Tab Icons Too Small in iOS in Xamarin App
Tab Icons Too Small in iOS in Xamarin App

Time:04-18

The icons I set for tabs in my Xamarin Forms 5 app work perfectly in Android but in iOS they're way too small.

I define them in the Shell -- see below:

<FlyoutItem Title="Home">
   <FlyoutItem.Icon>
         <FontImageSource
             FontFamily="MISHRP"
             Glyph="{StaticResource HomeIcon}"
             Color="White" />
     </FlyoutItem.Icon>
     <Tab Title="Tab 1">
         <Tab.Icon>
             <FontImageSource
                 FontFamily="MISHRP"
                 Glyph="{StaticResource NewspaperIcon}"
                 Color="{StaticResource SecondaryDark}"
                 Size="15"/>
         </Tab.Icon>
         <ShellContent Route="News" ContentTemplate="{DataTemplate home:News}" />
     </Tab>
     <Tab Title="Contacts">
         <Tab.Icon>
             <FontImageSource
                 FontFamily="MISHRP"
                 Glyph="{StaticResource ContactsIcon}"
                 Color="{StaticResource SecondaryDark}"
                 Size="15"/>
         </Tab.Icon>
         <ShellContent Route="Contacts" ContentTemplate="{DataTemplate home:Contacts}" />
     </Tab>
     <Tab Title="Settings">
         <Tab.Icon>
             <FontImageSource
                 FontFamily="MISHRP"
                 Glyph="{StaticResource SettingsIcon}"
                 Color="{StaticResource SecondaryDark}"
                 Size="15"/>
         </Tab.Icon>
         <ShellContent Route="Settings" ContentTemplate="{DataTemplate home:Settings}" />
     </Tab>
</FlyoutItem>

I can simply increase the Size=15 to something larger but then icons will get larger on Android as well.

How do I make sure the tab icons appear large enough on both platforms?

UPDATE:

I tried OnPlatform as follows but I keep getting an error that reads:

Property 'Size' does not support values of type 'OnPlatform'1 (Size)

Here's how I implemented OnPlatform:

<Tab Title="Tab 1">
   <Tab.Icon>
      <FontImageSource
         FontFamily="MISHRP"
         Glyph="{StaticResource NewspaperIcon}"
         Color="{StaticResource SecondaryDark}">
         <FontImageSource.Size>
            <OnPlatform x:TypeArguments="Size">
               <On Platform="Android">15</On>
               <On Platform="iOS">25</On>
            </OnPlatform>
         </FontImageSource.Size>
      </FontImageSource>
   </Tab.Icon>
   <ShellContent Route="News" ContentTemplate="{DataTemplate home:News}" />
</Tab>

CodePudding user response:

    <FontImageSource.Size>
        <OnPlatform x:TypeArguments="Double">
            <On Platform="Android">15</On>
            <On Platform="iOS">25</On>
        </OnPlatform>
    </FontImageSource.Size>
  • Related