.Net MAUI 7 Android, Image Gif Animation Not Playing in Release Mode, Normal in Debug Mode

[syachrodi]

Description

I tried to release the .net maui apps that I made, when in debug mode everything works fine, but the problem occurs when I release my application to Android, the gif image that I use for loading doesn't work properly, no animation is playing, it only displays the native image.

Then I tried to make a simple application to confirm this problem, and yes, the problem remains the same, here I attach the simple code that I made, where this coding runs normally in debug mode, but in release mode the gif animation doesn't play

Steps to Reproduce

The simple code

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MiCetApp.View.StartPage"
             Title="StartPage"
             BackgroundColor="#6789ba"
             Shell.NavBarIsVisible="False">
    <Grid
        RowDefinitions="*, Auto, Auto">
        <Image
            HeightRequest="150"
            Source="{Binding StringFormat=Resources/Images/loading_animation}"
            IsAnimationPlaying="False"
            x:Name="gifAnimation"/>

        <Button
            Grid.Row="1"
            Text="Play Animation"
            Clicked="PlayAnimation"/>

        <Button
            Grid.Row="2"
            Text="Pause Animation"
            Clicked="PauseAnimation"/>
    </Grid>
</ContentPage>

private void PlayAnimation(object sender, EventArgs e)
{
    gifAnimation.IsAnimationPlaying = true;
}

private void PauseAnimation(object sender, EventArgs e)
{
    gifAnimation.IsAnimationPlaying = false;
}

Version with bug

6.0.312

Last version that worked well

6.0.312

Affected platforms

Android, I was not able test on other platforms

Affected platform versions

Android 11.0 API 31.0

Did you find any workaround?

No response

Relevant log output

No response

[NonameMissingNo]

Hey there, can you put up a repo?

[syachrodi]

Hey there, can you put up a repo?

Hi @NonameMissingNo
this's my example repo https://github.com/syachrodi/MiCetApp

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[hg15671855182]

I also encountered the same problem, which urgently needs to be solved!

[rfangzh]

Is there any workaround to this issue, please?

[fariz-huseynov]

Works neither on IOS nor Android

[ea543]

not work on iOS and Android +1

[sheharyarshahid]

I was able to resolve by simply doing this

protected override async void OnAppearing()
{
base.OnAppearing();
await Task.Delay(100);
BreatheImageLoader.IsAnimationPlaying = false;
await Task.Delay(100);
BreatheImageLoader.IsAnimationPlaying = true;
}

[syachrodi]

I was able to resolve by simply doing this

protected override async void OnAppearing() { base.OnAppearing(); await Task.Delay(100); BreatheImageLoader.IsAnimationPlaying = false; await Task.Delay(100); BreatheImageLoader.IsAnimationPlaying = true; }

Has been try in release mode?

[jmc5018]

protected async override void OnAppearing()
{
base.OnAppearing();
await Task.Delay(100);
imgLoader.IsAnimationPlaying = false;
await Task.Delay(100);
imgLoader.IsAnimationPlaying = true;
}

I did the same thing and it works fine in Debug but does not work in Release.

[AnnYang01]

Verified this on Visual Studio Enterprise 17.7.0 Preview 2.0. Repro on Android emulator (13.0-API 33) and iOS 16.4 with below Project:
MauiApp14.zip
Screenshot:

[umeshkamble]

Hi,
https://gist.github.com/jamesmontemagno/7619563
If you are looking same implementation in MAUI. Please visit below GitHub link

Gif Animation Sample

[ea543]

