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 Jamessobia on MVC forms in Umbraco
11 Dec 2018, 13:17 PM
By Andrewjek on Umbraco Get Current Member or Member By ID
10 Dec 2018, 17:27 PM
By Nigad42 on MVC forms in Umbraco
10 Dec 2018, 09:41 AM
By Robertflose on MVC forms in Umbraco
9 Dec 2018, 10:31 AM
By Otutu90 on Displaying text on a 16x2 LCD screen with a Raspberry Pi
9 Dec 2018, 01:58 AM
By Dufox53 on Moving SQL Server System Tables
8 Dec 2018, 22:12 PM
By Tepul31 on Moving SQL Server System Tables
8 Dec 2018, 21:48 PM
By Petas22 on Umbraco Get Current Member or Member By ID
8 Dec 2018, 20:04 PM
Categories
App Development
Event
Game Development
Mapping
Modelling
Programming
Review
Robotics
Tutorial
Web Development