[Bug] [Xamarin Shell] Using images that are larger than icon space scale tab bar significantly on iOS

NOTE: This issue was originally filled by XXcharlosXX on xamarin-docs two years ago, but I found that this stills not working on Xamarin Forms 5.0.0.2012 and it's seems that XXcharlosXX didn't fill it here.

Original Description

The typical size of an icon is around 30 x 30 px. Lets say for some reason I wanted to use a 512 x 512 px .png for an icon. On iOS this scales the tab bar to the size of the image, NOT the other way around. On Droid, works as desired. 512px image IS scaled to fit the area provided for the tab icon.

Extra description

Beside of the bordering problem. If you try to use a 30x30 px image, the icon will be very pixeled in iOS (and I think the app would be rejected in the store). Even if you use a 60x60 px, the icon will be pixeled and outside the borders.

Steps to Reproduce

(You can use the Sample Project below.)

Create a new Blank app
Create a new ContentPage and add the following code to the XAML

<?xml version="1.0" encoding="utf-8" ?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:root="clr-namespace:ShellIssue"
       x:Class="ShellIssue.MainShell"
       Shell.TabBarBackgroundColor="#070846"
       Shell.TabBarTitleColor="White"
       Shell.TabBarUnselectedColor="#70FFFFFF">

    <TabBar>
        <Tab Title="Xam" Icon="tab_icon.png">
            <ShellContent ContentTemplate="{DataTemplate root:MainPage}"/>
        </Tab>

        <Tab Title="Arin">
            <Tab.Icon>
                <FontImageSource Glyph="?"/>
            </Tab.Icon>

            <ShellContent ContentTemplate="{DataTemplate root:MainPage}"/>
        </Tab>
    </TabBar>
</Shell>

Remember to change the base class in the *.xaml.cs file

Add any image above 150px to the project and rename it to tab_icon.png
Compile and test it in an Android Phone
Compile and test it in iPhone

Expected Behavior

The icon for the tab Xam should be appearing inside the bottom bar in both in Android and iOS

Actual Behavior

The icon works as intended in Android, but in iOS it's outside the bordering.

Basic Information

Version with issue: 5.0.0.2012
Last known good version: Unknown
Platform Target Frameworks:
- iOS: 14.4
- Android: 10.0
NuGet Packages: Xamarin.Forms (5.0.0.2012) and Xamarin.Essentials (1.6.1),
Affected Devices: physical iPhone 7 (iOS 12.5.1) and iPhone 11 Pro Simulator (iOS 14.4)

Environment

Show/Hide Visual Studio info

