Custom Loader With Popup In Xamarin.Forms

I am here with a new post on Custom Loader. The loader is very important in mobile apps.

Please see my older article, before preceding this article, and you can click here to read it. As you know, the activity indicator is to define the background process that is going on. So, start with my old project, Popup Demo.

We learned in the old article how to create popups in Xamarin Forms. Now, by moving forward with that project, we will create custom loader.

Implementation

In this demo, we are using a GIF image, and for this reason, we will use the ffimageloading plugin to display the GIF image.

Now we can install "FFImageLoading" plugins.

Then, right click on the project, click on Nuget Package.

Click browse and then search “FFImageLoading” plugins, select Plugins and then check projects in which we want to add this plugin.

Now we create 4 buttons for the navigation to the indecats loader.

1. CustomGIFLoader.xaml
2. CustomLoaderPage.xaml
3. LoadingPopupPage.xaml
4. RandomColorLoader.xaml

CustomGIFLoader.xaml

Write some XAML code for customGIFLoader.xaml, it is used for animation loader. When we do GIF, we have to make sure that the ffimageloading is referenced.

CustomGIFLoader.xaml

<?xml version="1.0" encoding="UTF-8"?>
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyPopupDemo.CustomGIFLoader"
                 xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
                 xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
                 xmlns:local="clr-namespace:App2.CustomRenderer"
                 InputTransparent="False"
                 HasSystemPadding="True"
                 CloseWhenBackgroundIsClicked="True"
                 Padding="20,100"
                 xmlns:ff="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms">
    <pages:PopupPage.Animation>
        <animations:MoveAnimation
                 PositionIn="Center"
                 PositionOut="Center"/>
    </pages:PopupPage.Animation>
    <Frame CornerRadius="15" OutlineColor="Black" HorizontalOptions="Center" VerticalOptions="Center">
        <StackLayout HorizontalOptions="FillAndExpand" >
            <Label Text="Please Wait..." TextColor="Black" FontSize="Large"/>
            <BoxView HeightRequest="1" BackgroundColor="Gray"/>
            <StackLayout Spacing="0" >
                <ff:CachedImage Source="loader3.gif"
                                HeightRequest="200"
                                WidthRequest="200"/>
                <Label Text="Loading......" TextColor="Black" />
            </StackLayout>
        </StackLayout>
    </Frame>
</pages:PopupPage>

CustomLoaderPage.xaml

Write some xaml code for CustomLoaderPage.xaml. This is used for custom message loader.

CustomLoaderPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="MyPopupDemo.CustomLoaderPage"
                 xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
                 xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
                 xmlns:local="clr-namespace:App2.CustomRenderer"
                 InputTransparent="False"
                 HasSystemPadding="True"
                 CloseWhenBackgroundIsClicked="True"
                 Padding="20,100">
    <pages:PopupPage.Animation>
        <animations:MoveAnimation
                 PositionIn="Center"
                 PositionOut="Center"/>
    </pages:PopupPage.Animation>
    <Frame CornerRadius="15" OutlineColor="Black" HorizontalOptions="Center" VerticalOptions="Center">
        <StackLayout HorizontalOptions="FillAndExpand" >
            <Label Text="In Progress" TextColor="Black" FontSize="Large"/>
            <BoxView HeightRequest="1" BackgroundColor="Gray"/>
            <StackLayout Spacing="0" Orientation="Horizontal">
                <ActivityIndicator  Color="Blue"
                                        IsRunning="True"
                                        IsEnabled="True"
                                        VerticalOptions="Center"
                                        HorizontalOptions="Center"
                                        HeightRequest="70"
                                        WidthRequest="70"/>
                <Label Text="Loading......" TextColor="Black" FontSize="Large"/>
            </StackLayout>
        </StackLayout>
    </Frame>
</pages:PopupPage>

LoadingPopupPage.xaml

Write code for LoadingPopupPage.xaml. This is used simply to indicate waiting.

LoadingPopupPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyPopupDemo.LoadingPopupPage"
             xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
             CloseWhenBackgroundIsClicked="False">
    <ActivityIndicator
    Color="White"
    IsRunning="True"
    IsEnabled="True"
    VerticalOptions="Center"
    HorizontalOptions="Center"
    HeightRequest="70"
    WidthRequest="70"/>
</pages:PopupPage>

