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
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 PS on Replacing the Xamarin Header/Navigation bar with a custom view/template
16 Apr 2018, 07:53 AM
By Srusti Thakkar on How to add a Xamarin Forms Loading Screen/Overlay
27 Mar 2018, 18:22 PM
By Luke on How to add a Xamarin Forms Loading Screen/Overlay
23 Mar 2018, 15:03 PM
By Srusti Thakkar on How to add a Xamarin Forms Loading Screen/Overlay
23 Mar 2018, 13:16 PM
By Marco Teodoro on Custom section tree nodes and routes - Umbraco
21 Mar 2018, 11:08 AM
By ttt asd on Limit Google Autocomplete results to country and city
20 Mar 2018, 11:53 AM
By hamid on Limit Google Autocomplete results to country and city
19 Mar 2018, 21:13 PM
By matt on Auto/Custom height on Xamarin Forms WebView for Android and iOS
17 Mar 2018, 02:18 AM
Categories
App Development
Event
Game Development
Mapping
Modelling
Programming
Review
Robotics
Tutorial
Web Development