thanks,It`s workaround for me.

[ecosimini]

@umeshkamble I got excited when I saw this but tried it out and it doesn't work for Android release builds :( GetDataAsync is only supported for ios and maccatalyst. Is there any similar method that would work for Android?

[msrockswell]

The playback of GIFs is a basic function. The ticket is almost 1 year old already. When will the problem be fixed?

[ea543]

The playback of GIFs is a basic function. The ticket is almost 1 year old already. When will the problem be fixed?

yes from umeshkamble Gif Animation Sample

[billreiss]

I've experimented with using WebView to play a GIF in MAUI, it works on Android and iOS, on Windows I use the native support because it seems to work fine and I didn't want to troubleshoot what was going wrong with the WebView on Windows. I'm working on building out a sample, but if anyone needs something sooner let me know. What I don't have working yet is to honor HeightRequest or WidthRequest and other layout options

[msrockswell]

umeshkamble Gif Animation Sample The gif is played much too slowly.

With FFImageLoading works under iOS. Android doesn't work.

Does anyone know a Nuget alternative to ffimageloading?

[billreiss]

Using WebView to animate GIF on iOS and Android https://github.com/billreiss/MauiGifWebView

[msrockswell]

@billreiss : Nice Workaround for NET8.

I need a Workaround for NET7. Does anyone know a example?

[mrnams]

Not working in .net8.0

[ssbssb-cmd]

has anyone found any workaround? how to play animated gif in MAUI?

[PawelDobrowolsk1]

For me it worked after installed NuGet package FFImageLoading.Maui
https://www.nuget.org/packages/FFImageLoading.Maui

[msrockswell]

Now it works on NET 7. NuGet FFImageLoading.Maui Update 1.1.3 & csproj None Remove gif.

[Redth]

As a workaround you can load the .gif into a webview.

1. Copy the .gif to Resources/Raw/my.gif folder of your project
2. Add a .html file (see below) to Resources/Raw/my.html
3. Add a web view: <WebView HeightRequest="200" WidthRequest="200" x:Name="webView" />
4. In your code behind, set the source:

webView.Source = new UrlWebViewSource {
  Url = "file:///android_asset/my.html"
};

HTML File eg:

<html>
<body style="background-color: #ffffff; padding: 0; margin: 0;">
    <img src="my.gif" width="200" height="200">
</body>
</html>

This works in release mode in my testing. It's not ideal, but it's a workaround until we can figure out and eventually fix why release mode is not animating.

[ea543]

As a new workaround on https://github.com/microspaze/FFImageLoading.Maui for me~ Perfect~

[Matthias5555]

Hello I got a Workaround for Android. A Gif is basically just a SpriteSheet , a list of Pictures which are played after another. So I have an Image Object in Xaml and a Class which does basically that.
I Only testet it on Android Release and Debug build, both works. (IOS should probably also work)( I am in .Net 8 newest Version of Maui

Xaml:

<Image x:Name="Loadspinner" />

GifLoader Class:

    public class GifLoader
    {

        private List<string> SpriteImagesList {  get; set; } = new List<string>();

        private Image? ImageObject {  get; set; }

        public int MillisecondsDelay { get; set; } = 100;

        public bool IsAnimationPlaying { get; set; } = false;

        public GifLoader(List<string> SpriteImages, Image image)
        {
            if(SpriteImages != null && SpriteImages.Count > 0)
            {
                SpriteImagesList = SpriteImages;
            }
            if(image != null)
            {
                ImageObject = image;
            }

        }

        public void StopAnimation()
        {
            IsAnimationPlaying = false;
        }

        public async void StartAnimation()
        {
            if (IsAnimationPlaying) { return; }
            if (ImageObject == null){return;}
            
            IsAnimationPlaying = true;

            do
            {
                foreach (string spriteSource in SpriteImagesList)
                {
                    ImageObject.Source = spriteSource;

                    await Task.Delay(MillisecondsDelay);
                }

            } while (IsAnimationPlaying);
        }

        public async void StartAnimation(int MillisecondsDelay)
        {
            if (IsAnimationPlaying) { StopAnimation(); }
            if (ImageObject == null) { return; }

            IsAnimationPlaying = true;

            do
            {
                foreach (string spriteSource in SpriteImagesList)
                {
                    ImageObject.Source = spriteSource;

                    await Task.Delay(MillisecondsDelay);
                }

            } while (IsAnimationPlaying);
        }
    }

Code On the xaml.cs

        List<String> gifSources = new List<String>()
        {
            "loadspinner1.png",
            "loadspinner2.png",
            "loadspinner3.png",
            "loadspinner4.png",
            "loadspinner5.png",
            "loadspinner6.png",
            "loadspinner7.png",
            "loadspinner8.png",
        };
        GifLoader loadspinnerGif = new GifLoader(gifSources, Loadspinner);
        loadspinnerGif.StartAnimation();

So first you'll need to split up the gif in its pictures there are severel websites which do these, you can also make that by youre self.

1. You Import the Images into Resources/Images in youre Maui Project.
2. After that you can add the GifLoader Class in a new .cs file
3. Now you just need to create an GifLoader Object with the Source paths of youre pictures.
   (Its important thats in the right order)

you can Start and Stop the Animation with the Method given in the GifLoader.

This worked for me, i hope it also does for you ,comment if theres a better workaround or already fixed. Thanks

[mattleibow]

I think I found out why the animations are not playing, now I just need to find a solution.

When setting the drawable, the type is a android.graphics.drawable.AnimatedImageDrawable which should be an Android.Graphics.Drawables.IAnimatable. However, in Release builds it appears to lose that interface...

[mattleibow]

I think I have found a way to make it work, however I discovered that Glide only loads GIF files in Android 28+ for some reason. I see they register Stream -> Drawable for animations in 28+:

https://github.com/bumptech/glide/blob/a7351b0ecf6656ad937fbc52fe9e90d3b289c265/library/src/main/java/com/bumptech/glide/RegistryFactory.java#L175-L179

However, they just decide to only register Stream -> GifDrawable in older:

https://github.com/bumptech/glide/blob/a7351b0ecf6656ad937fbc52fe9e90d3b289c265/library/src/main/java/com/bumptech/glide/RegistryFactory.java#L246-L250

This means unless you explicitly know you are loading a gif and you remember that you need to use AsGif in the builder, you don't get anyhting.

[mattleibow]

A workaround for this right now would be to make sure that there is a reference to the AnimatedImageDrawable type somewhere in your code.

class MauiProgram {
#pragma warning disable 0219, 0649
    static bool falseflag = false;
    static MauiProgram ()
    {
        if (falseflag) {
            var ignore = new AnimatedImageDrawable ();
        }
    }
#pragma warning restore 0219, 0649

    // ...
}

There is also an option to use a linker configuration to keep the type around: https://learn.microsoft.com/dotnet/core/deploying/trimming/trimming-options

However, since this was just fixed in the upcoming SR6 #22874 it may be easier to just use the false flag for now and delete once the SR is released.