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 gf on Xamarin forms - Stop/Cancel back button event
16 Oct 2018, 17:32 PM
By AEndumpbub on Reducing Umbraco memory usage by enabling 32-bit applications
13 Oct 2018, 07:04 AM
By nseo-sw.men on MVC forms in Umbraco
12 Oct 2018, 11:30 AM
By JM on Solved: You need to use a Theme.AppCompat theme (or descendant) with this activity
10 Oct 2018, 13:36 PM
By praveen on Xamarin Forms - Working with threads
5 Oct 2018, 12:05 PM
By Jasonced on MVC forms in Umbraco
27 Sep 2018, 05:41 AM
By Евгения on MVC forms in Umbraco
27 Sep 2018, 02:47 AM
By Wokeq62 on Using SQL DataTables to speed up database performance
25 Sep 2018, 17:28 PM
Categories
App Development
Event
Game Development
Mapping
Modelling
Programming
Review
Robotics
Tutorial
Web Development