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.

Xamarin

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.

Xamarin

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.

Xamarin

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

  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"   
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              x:Class="MyPopupDemo.CustomGIFLoader"  
  5.                  xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"  
  6.                  xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"  
  7.                  xmlns:local="clr-namespace:App2.CustomRenderer"  
  8.                  InputTransparent="False"  
  9.                  HasSystemPadding="True"  
  10.                  CloseWhenBackgroundIsClicked="True"  
  11.                  Padding="20,100"  
  12.                  xmlns:ff="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms">  
  13.     <pages:PopupPage.Animation>  
  14.         <animations:MoveAnimation  
  15.                  PositionIn="Center"  
  16.                  PositionOut="Center"/>  
  17.     </pages:PopupPage.Animation>  
  18.     <Frame CornerRadius="15" OutlineColor="Black" HorizontalOptions="Center" VerticalOptions="Center">  
  19.         <StackLayout HorizontalOptions="FillAndExpand" >  
  20.             <Label Text="Please Wait..." TextColor="Black" FontSize="Large"/>  
  21.             <BoxView HeightRequest="1" BackgroundColor="Gray"/>  
  22.             <StackLayout Spacing="0" >  
  23.                 <ff:CachedImage Source="loader3.gif"   
  24.                                 HeightRequest="200"  
  25.                                 WidthRequest="200"/>  
  26.                 <Label Text="Loading......" TextColor="Black" />  
  27.             </StackLayout>  
  28.         </StackLayout>  
  29.     </Frame>  
  30. </pages:PopupPage>  

CustomLoaderPage.xaml

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

CustomLoaderPage.xaml

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.                  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.                  x:Class="MyPopupDemo.CustomLoaderPage"  
  5.                  xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"  
  6.                  xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"  
  7.                  xmlns:local="clr-namespace:App2.CustomRenderer"  
  8.                  InputTransparent="False"  
  9.                  HasSystemPadding="True"  
  10.                  CloseWhenBackgroundIsClicked="True"  
  11.                  Padding="20,100">  
  12.     <pages:PopupPage.Animation>  
  13.         <animations:MoveAnimation  
  14.                  PositionIn="Center"  
  15.                  PositionOut="Center"/>  
  16.     </pages:PopupPage.Animation>  
  17.     <Frame CornerRadius="15" OutlineColor="Black" HorizontalOptions="Center" VerticalOptions="Center">  
  18.         <StackLayout HorizontalOptions="FillAndExpand" >  
  19.             <Label Text="In Progress" TextColor="Black" FontSize="Large"/>  
  20.             <BoxView HeightRequest="1" BackgroundColor="Gray"/>  
  21.             <StackLayout Spacing="0" Orientation="Horizontal">  
  22.                 <ActivityIndicator  Color="Blue"  
  23.                                         IsRunning="True"  
  24.                                         IsEnabled="True"  
  25.                                         VerticalOptions="Center"  
  26.                                         HorizontalOptions="Center"  
  27.                                         HeightRequest="70"  
  28.                                         WidthRequest="70"/>  
  29.                 <Label Text="Loading......" TextColor="Black" FontSize="Large"/>  
  30.             </StackLayout>  
  31.         </StackLayout>  
  32.     </Frame>  
  33. </pages:PopupPage>  

LoadingPopupPage.xaml

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

LoadingPopupPage.xaml

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              x:Class="MyPopupDemo.LoadingPopupPage"  
  5.              xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"  
  6.              CloseWhenBackgroundIsClicked="False">  
  7.     <ActivityIndicator  
  8.     Color="White"  
  9.     IsRunning="True"  
  10.     IsEnabled="True"  
  11.     VerticalOptions="Center"  
  12.     HorizontalOptions="Center"  
  13.     HeightRequest="70"  
  14.     WidthRequest="70"/>  
  15. </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

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.                  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.                  x:Class="MyPopupDemo.RandomColorLoader"  
  5.                  xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"  
  6.                  xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"  
  7.                  xmlns:local="clr-namespace:App2.CustomRenderer"  
  8.                  InputTransparent="False"  
  9.                  HasSystemPadding="True"  
  10.                  CloseWhenBackgroundIsClicked="True"  
  11.                  Padding="100">  
  12.     <pages:PopupPage.Animation>  
  13.         <animations:MoveAnimation  
  14.                  PositionIn="Center"  
  15.                  PositionOut="Center"/>  
  16.     </pages:PopupPage.Animation>  
  17.     <Frame CornerRadius="15" OutlineColor="Black" HorizontalOptions="Center" VerticalOptions="Center">  
  18.         <StackLayout HorizontalOptions="FillAndExpand" >  
  19.             <Label x:Name="customlbl" Text="In Progress" TextColor="Black" FontSize="Large"/>  
  20.             <BoxView x:Name="custombox" HeightRequest="1" BackgroundColor="Gray"/>  
  21.             <StackLayout Orientation="Horizontal">  
  22.                 <ActivityIndicator  x:Name="customloader"  
  23.                                         Color="Blue"  
  24.                                         IsRunning="True"  
  25.                                         IsEnabled="True"  
  26.                                         VerticalOptions="Center"  
  27.                                         HorizontalOptions="Center"  
  28.                                         HeightRequest="70"  
  29.                                         WidthRequest="70"/>  
  30.                 <Label x:Name="customsg" Text="Loading......" TextColor="Black" FontSize="Large"/>  
  31.             </StackLayout>  
  32.         </StackLayout>  
  33.     </Frame>  
  34. </pages:PopupPage>  

This is C# code for random color changing.

  1. public partial class RandomColorLoader : PopupPage  
  2.     {  
  3.         Random random = new Random();  
  4.         public RandomColorLoader ()  
  5.         {  
  6.             InitializeComponent ();  
  7.             Device.StartTimer(TimeSpan.FromSeconds(1), () =>  
  8.             {  
  9.                 custombox.Color = customlbl.TextColor = customsg.TextColor =  
  10.                      customloader.Color =  
  11.                 Color.FromRgb(random.Next(0, 255), random.Next(0, 255), random.Next(0, 255));  
  12.                 // True = Repeat again, False = Stop the timer  
  13.                 return true;  
  14.             });  
  15.         }  
  16.     }  

Now, we are running.

Xamarin

The custom loader is working successfully.


If you want to see this video, click Here