Progress indicator with Xamarin Forms

Progress indicator is available in Xamarin Forms and here it is called as “activity indicator”. It renders different on different devices as progress indicator is not general UI feature everywhere. This blog post shows how to use progress indicator with Xamarin Forms.

How progress indicator works

For short this is how to get progress indicator work:

  1. Add acticity indicator to page
  2. Bidn IsBusy and IsRunning property to view model
  3. Set property to turn on activity indicator
  4. Set property to switch it off

Adding progress indicator to page

I suppose you already have view model that implements INotifyPropertyChanged. Add the following property to view model.

private bool _isBusy;
public bool IsBusy
{
    get { return _isBusy; }
    set
    {
        _isBusy = value;
        OnPropertyChanged();
    }
}

Set this property to true or false in data loading methods. One example is here.

public void LoadData()
{
    IsBusy = true;

    // load and process data

    IsBusy = false;
}

Next let’s add activity indicator to page.

<ActivityIndicator 
IsVisible
="{Binding IsBusy}" 
IsRunning
="{Binding IsBusy}" />

As we have specified anything about design the activity indicator will be rendered using default settings.

This is how activity indicator looks on UWP, Android and Tizen.

Xamarin Forms: Activity indicator in action
Click on image to see it at original size.

Wrapping up

Xamarin Forms has progress indicator but it is called activity indicator. It can be bound to view model and this way it is easy to turn it on and off. Here we didn’t made any improvements to its design and still indicator looks okay on different platforms.

Gunnar Peipman

Gunnar Peipman is ASP.NET, Azure and SharePoint fan, Estonian Microsoft user group leader, blogger, conference speaker, teacher, and tech maniac. Since 2008 he is Microsoft MVP specialized on ASP.NET.

    2 thoughts on “Progress indicator with Xamarin Forms

    • July 28, 2017 at 4:06 pm
      Permalink

      Hi,

      You mention IsBusy and IsRunning viewmodel properties, but you are binding both ActivityIndicator properties to the same IsBusy view model property. Also, in the view model the property implementation is for IsLoading and the LoadData() method updates IsLoaded.

    • July 31, 2017 at 4:18 pm
      Permalink

      Thanks for pointing out the problems. Issues are solved now.

    Leave a Reply

    Your email address will not be published. Required fields are marked *