Mortal Kombat App using Xamarin.Forms (MAUI) Part 2

I posted a post about the parallax effect a few weeks ago (Part 1). So I decided to write a new one with more details and a link to the source code. In this repository, you could find simple animations, a custom native music player, embedded resources (fonts, mp3, and images), popups (Rg.Plugin.Popup), and something more.

Simple Animations

You can create simple and beautiful animations just by using classes out-of-the-box.

Xamarin.Forms includes its own animation infrastructure that's straightforward for creating simple animations, while also being versatile enough to create complex animations (docs).

I suggest you watch two videos (video 1, video 2) to quickly understand how to create animation yourself.

Card flipping

I want to show you some of the code that is used to flip the card on each side. As you can see, the animation is really easy to create. You just need to spend a few minutes reading some documentation.

private async Task FlipViewAsync()
{
    VisualElement visibleElement, hiddenElement;

    if (!_isDetailsVisible)
    {
        visibleElement = FrontOfCard;
        hiddenElement = BackOfCard;
    }
    else
    {
        visibleElement = BackOfCard;
        hiddenElement = FrontOfCard;
    }

    visibleElement.RotationY = 0;
    hiddenElement.RotationY = -90;

    const uint animationLength = 1000;

    var animation = new Animation
    {
        {0, 0.5, new Animation(rotation => visibleElement.RotationY = rotation, 0, -90, Easing.Linear)},
        {0.5, 1, new Animation(rotation => hiddenElement.RotationY = rotation, -270, -360, Easing.Linear)}
    };

    animation.Commit(this, new Random().Next(0, int.MaxValue).ToString(), 10, animationLength, repeat: () => false);
    
    await Task.Delay((int) animationLength);
    
    visibleElement.RotationY %= 360;
    hiddenElement.RotationY %= 360;

    _isDetailsVisible = !_isDetailsVisible;
}

Embedded Resources

I want to invite you to learn about embedded resources (docs).

What exactly are Embedded Resources?

Like Local Resources in each native project, Embedded Resources are shipped with an application but it has the peculiarity that these are not contained in each application’s file structure, but the file is embedded in the assembly project as a resource.

This approach to using resources removes a lot of time for converting and placing images, sounds, and other resources for each platform will save your time and make your project lighter!

Project structure with Embedded Resources

⚠ But you need to remember one very important thing! This approach is only useful if the resources used are identical for each platform.

In this demo, I used embedded images, sounds, and fonts. I also recommend watching a short video on this topic.

Rg.Plugin.Popup

There is also a really cool popup plugin with different customizations.

Rg.Plugins.Popup - is a cross-platform plugin for Xamarin.Forms that allow opening Xamarin.Forms pages as a popup that can be shared across iOS, Android, and UWP (macOS supporting will be soon). Also, the plugin allows using of very simple and flexible animations for showing popup pages.

Please take a look at this repository. There is a nice and simple wiki to help you implement and use this plugin.

Character Info popup

FFImageLoading

During application development, if we need to add many images, we must memorize that resource consumption will increase by as many images as we add, which will affect device memory and application performance. That is why I will recommend you an effective way to improve device performance and improve resource usage. Please pay attention to this repository.

What is FFImageLoading?

Library to load images quickly & easily on Xamarin.iOS, Xamarin.Android, Xamarin.Forms, Xamarin.Mac / Xamarin.Tizen and Windows (UWP, WinRT).

Examples of using FFImageLoading

Start page image code:

<ffImageLoading:CachedImage
    x:Name="StartButton"
    Source="{extensions:FFImageResource Source={x:Static helpers:Constants+Images.Logo}}"
    Aspect="AspectFit"
    DownsampleToViewSize="True"
    Margin="70" />

Character cell image code:

<ffImageLoading:CachedImage
    Source="{Binding Source={x:Reference Cell}, Path=Character.Image, Converter={StaticResource ResourceToResourcePathConverter}}"
    Aspect="AspectFit"
    TranslationX="{Binding Source={x:Reference Cell}, Path=Character.ParallaxTranslation}"
    HorizontalOptions="CenterAndExpand"
    VerticalOptions="End" />

GarbageCollector.config

If you want to improve, for example, scroll performance and remove scroll glitches, I highly recommend that you learn about garbage collection (docs).

As you can see in the source code, the Android project contains the file "GarbageCollector.config". And this file contains just one line of code:

MONO_GC_PARAMS=nursery-size=32m

This line helps the android project to be smoother.

Follow this link and learn more about configuring the garbage collector.

Summary

I think you have been convinced that you can create great applications using standard tools. In this project, I used out-of-the-box things and some NuGet packages, and, as it seems to me, this turned out to be a beautiful and rather interesting UI.

I hope you find something important in this article. Improve your development skills and create cool apps with Xamarin.Forms (MAUI).