How to add a Xamarin Forms Loading Screen/Overlay

« Back to list of posts

A very quick tutorial on how to add a loading overlay window with a throbber in your Xamarin Forms mobile application.

To add a loading overlay, the solution is simple. Extend the class for the view/page to include 'INotifyPropertyChanged', see below for an example:

public partial class LoginPage : ContentPage, INotifyPropertyChanged

Then add these variables and methods to the class:

private bool isLoading;
public bool IsLoading
{
    get
    {
        return this.isLoading;
    }

    set
    {
        this.isLoading = value;
        RaisePropertyChanged("IsLoading");
    }
}

public event PropertyChangedEventHandler PropertyChanged;

public void RaisePropertyChanged(string propName)
{
    if (PropertyChanged != null)
    {
        PropertyChanged(this, new PropertyChangedEventArgs(propName));
    }
}

Then add the following, straight after 'InitializeComponent();':

IsLoading = false;
BindingContext = this;

Then you need to set the 'IsLoading' variable to true just before you call the long running code such as a logging request that waits on a web server to respond. When the code has been executed, set 'IsLoading' back to false. Note: the function that executes this, needs to be asynchronous.

Then it's just a case on wrapping your xaml page in an 'AbsoluteLayout' and adding the below as the last thing before closing the 'AbsoluteLayout':

<ContentView x:Name="actIndBackground"
BackgroundColor="#222222" Opacity="0.5"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1"
IsVisible="{Binding IsLoading}">
</ContentView>
<ActivityIndicator x:Name="actInd"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1"
IsRunning="{Binding IsLoading}"
IsVisible="{Binding IsLoading}" />

By Luke Alderton at 1 Sep 2016, 10:18 AM

Tags:

Comments

Gaurav
Thanks. It Worked !
30/12/2016
Hemanth
What if i had lots of Absolute layouts which would load different Views and it takes lot of time navigating to the content page. What should i do in this case?
02/01/2017
Ajay
Thanks for sharing , it's working fine and very clean to understand.
22/06/2017
Ajay
Thanks for sharing , it's working fine and very clean to understand.
22/06/2017
Ajay
Thanks for sharing , it's working fine and very clean to understand.
22/06/2017
Ajay
Thanks for sharing , it's working fine and very clean to understand.
22/06/2017

Post a comment

Please correct the following:
Share with