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
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
Borges
Thank you, you helped me alot.
07/11/2017
Zack
Exactly what I was looking for thank you.
16/02/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 Zack on How to add a Xamarin Forms Loading Screen/Overlay
16 Feb 2018, 17:52 PM
By TimothyTow on MVC forms in Umbraco
14 Feb 2018, 16:17 PM
By TimothyTow on MVC forms in Umbraco
14 Feb 2018, 15:59 PM
By Jungle on Replacing the Xamarin Header/Navigation bar with a custom view/template
5 Feb 2018, 22:23 PM
By efsef on Using Umbraco Route Hijacking and posting to it
31 Jan 2018, 16:38 PM
By Jonny G on Replacing the Xamarin Header/Navigation bar with a custom view/template
31 Jan 2018, 11:13 AM
By Ben Konop on Fixed: Visual Studio Xamarin - 'The ResolveLibraryProjectImports task failed unexpectedly'
29 Jan 2018, 20:02 PM
By Luke Alderton on Replacing the Xamarin Header/Navigation bar with a custom view/template
17 Jan 2018, 15:30 PM
Categories
App Development
Event
Game Development
Mapping
Modelling
Programming
Review
Robotics
Tutorial
Web Development