Over a million developers have joined DZone.

Progress Indicator With Xamarin Forms

DZone's Guide to

Progress Indicator With Xamarin Forms

In this post, we take a look at how you can make the activity indicator work in the Xamarin Forms view model for mobile development.

· Mobile Zone ·
Free Resource

A progress indicator called “activity indicator” is available in Xamarin Forms. It renders differently on different devices as a progress indicator is not a general UI feature everywhere. This post shows how to use a progress indicator with Xamarin Forms.

How the Progress Indicator Works

In short, this is how to get the progress indicator to work:

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

Adding Progress Indicator to a Page

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

private bool _isLoading;
public bool IsLoading
    get { return _isLoading; }
        _isLoading = value;

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

public void LoadData()
    IsLoaded = true;       // load and process data

    IsLoaded = false;

Next, let’s add the activity indicator to the page.

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

As we haven't specified anything about design, the activity indicator will be rendered using default settings.

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

Xamarin Forms: Activity indicator in action

Wrapping Up

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

xamarin ,mobile ,ui ,xamarin forms ,mobile app development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}