[Android] Flickering when opening popup, animated: false not working

[RandomMauiDev]

As the title says there is flickering happening when opening popup with animation on Android, specifically Samsung Galaxy S22 Ultra in my case. Using MopupService.Instance.PushAsync(popup, animate: false); does not disable the animation. I found a workaround for this by setting IsAnimationEnabled="False" on the popup page. But still having a nice animation would be better.

Here is what I am using on the page:

BackgroundClicked="OnBackgroundClicked"
BackgroundColor="#A0000000"
BackgroundInputTransparent="False"
CloseWhenBackgroundIsClicked="False"

[vchelaru]

I have also noticed this problem. Any update on the issue?

[tranb3r]

I also noticed this issue. I've managed to workaround the flickering bug by using this simplified custom animation code:

internal class ScaleAndFadeAnimation : BaseAnimation
{
    public double Scale { get; set; } = 0.8;

    public ScaleAndFadeAnimation()
    {
        EasingIn = Easing.SinOut;
        EasingOut = Easing.SinIn;
    }

    public override void Preparing(View content, PopupPage page)
    {
        HidePage(page);
    }

    public override void Disposing(View content, PopupPage page)
    {
        ShowPage(page);
    }

    public override Task Appearing(View content, PopupPage page)
    {
        return Task.WhenAll(
            page.FadeTo(1.0, DurationIn, EasingIn),
            ScaleAsync(content, EasingIn, Scale, 1.0, DurationIn)
        );
    }

    public override Task Disappearing(View content, PopupPage page)
    {
        return Task.WhenAll(
            page.FadeTo(0.0, DurationOut, EasingOut),
            ScaleAsync(content, EasingOut, 1.0, Scale, DurationOut)
        );
    }

    private static Task ScaleAsync(VisualElement content, Easing easing, double start, double end, uint length)
    {
        var task = new TaskCompletionSource();
        content.Animate("popupScale", 
            d => content.Scale = d,
            start, 
            end,
            easing: easing,
            length: length,
            finished: (_, _) => task.SetResult());
        return task.Task;
    }
}

[vchelaru]

@tranb3r can you explain how to use the ScaleAndFadeAnimation with Mopups? I'm looking at IPopupNavigation and I don't see a way to pass a BaseAnimation.

[tranb3r]

@tranb3r can you explain how to use the ScaleAndFadeAnimation with Mopups? I'm looking at IPopupNavigation and I don't see a way to pass a BaseAnimation.

Look at the sample app here: https://github.com/LuckyDucko/Mopups/blob/44b6af75795a974c45e69587be04b5c684f09db6/SampleMaui/XAML/AswinPage.xaml#L13 You can use any custom animation class instead of the one provided by the plugin.

[vchelaru]

For anyone who needs this in C#:

var popupNavigation = Mopups.Services.MopupService.Instance;
popupPage.Animation = new ScaleAndFadeAnimation();
await popupNavigation.PushAsync(popupPage);