Progress Bar in Xamarin Forms

A progress bar visually represents the progress of  any operation,such as downloads,installation or file transfer.A progress bar may be a horizontal or a circular bar that shows the percent value.So here we are going to create a progress bar inside a popup page in xamarin forms application.

Here I already added a popup page using Rg.Plugin.Popup.If you don't know how to create a popup page,then follow this link Modal Popup in Xamarin Forms.

Here is the code for implementing progress bar:

<?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"
             xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
             xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
             x:Class="ProgressBarSample.ProgressBarPopup">
    <pages:PopupPage.Animation>
        <animations:ScaleAnimation 
            PositionIn="Center"
            PositionOut="Center"
            ScaleIn="1.2"
            ScaleOut="0.8"
            DurationIn="400"
            DurationOut="300"
            EasingIn="SinOut"
            EasingOut="SinIn"
            HasBackgroundAnimation="True"/>
    </pages:PopupPage.Animation>

    <Frame VerticalOptions="CenterAndExpand" HorizontalOptions="Center" CornerRadius="10" 
           Margin="20" Padding="20" HeightRequest="150">
        <StackLayout Margin="20" VerticalOptions="CenterAndExpand">
            <Label Text="Progress Bar" FontSize="Large" FontAttributes="Bold"/>
            <ProgressBar ProgressColor="Green" HeightRequest="20" 
                         WidthRequest="400" x:Name="progressbar"/>
            <Label Text="" HorizontalOptions="EndAndExpand" x:Name="progressLabel" FontAttributes="Bold" FontSize="Medium"/>
        </StackLayout>
    </Frame>
</pages:PopupPage>

Here I am using a simple logic for increase the progress bar progress,but in reality we should have to implement our own business logic for changing the progress bar progress. Here I am using ProgressColor to show the color of progress.

• Progress takes float value.The min value is 0 and max value is 1.Zero means progress bar not started and One means progress bar progress completed.
• We can also animate our progress by using Animation.In this example we are using Easing.Linear animation.

Here is the sample logic for showing progress.

public partial class ProgressBarPopup : PopupPage
    {
        float maxValue = 1;
        float progressmax = 10;
        bool istimerRunning = true;
        float progress = 0;
        int counter = 1;
        public ProgressBarPopup()
        {
            InitializeComponent();

            Device.StartTimer(TimeSpan.FromSeconds(2), () =>
             {
                 if (progress >= 1)
                 {
                     istimerRunning = false;
                     Navigation.PopPopupAsync();
                 }
                 else
                 {
                     progress += maxValue / progressmax;
                     progressbar.ProgressTo(progress, 500, Easing.Linear);
                     progressLabel.Text = $"{counter}/{progressmax}";
                     counter += 1;
                 }

                 return istimerRunning;
             });
        }
    }

To get the source code : Progress Bar Example 

You also can watch the video for more details : Progress Bar in Xamarin Forms