RandomColorLoader.xaml

Write code for RandomColorLoader.xaml.

Use random color and write some C# code written for running every 1 second for changing the color.

RandomColorLoader.xaml

<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="MyPopupDemo.RandomColorLoader"
                 xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
                 xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
                 xmlns:local="clr-namespace:App2.CustomRenderer"
                 InputTransparent="False"
                 HasSystemPadding="True"
                 CloseWhenBackgroundIsClicked="True"
                 Padding="100">
    <pages:PopupPage.Animation>
        <animations:MoveAnimation
                 PositionIn="Center"
                 PositionOut="Center"/>
    </pages:PopupPage.Animation>
    <Frame CornerRadius="15" OutlineColor="Black" HorizontalOptions="Center" VerticalOptions="Center">
        <StackLayout HorizontalOptions="FillAndExpand" >
            <Label x:Name="customlbl" Text="In Progress" TextColor="Black" FontSize="Large"/>
            <BoxView x:Name="custombox" HeightRequest="1" BackgroundColor="Gray"/>
            <StackLayout Orientation="Horizontal">
                <ActivityIndicator  x:Name="customloader"
                                        Color="Blue"
                                        IsRunning="True"
                                        IsEnabled="True"
                                        VerticalOptions="Center"
                                        HorizontalOptions="Center"
                                        HeightRequest="70"
                                        WidthRequest="70"/>
                <Label x:Name="customsg" Text="Loading......" TextColor="Black" FontSize="Large"/>
            </StackLayout>
        </StackLayout>
    </Frame>
</pages:PopupPage>

This is C# code for random color changing.

public partial class RandomColorLoader : PopupPage
    {
        Random random = new Random();
        public RandomColorLoader ()
        {
            InitializeComponent ();
            Device.StartTimer(TimeSpan.FromSeconds(1), () =>
            {
                custombox.Color = customlbl.TextColor = customsg.TextColor =
                     customloader.Color =
                Color.FromRgb(random.Next(0, 255), random.Next(0, 255), random.Next(0, 255));
                // True = Repeat again, False = Stop the timer
                return true;
            });
        }
    }

Now, we are running.

The custom loader is working successfully.

If you want to see this video, click Here

G

M

T

Detect languageAfrikaansAlbanianArabicArmenianAzerbaijaniBasqueBelarusianBengaliBosnianBulgarianCatalanCebuanoChichewaChinese (Simplified)Chinese (Traditional)CroatianCzechDanishDutchEnglishEsperantoEstonianFilipinoFinnishFrenchGalicianGeorgianGermanGreekGujaratiHaitian CreoleHausaHebrewHindiHmongHungarianIcelandicIgboIndonesianIrishItalianJapaneseJavaneseKannadaKazakhKhmerKoreanLaoLatinLatvianLithuanianMacedonianMalagasyMalayMalayalamMalteseMaoriMarathiMongolianMyanmar (Burmese)NepaliNorwegianPersianPolishPortuguesePunjabiRomanianRussianSerbianSesothoSinhalaSlovakSlovenianSomaliSpanishSundaneseSwahiliSwedishTajikTamilTeluguThaiTurkishUkrainianUrduUzbekVietnameseWelshYiddishYorubaZulu

AfrikaansAlbanianArabicArmenianAzerbaijaniBasqueBelarusianBengaliBosnianBulgarianCatalanCebuanoChichewaChinese (Simplified)Chinese (Traditional)CroatianCzechDanishDutchEnglishEsperantoEstonianFilipinoFinnishFrenchGalicianGeorgianGermanGreekGujaratiHaitian CreoleHausaHebrewHindiHmongHungarianIcelandicIgboIndonesianIrishItalianJapaneseJavaneseKannadaKazakhKhmerKoreanLaoLatinLatvianLithuanianMacedonianMalagasyMalayMalayalamMalteseMaoriMarathiMongolianMyanmar (Burmese)NepaliNorwegianPersianPolishPortuguesePunjabiRomanianRussianSerbianSesothoSinhalaSlovakSlovenianSomaliSpanishSundaneseSwahiliSwedishTajikTamilTeluguThaiTurkishUkrainianUrduUzbekVietnameseWelshYiddishYorubaZulu

Text-to-speech function is limited to 200 characters

Options : History : Feedback : Donate

Close