Xamarin.Forms Custom Loader

Hello xamarians,

How are you all, Hope all are good. I am here with a new post on (Custom Loader). Popups are very important in mobile apps.

Please see my older article, before proceeding this article, and url is Click Here

You know very well activity indicator is to define the background process is going on. So start with my old project(Popup Demo).

We learned in the old article how do we create popups in xamarin.forms. So now, by moving forward from that project, we will create custom loader.

Implementation:-

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

Step-1

Now we can install "FFImageLoading" plugins

Now, Right click on project then 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 reference.

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 for simply 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 of random color in 1 second 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 running ………….

TADDA!!!!!!!!!!!!

working custom loader successfully……

If you are lazzy download click here 

If you want to watch this video, Click Here