How to add a Xamarin Forms Loading Screen/Overlay

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}" />

Published at

Tags:

Luke Alderton

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
Borges
Thank you, you helped me alot.
07/11/2017
Zack
Exactly what I was looking for thank you.
16/02/2018
Srusti Thakkar
But Xamarin Forms best practice suggest that try not to use Absolute Layout, because it might be affect the performance of an app. So is this good way?
23/03/2018
Luke
Hi Srusti, that may be the case, but Xamarin is riddled with bugs and sometimes you've gotta use absolute layout, there's no way around it. Also in some cases, the Absolute Layout type is faster than a Stack Layout.
23/03/2018
Srusti Thakkar
But this is displaying animation like top to bottom data are binding in IOS, so how can we display data without any animations?
27/03/2018
Kiran Lad
Hi, I have applied above code in my application but still not getting the loader on click of button. below is the code of xaml page can anyone please help me out on this private void btnApp_Clicked(object sender, EventArgs e) { IsLoading = true; TaskActions("Approve", "comments"); IsLoading = false; }
29/05/2018
Post a comment
Sit tight...
We're adding your comment.
Thank you.
Your comment has been added.
There's been a problem.
Please try again later.
Share with
Tags
Latest Comments
By Luke on Auto/Custom height on Xamarin Forms WebView for Android and iOS
15 Jun 2018, 09:43 AM
By vikki on Auto/Custom height on Xamarin Forms WebView for Android and iOS
14 Jun 2018, 13:35 PM
By jimbo on JQuery Unobtrusive Validation for dynamically created elements
13 Jun 2018, 17:13 PM
By ScottKem on MVC forms in Umbraco
8 Jun 2018, 10:29 AM
By Alaa on java.lang.UnsatisfiedLinkError: no rxtxSerial in java.library.path
3 Jun 2018, 20:16 PM
By Robertfrold on MVC forms in Umbraco
3 Jun 2018, 12:11 PM
By Kiran Lad on How to add a Xamarin Forms Loading Screen/Overlay
29 May 2018, 06:39 AM
By jake on Xamarin forms - Stop/Cancel back button event
26 May 2018, 15:24 PM
Categories
App Development
Event
Game Development
Mapping
Modelling
Programming
Review
Robotics
Tutorial
Web Development