Damir's Corner.

Busy Overlay in Xamarin.Forms

During long-running blocking operations such as login, the application UI should be disabled and the user should get visual feedback that some processing is in progress. Although there is an ActivityIndicator in Xamarin.Forms, there's no easy built-in way to create an overlay.

This is where the Popup Page Plugin for Xamarin Forms can come in handy. It can be used to create popup pages with minimum amount of code. Just make sure that you don't forget to add the well-documented initialization code to your project after you install the NuGet package.

I created a simple busy overlay popup page to reuse throughout my application:

<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
                 x:Class="BusyOverlay.Views.BusyPopupPage"
                 CloseWhenBackgroundIsClicked="False">
    <ContentPage.Content>
        <StackLayout VerticalOptions="Center">
            <ActivityIndicator IsRunning="True" />
        </StackLayout>
    </ContentPage.Content>
</pages:PopupPage>

As you can see, it's just an ActivityIndicator in the middle of the screen. The important part is the CloseWhenBackgroundIsClicked="False" attribute that prevents the popup from being dismissed by tapping on it. You wouldn't want that with a busy overlay.

To use it, you can simply push the page onto the plugin's navigation stack before the long-running operation and pop it afterward. Of course, the overlay must also be dismissed in case of errors, so it's best to pop the page in a finally block:

await PopupNavigation.Instance.PushAsync(new BusyPopupPage());

try
{
    // simulate long-running operation
    await Task.Delay(2000);

    await Shell.Current.GoToAsync($"//{nameof(AboutPage)}");
}
finally
{
    await PopupNavigation.Instance.PopAsync();
}

I created a sample application to demonstrate this approach. Its code is in my GitHub repository.

The Popup Page Plugin for Xamarin Forms is a great tool for handling popup pages in your Xamarin.Forms applications. I used it to create a simple reusable busy overlay.