Xamarin.Forms extended splash page

An extended splash page comes into play when during start up external resources have to be loaded and displayed to the user. One requirement every mobile app (independent of platform) has to fulfill is stay responsive or else the mobile OS will kill the application which usually is an undesired user experience. The extended loading page usually looks quite similar to the splash screen though I strongly recommend to give the user an indication that your app is loading/initializing/you-name-it which is much more pleasant user experience.

Adding an extended splash page

The UI in the extended splash page is rather simple, display the same logo as on the splash screen, show a load indicator and a label to indicate the user what is going on.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamarinFormsExtendedSplashPage.ExtendedLoadingPage">
  <StackLayout VerticalOptions="Center">
    <ActivityIndicator IsVisible="True" IsRunning="True" Color="Blue" />
    <Label Text="Loading" VerticalOptions="Center" HorizontalOptions="Center" />
  </StackLayout>
</ContentPage>

The label can show more detail if need be as in loading report 3 of 10 this really depends on how long it takes to load all the data for your app, the longer it takes the more detail is recommended as it gives the user a feel of progress. The above XAML page will display a basic extended splash page.

Removing the extended splash page from the navigation stack

As of Xamarin.Forms 1.3 you can manipulate the navigation stack. So once all the resources are loaded from the page navigate to the root page of the app.

protected override void OnAppearing()
{    
    base.OnAppearing();
    Navigation.RemovePage(Navigation.NavigationStack[0]);
}

Now we can remove the extended splash page from the navigation stack.

Conclusion

With Xamarin.Forms 1.3 the extended splash screen got a lot easier to implement and allows you to present your user with a pleasant user experience.

You can find the complete sample on here.