banner image

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
Progress Bar in Xamarin Forms Progress Bar in Xamarin Forms Reviewed by SP Tutorials on November 26, 2019 Rating: 5

6 comments:

  1. Very informative article, which you have shared here about progress bar. After reading your article I got very much information and it is very useful for us. I am thankful to you for sharing this article here. mobile app developers denver

    ReplyDelete
  2. It's a nice article, Which you have shared here about progress bar. Your article is very interesting and I really liked the way you expressed your views in this post. Thank you. Oracle fusion instance access

    ReplyDelete
  3. How can use like progress bar like rating bar like review

    ReplyDelete
  4. I really want to thank the author for such a nice blog that helped me to understand why it is important. Custom Software Melbourne

    ReplyDelete
  5. I want to thank the author for such a nice blog that helped me to understand the Progress Bar.

    ReplyDelete
  6. After Finished the work, a message should be display in front our mobile screen. That's like you told me in your blog. After doing work, everything should be reported. If your residential doors does not working and you repaired it. You just check it. I am also give this service. if you want to get service. You must Visit our website. Thank you

    ReplyDelete

Powered by Blogger.