Xamarin Forms Gif Loading Icon

Hi friends in this article we will talk about how to add gif to our mobile application. Design is very important for our applications. If you are tired of using an activity indicator you can get over it with a gif. Not only the loading icon, you can also get beautiful screens in design. It’s really easy to use. First we need to find a gif. Here you can find many free loading gifs from the site. I’ll use the gif below as an example.

For this, we need to install a package to our project. This package is: FFImageLoading. Detailed information and source codes can be found here. I always use this package in every project. It has very useful features like cachleming photos and plache holder. After you install the package with Nuget Package Manager, you must run these packages. To do this, you must initialize the MainActivity class on the Android side in the AppDelegate for iOS. For more detailed documentation, see the source code in Github.

After installing the package I will make a simple design on the screen. I’ll just play the gif on the black screen. To do this, I use an FFCache Image control in StackLayout and just give me the name of my gif file.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="Xam.LoadingGif.Views.MainPage"
             xmlns:ff="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms">
    <ContentPage.Content>
        <StackLayout HorizontalOptions="FillAndExpand"
                     VerticalOptions="FillAndExpand"
                     BackgroundColor="Black">
            <ff:CachedImage HorizontalOptions="CenterAndExpand"
                            VerticalOptions="CenterAndExpand"
                            WidthRequest="120"
                            HeightRequest="80"
                            Source="loading" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

The output of this is as follows.

If you have questions, you can reach us by e-mail or comment. Good work for everyone.