Icons in FreshTabbedNavigationContainer tabs bar are giant in IOS

Question

I am trying to show 4 icons for 4 tabs in the bar of my FreshTabbedNavigationContainer using FreshMVVM and Xamarin.Forms of course, they look as they should when I execute the app on an Android emulator, but when I use my Mac and emulate the app on an IOS emulator, these icons become gargantuan, just as you see in this picture. Here is my code: FreshTabbedNavigationContainer Code:

private static FreshTabbedNavigationContainer TabbedPageContainer = null;

TabbedPageContainer = new FreshTabbedNavigationContainer(navigation.ToString());
Products = TabbedPageContainer.AddTab<HomeViewModel>(null, "IconHomeInverted.ico", null);
Discover = TabbedPageContainer.AddTab<HomeViewModel>(null, "IconMagnifyingGlassInverted.ico", null);
Account = TabbedPageContainer.AddTab<HomeViewModel>(null, "IconUserInverted.ico", null);
Settings = TabbedPageContainer.AddTab<HomeViewModel>(null, "IconSettingsInverted.ico", null);

#region UI
//Dissables swipe only in android because in IOS can not be done
TabbedPageContainer.On<Xamarin.Forms.PlatformConfiguration.Android>().SetIsSwipePagingEnabled(false);
TabbedPageContainer.BarTextColor = Color.FromHex("#FFFFFF");
#endregion

page.CoreMethods.SwitchOutRootNavigation(navigation.ToString());

My icons are located in "MyProject.IOS", they are not in the resources folder or anything like that. That is all, if you need more information I will provide it as soon as I see your request. I hope all of you have a great day.

Answer 1

Ok, I solved it, my icons were 500x500 aprox, on Windows, visual studio or fresh MVVM resize the image to fill the tabbed bars; this does not happen on Mac, so they were showing their actual size, I resized them to 38x38 and now they look like what I was looking for.

Answer 2

The iOS "Human Interface Guidelines" have suggested sizes for the custom icons in the Navigation Bar.

These sizes go from 24px to 28px for the @1x scale factor meaning that for the other scale factors we will have something like:

24px 48px@2x 72px@3x

28px 56px@2x 84px@3x

Of course, you are capable of adjusting these numbers to keep consistency across your application.

More information about this here

Hope this helps.-