.NET8 MAUI Image "gif" animation Debug vs. Release

Paul Kelley 0

Has anyone figured out how to get a MAUI Image "gif" animation to work in Release mode?

Using Visual Studio 2022's Android Device Manager, Emulator set to Tablet M-DPI 10.1in - API34, Android 14.0 - API 34, the MAUI Image animation in Debug mode works every single time! Awesome! However, when I switch the Build to Release mode and Deploy to the Emulator, the application responds just fine but I see a Image control presenting a FROZEN "gif" and I don't know how to solve the problem.

I experience the same FROZEN "gif" problem if the Emulator is running Pixel 6 Pro Android 14 - API 34.

Using the Debug build, Pixel 6 Pro Android 14 - API 34 Emulator shows the Image control animating the "gif" perfectly!

However, switching Build to Release mode and Deploying to the Pixel 6 Pro Emulator, again I experience the application responding just fine, but the Image control presents a FROZEN "gif".

Here's my XAML definition for my Image element:

When I select my Project and visit "Manage NuGet Packages" and select the "Updates" tab, no updates appear. So, I think I've got the latest.

Maybe you know of a NuGet Package or a Build Release setting that solves the problem? I'm unsure how to proceed.

Thanks for reading this post.

Also posted here: https://techcommunity.microsoft.com/t5/app-development/net8-maui-image-quot-gif-quot-animation-debug-vs-release/m-p/4147943

Paul Kelley 0

            <Image

                    x:Name="ClintHatGif"

                    Source="clinteastwood.gif"

                    IsAnimationPlaying="True"

                    Aspect="AspectFit"

                    VerticalOptions="Center"

                    HeightRequest="180" />

1 answer

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 78,511 Reputation points Microsoft Vendor

2024-05-23T07:10:19.2433333+00:00

Hello,

This issue is reported in the MAUI github repo.Please track on this issue:.Net MAUI 7 Android, Image Gif Animation Not Playing in Release Mode, Normal in Debug Mode.

Here is a workaround: please create a html and add gif in it. Use your webview to display this html page. I test it in Android emulator in release mode. it is working.

Here are detailed steps. Or use plugin to show gif in this github link.

Best Regards,

Leon Lu

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 78,511 Reputation points Microsoft Vendor

2024-05-24T06:57:46.9866667+00:00

Paul Kelley May I know if you have got any chance to check my answer? I am glad to help if you have any other questions.

UnexpectedGrit 11 Reputation points

2024-05-29T18:24:36.3366667+00:00

I'll try again...

UnexpectedGrit 11 Reputation points

2024-05-29T18:51:29.7866667+00:00

I have had a chance to check your answer. The answer did not work. Here's the answer I believe you were referring to:

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

Copy the .gif to Resources/Raw/my.gif folder of your project

Add a .html file (see below) to Resources/Raw/my.html

Add a web view: <WebView HeightRequest="200" WidthRequest="200" x:Name="webView" />

In your code behind, set the source:

webView

HTML File eg:

<html>

Here's my experience:

clinteastwood.gif copied to Resources/Raw/clinteastwood.gif

Added .html file "clinthat.html" to Resources/Raw/clinthat.html

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

Added a web view:
<WebView x:Name="ClintHatGif" VerticalOptions="Center" HeightRequest="200" />

In code behind namespace
public partial class NavOpenTechStartPage : ContentPage { public NavOpenTechStartPage() { InitializeComponent(); ClintHatGif.Source = new UrlWebViewSource { Url = "file:///android_asset/clinthat.html" }; } }

What did I get using Build Debug mode (NOT RELEASE)?

Here is a screen shot of the Emulator running a Pixel Tablet M-DPI 10.1in, and what I see is a white square on the Left-hand side, which, I'm guessing, is supposed to be my animated "gif".

So nope, in my experience, using Visual Studio 2022, .NET MAUI, Android 14.0 - API 34, this "work around" does NOT appear to work. Now, it's very possible I've missed something. I'm just surprised the "detailed steps" would fail to mention whatever I've missed.

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 78,511 Reputation points Microsoft Vendor

2024-05-30T06:38:39.45+00:00

Please click the clinteastwood.gif and clinthat.html, check the build action is MauiAsset

UnexpectedGrit 11 Reputation points

2024-05-31T16:48:36.8+00:00

I did what you suggested, but there seems to me many things I don't yet understand. I was successful, however, in getting "gif" animation to work in Build Release and Build Debug modes on Emulators and on Devices. Here's what I've learned:

So if you have learned of a way to get "gif" animation to work in Build Release and Build Debug modes for ALL Platforms, great! Show me your XAML and then your code-behind (JPG snap shots please). Also show me HTML (snap shot) for your WebView element. I'm interested in comparing what I've learned with what you know to work. Thank you for your assistance.

Rob Caplan - MSFT 5,552 Reputation points Microsoft Employee

2024-06-01T00:53:44.52+00:00

Please don't post text, including code snippets, as images - it is inaccessible and difficult to read and work with. If the text in your screenshots is important then please edit your post to include it as text.

Your previous screenshot of the WebView showing an icon rather than your animation suggests the gif file wasn't found. That's the view you'll get when an img element can't find its source.

As noted by Leon, GIFs not animating in release mode on Android is a bug that is being tracked at .Net MAUI 7 Android, Image Gif Animation Not Playing in Release Mode, Normal in Debug Mode #12974. Q&A isn't a bug reporting or tracking site, so please follow its status on github. Maui bugs are managed in the https://github.com/dotnet/maui repo.

Loading the GIF in a WebView is a workaround and wouldn't be generally recommended if the Image control worked as expected. Because the bug is specific to Android, Redth provide an Android specific workaround. Others have reported successfully using alternative rendering libraries as well.

Redth's basic concept isn't Android specific, just the actual implementation: you can set the WebView's Source in XAML without hardcoding the Android path. The following displays and animates my.gif in both Android and Windows Release mode. I don't have a Mac handy to confirm iOS, but I expect it to work there as well.

<WebView HeightRequest="200" WidthRequest="200" x:Name="webView" Source="my.html" />

"my.html" contains the following (copied from redth's)

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

my.html and my.gif are MauiAssets located in the root Resources/raw folder rather than in Platforms/Android/Resources/raw folder.

For more information on loading a WebView from a local file see WebView - Display a local HTML file

For more information on Raw assets see Raw Assets
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

.NET8 MAUI Image "gif" animation Debug vs. Release

1 answer

Your answer