``` Microsoft Visual Studio Community 2019 Version 16.8.6 VisualStudio.16.Release/16.8.6+31019.35 Microsoft .NET Framework Version 4.8.04084 Installed Version: Community Visual C++ 2019 00435-60000-00000-AA924 Microsoft Visual C++ 2019 ASP.NET and Web Tools 2019 16.8.560.26713 ASP.NET and Web Tools 2019 ASP.NET Core Razor Language Services 16.1.0.2052803+84e121f1403378489b842e1797df2f3f5a49ac3c Provides languages services for ASP.NET Core Razor. ASP.NET Web Frameworks and Tools 2012 16.8.560.26713 For additional information, visit https://www.asp.net/ ASP.NET Web Frameworks and Tools 2019 16.8.560.26713 For additional information, visit https://www.asp.net/ Azure App Service Tools v3.0.0 16.8.560.26713 Azure App Service Tools v3.0.0 Azure Functions and Web Jobs Tools 16.8.560.26713 Azure Functions and Web Jobs Tools C# Tools 3.8.0-5.20604.10+9ed4b774d20940880de8df1ca8b07508aa01c8cd C# components used in the IDE. Depending on your project type and settings, a different version of the compiler may be used. Common Azure Tools 1.10 Provides common services for use by Azure Mobile Services and Microsoft Azure Tools. Cookiecutter 16.8.20241.2 Provides tools for finding, instantiating and customizing templates in cookiecutter format. Extensibility Message Bus 1.2.6 (master@34d6af2) Provides common messaging-based MEF services for loosely coupled Visual Studio extension components communication and integration. IntelliCode Extension 1.0 IntelliCode Visual Studio Extension Detailed Info Microsoft Azure Tools 2.9 Microsoft Azure Tools for Microsoft Visual Studio 2019 - v2.9.30924.1 Microsoft Continuous Delivery Tools for Visual Studio 0.4 Simplifying the configuration of Azure DevOps pipelines from within the Visual Studio IDE. Microsoft JVM Debugger 1.0 Provides support for connecting the Visual Studio debugger to JDWP compatible Java Virtual Machines Microsoft Library Manager 2.1.113+g422d40002e.RR Install client-side libraries easily to any web project Microsoft MI-Based Debugger 1.0 Provides support for connecting Visual Studio to MI compatible debuggers Microsoft Visual C++ Wizards 1.0 Microsoft Visual C++ Wizards Microsoft Visual Studio Tools for Containers 1.1 Develop, run, validate your ASP.NET Core applications in the target environment. F5 your application directly into a container with debugging, or CTRL + F5 to edit & refresh your app without having to rebuild the container. Microsoft Visual Studio VC Package 1.0 Microsoft Visual Studio VC Package Mono Debugging for Visual Studio 16.8.43 (00471f8) Support for debugging Mono processes with Visual Studio. Node.js Tools 1.5.20902.1 Commit Hash:b474efcb6f92db52a8f8e2e6a8cb9648476885cc Adds support for developing and debugging Node.js apps in Visual Studio NuGet Package Manager 5.8.1 NuGet Package Manager in Visual Studio. For more information about NuGet, visit https://docs.nuget.org/ ProjectServicesPackage Extension 1.0 ProjectServicesPackage Visual Studio Extension Detailed Info Python 16.8.20241.2 Provides IntelliSense, projects, templates, debugging, interactive windows, and other support for Python developers. Python - Conda support 16.8.20241.2 Conda support for Python projects. Python - Django support 16.8.20241.2 Provides templates and integration for the Django web framework. Python - IronPython support 16.8.20241.2 Provides templates and integration for IronPython-based projects. Python - Profiling support 16.8.20241.2 Profiling support for Python projects. SQL Server Data Tools 16.0.62102.01130 Microsoft SQL Server Data Tools Test Adapter for Boost.Test 1.0 Enables Visual Studio's testing tools with unit tests written for Boost.Test. The use terms and Third Party Notices are available in the extension installation directory. Test Adapter for Google Test 1.0 Enables Visual Studio's testing tools with unit tests written for Google Test. The use terms and Third Party Notices are available in the extension installation directory. TypeScript Tools 16.0.21016.2001 TypeScript Tools for Microsoft Visual Studio Visual Basic Tools 3.8.0-5.20604.10+9ed4b774d20940880de8df1ca8b07508aa01c8cd Visual Basic components used in the IDE. Depending on your project type and settings, a different version of the compiler may be used. Visual C++ for Linux Development 1.0.9.30608 Visual C++ for Linux Development Visual F# Tools 16.8.0-beta.20507.4+da6be68280c89131cdba2045525b80890401defd Microsoft Visual F# Tools Visual Studio Code Debug Adapter Host Package 1.0 Interop layer for hosting Visual Studio Code debug adapters in Visual Studio Visual Studio Container Tools Extensions 1.0 View, manage, and diagnose containers within Visual Studio. Visual Studio Tools for CMake 1.0 Visual Studio Tools for CMake Visual Studio Tools for Containers 1.0 Visual Studio Tools for Containers Visual Studio Tools for Unity 4.8.2.0 Visual Studio Tools for Unity VisualStudio.DeviceLog 1.0 Information about my package VisualStudio.Foo 1.0 Information about my package VisualStudio.Mac 1.0 Mac Extension for Visual Studio Xamarin 16.8.000.262 (d16-8@4d60f9c) Visual Studio extension to enable development for Xamarin.iOS and Xamarin.Android. Xamarin Designer 16.8.0.507 (remotes/origin/d16-8@e87b24884) Visual Studio extension to enable Xamarin Designer tools in Visual Studio. Xamarin Templates 16.8.112 (86385a3) Templates for building iOS, Android, and Windows apps with Xamarin and Xamarin.Forms. Xamarin.Android SDK 11.1.0.26 (d16-8/a36ce73) Xamarin.Android Reference Assemblies and MSBuild support. Mono: 5e9cb6d Java.Interop: xamarin/java.interop/d16-8@79d9533 ProGuard: Guardsquare/proguard/proguard6.2.2@ebe9000 SQLite: xamarin/sqlite/3.32.1@1a3276b Xamarin.Android Tools: xamarin/xamarin-android-tools/d16-8@2fb1cbc Xamarin.iOS and Xamarin.Mac SDK 14.10.0.4 (5a05865f6) Xamarin.iOS and Xamarin.Mac Reference Assemblies and MSBuild support. ```

