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  

Popup in Xamarin.Forms

Hello Xamarians,

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

Friends, when I came for the first time to use popup, I was confused about the kind of popup to use and how can I get that into the xamarin forms. I searched a lot on the internet and found a plugin (RG.plugin popup) to design a popup. With the help of this plugin, we can easily create Popup in Xamarin forms. This plugin save a lot of time and effort. In my next post I will tell you about how to apply animation on Rg.Plugins.Popup.

Implementation:-

1.  Open Visual Studio and select a New Project.
2.  Now, select Cross-Platform App, give project name and set the project path. Then click OK.
3.  Select the template as "Blank App" and code sharing as "PCL".

Step-1

Now we can install Rg.Plugins.Popup

1.  Right click on project then click on Nuget Package.
2.  Click  browse and then search Rg.Plugins.Popup, select Plugins and  then check projects in which we want to add  this plugin.

Step-2

Now we are going to xaml Code section and  write some button click code in MainPage.xaml

<?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:local="clr-namespace:MyPopupDemo"
x:Class="MyPopupDemo.MainPage">
<StackLayout>
<Label Text="Pop Up Demo" Font="Bold,24"
VerticalOptions="CenterAndExpand" 
HorizontalOptions="CenterAndExpand" />
<Button VerticalOptions="StartAndExpand" 
HorizontalOptions="CenterAndExpand" 
Text="Popup"
Font="Bold,20"
Clicked="Button_Clicked"
BackgroundColor="Aqua"/>
</StackLayout>
</ContentPage>

Then write code for popup navigation..

private async void Button_Clicked(object sender, EventArgs e)
{
await PopupNavigation.PushAsync(new ShowPopupDemo());
}

Step-3

Now we are creating ShowPopupDemo.xaml for creating popup..

<?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.ShowPopupDemo"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
BackgroundColor="Transparent">
<pages:PopupPage.Animation>
<animations:ScaleAnimation 
PositionIn="Center"
PositionOut="Center"
ScaleIn="1.2"
ScaleOut="0.8"
DurationIn="400"
DurationOut="300"
EasingIn="SinOut"
EasingOut="SinIn"
HasBackgroundAnimation="False"/>
</pages:PopupPage.Animation>
<StackLayout VerticalOptions="Center" Padding="20,0" HorizontalOptions="FillAndExpand" >
<Frame CornerRadius="10" Padding="0" BackgroundColor="CadetBlue" >
<StackLayout Padding="10">
<Label Text="First Popup Page" TextColor="Black" FontSize="20" HorizontalOptions="Center"></Label>
<ScrollView>
<StackLayout>
<Label Text="Hello Xamarin Guys" TextColor="Red"/>
<StackLayout Orientation="Horizontal">
<Label Text="This is Very Awesome Popup Plugins For Xamarin forms" TextColor="LightBlue"/>
<Button Text="Close" TextColor="Black" Clicked="Button_Clicked" ></Button>
</StackLayout>
</StackLayout>
</ScrollView>
</StackLayout>
</Frame>
</StackLayout>
</pages:PopupPage> 

Now we are coding in C#

  private async void Button_Clicked(object sender, EventArgs e)
{
await PopupNavigation.PopAsync(true);
}

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

My Popup Page is working… :)

If you want to full source code click Here

and video url click Here

If you are lazzy download click here  

If you want to watch this video, Click here 
=============================================================

Rg.Plugins.Popup Override Methods

        //Methods for supporting animations in your popup page

        // Invoked before an animation appearing

        void OnAppearingAnimationBegin()

=============================================================      

        // Invoked after an animation appearing

        void OnAppearingAnimationEnd()

=============================================================

        // Invoked before an animation disappearing

         void OnDisappearingAnimationBegin()

=============================================================

        // Invoked after an animation disappearing

         void OnDisappearingAnimationEnd()

=============================================================

         // Invoked  Async

         Task OnAppearingAnimationBeginAsync()

         Task OnAppearingAnimationEndAsync()
         Task OnDisappearingAnimationBeginAsync()
         Task OnDisappearingAnimationEndAsync()

=============================================================

        // Override methods which can prevent closing a popup page

        // Invoked when a hardware back button is pressed

         bool OnBackButtonPressed()   ============================================================

        // Invoked when background is clicked

         bool OnBackgroundClicked()