How to crossplatform "gaussian" blurr an image using .NET MAUI

Question

I followed the instructions given in this awesome blog article to blurr an image from within my .NET MAUI app on both iOS and Android:

https://vladislavantonyuk.azurewebsites.net/articles/Creating-beautiful-image-effects-using-.NET-MAUI

However, the results differ extremely on both platforms. I like the results on my iPhone, but I am disappointed by the blurred image on my Android.

Looking at the implementation used for both platforms, is there anything, you could suggest to alter the Android code so that it looks more like the image on the iPhone?

iOS Version	Android Version

This is the content of my MainPage.xaml file:

<Grid>
        <Image 
            Source="c64.png"
            Aspect="Center">
            <Image.Behaviors>
                <blur:BlurBehavior Radius="66" />
            </Image.Behaviors>
        </Image>
        <Grid>
            <Image 
                VerticalOptions="Start"
                Margin="0,100,0,0"
                Source="c64.png"                  
                HeightRequest="300" 
                WidthRequest="300">
                <Image.Clip>
                    <RoundRectangleGeometry CornerRadius="20" Rect="0,0,300,300" />
                </Image.Clip>
                <Image.Shadow>
                    <Shadow 
                        Brush="Black"
                        Offset="0,0"
                        Radius="20"
                        Opacity="0.5" />
                </Image.Shadow>
            </Image>           
        </Grid>
    </Grid>

The relevant code snippet responsible for rendering the blurred image on Android looks like this:

void SetRendererEffect(ImageView imageView, float radius)
    {
        if (OperatingSystem.IsAndroidVersionAtLeast(31))
        {
            var renderEffect = radius > 0 ? GetEffect(radius) : null;
            imageView.SetRenderEffect(renderEffect);
        }
    }

    static RenderEffect? GetEffect(float radius)
    {
        return OperatingSystem.IsAndroidVersionAtLeast(31) ?
            RenderEffect.CreateBlurEffect(radius, radius, Shader.TileMode.Decal!) :
            null;
    }

The respective code for rendering the blurred image on iOS looks like this:

void SetRendererEffect(UIImageView imageView, float radius)
    {
        if (originalImage is null)
        {
            return;
        }

        var myContext = CIContext.Create();
        var inputImage = new CIImage(originalImage);
        var filter = new CIGaussianBlur
        {
            InputImage = inputImage,
            Radius = radius
        };
        var resultImage = myContext.CreateCGImage(filter.OutputImage!, inputImage.Extent);
        SetImage(imageView, resultImage);
    }

Answer 1

As it turns out, the difference is a result of the two devices having very different display sizes.

One is an iPhone 12 Mini, the other an HTC One M9. Because the background image is set to center and originally 1.200x1.200 pixel in size, it simply looks differently on both devices anyway.

So that the images match on both devices, I need to scale it up on my Android device.

Also, the blur radius needs to be adjusted to achive the same kind of effect.

I guess, I need to find out a way of calculating the ratios for a screen-size dependent scale/radius conversion. ;-)