Screenshots

In this image you can clearly see the icons are larger than the tab bar. The size of the icon is 60 x 60px.

Below is an example of using a 512x 512px .png

Reproduction Link

Sample Project (.zip File)

So after waiting I decided to investigate this issue and I found out that the image is not being scaled correctly when added to the UITabBarItem (line 455 of the ShellSectionRenderer.cs), so the fix is to add a re-scale function after adding the UITabBarItem. Please note, you have to scale the image, not resizing it, otherwise you'll lose image quality after resizing it.

For now I have this workaround:

1) Create a new Custom control from Shell

public class ExtendedShell : Shell
{
}

2) Add the following Custom Renderer to the iOS project

[assembly: ExportRenderer(typeof(ExtendedShell), typeof(iOSExtendedShellRenderer))]
namespace MyApp.iOS.CustomRenderers
{
    public class iOSExtendedShellRenderer : ShellRenderer
    {
        protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection)
        {
            return new CustomShellSectionRenderer(this);
        }

        private class CustomShellSectionRenderer : ShellSectionRenderer
        {
            public CustomShellSectionRenderer(IShellContext context) : base(context)
            {
            }

            protected override void UpdateTabBarItem()
            {
                base.UpdateTabBarItem();
                //TODO: Calculate the size according the screen.
                //According to Apple:
                //@1x: 48x32
                //@2x: 96x64
                //@3x: 144x96
                TabBarItem.Image = ResizeImage(TabBarItem.Image, 48, 32);
            }

            private UIImage ResizeImage(UIImage source, float width, float height)
            {
                //If source is null, return null
                if (source == null)
                    return null;

                //Calculate the resize factor
                CGSize sourceSize = source.Size;
                double resizeFactor = Math.Min(width / sourceSize.Width, height / sourceSize.Height);
                //If the resize factor is greater than 1 (i.e. the Width and Height are bigger than source's size), then DON'T rescale
                if (resizeFactor > 1)
                    return source;
                //Calculate the new size
                double resizeWidth = sourceSize.Width * resizeFactor;
                double resizeHeight = sourceSize.Height * resizeFactor;
                //NOTE: DON'T use UIGraphics.BeginImageContext, otherwise the final result will lose some quality.
                UIGraphics.BeginImageContextWithOptions(new CGSize(resizeWidth, resizeHeight), false, 0.0f);
                //Redraw the image in the new size
                source.Draw(new CGRect(0, 0, resizeWidth, resizeHeight));
                //Save the new image for later
                UIImage scaledImage = UIGraphics.GetImageFromCurrentImageContext();
                UIGraphics.EndImageContext();
                //Take some coffe
                return scaledImage;
            }
        }
    }
}

3) Change every Shell page to custom:ExtendedShell

<?xml version="1.0" encoding="utf-8" ?>
<custom:ExtendedShell xmlns="http://xamarin.com/schemas/2014/forms"
                      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                      xmlns:custom="clr-namespace:MyApp.CustomRenderers"
                      x:Class="MyApp.MainShell">

    <TabBar>
        <Tab Title="Page1" Icon="Images/Icon1.png">
            <!-- Some content -->
        </Tab>

        <Tab Title="Page2" Icon="Images/Icon2.png">
            <!-- Some content -->
        </Tab>

        <Tab Title="Page3" Icon="Images/Icon3.png">
            <!-- Some content -->
        </Tab>
    </TabBar>
</cr:ExtendedShell>

PLEASE NOTE: It's not ideal to call the ResizeImage function like ResizeImage(TabBarItem.Image, 48, 32) as the TabBar could be tall in bigger screens/resolutions. I don't have that much time to investigate nor the experience in iOS (native) to how to calculate the correct height in runtime, so I would be so graceful if the Xamarin Team could figure it out how to calculate and re-scale the TabBar correctly.

xamarin / Xamarin.Forms