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.

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.