Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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; }
    set
    {
        _isLoading = value;
        OnPropertyChanged();
    }
}

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.

<ActivityIndicator 
    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.

Topics:
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 }}