Xamarin.Forms Startup Animation

This lesson shows you how to create a light-weight startup animation after the Splash Screen using ScaleTo and FadeTo transitions in Xamarin.Forms.

When creating this project, I started from the base Prism.Forms project in Visual Studio 2019. This way, its easy for you to reproduce this on your own using the standard content.

Package	NuGet
Xamarin.Forms
Prism.Forms	Prism.Forms
DryIoc	Prism.DryIoc.Forms

Prism is a framework for building loosely coupled, maintainable, and testable XAML applications.

Hiding Splash Animation Navigation

After validating our animation, we need to hide UI stuff such as the Navigation Bar. To do so we need to add, NavigationPage.SethasNavigationBar(this, false); inside the constructor of our SplashPage.xml.cs file.

public SplashPage()
{
  InitializeComponent();

  // Hide navigation bar
  NavigationPage.SetHasNavigationBar(this, false);
}

Further Mods

To hide status bar, we'll need to perform some native-side code.

Single Page Use

NOTE: THIS IS UNTESTED!!

Create the IStatusBar interface in our client-side project

public interface IStatusBar
{
  void HideStatusBar();
  void ShowStatusBar();
}

Android:

public class StatusBarImplementation : IStatusBar
{
  WindowManagerFlags _originalFlags;

  public void HideStatusBar()
  {
    var activity = (Activity)Forms.Context;
    var attrs = activity.Window.Attributes;
    _originalFlags = attrs.Flags;
    attrs.Flags |= Android.Views.WindowManagerFlags.Fullscreen;
    activity.Window.Attributes = attrs;
  }
  public void ShowStatusBar()
  {
    var activity = (Activity)Forms.Context;
    var attrs = activity.Window.Attributes;
    attrs.Flags = _originalFlags;
    activity.Window.Attributes = attrs;
  }
}

iOS:

public class StatusBarImplementation : IStatusBar
{
  WindowManagerFlags _originalFlags;

  public void HideStatusBar()
  {
    var activity = (Activity)Forms.Context;
    var attrs = activity.Window.Attributes;
    _originalFlags = attrs.Flags;
    attrs.Flags |= Android.Views.WindowManagerFlags.Fullscreen;
    activity.Window.Attributes = attrs;
  }
  public void ShowStatusBar()
  {
    var activity = (Activity)Forms.Context;
    var attrs = activity.Window.Attributes;
    attrs.Flags = _originalFlags;
    activity.Window.Attributes = attrs;
  }
}

Inside our SplashPage

// to hide
DependencyService.Get<IStatusBar>().HideStatusBar();
// to show
DependencyService.Get<IStatusBar>().ShowStatusBar();

References

This code snip was borrowed from a StackOverflow discussion on Hide StatusBar for Specific ContentPage 2

For the whole app

For Android it would be the following in the Activity's OnCreate (i.e. MainActivity):

this.Window.AddFlags(WindowManagerFlags.Fullscreen); //to show
this.Window.ClearFlags(WindowManagerFlags.Fullscreen); //to hide

And for iOS, you'd open your Info.plist and add the following lines:

<key>UIStatusBarHidden</key><true/>
<key>UIViewControllerBasedStatusBarAppearance</key><false/>

Without Prism

For use with standard Xamarin Navigation stack, check out this article at Mallibone.com

image from mallibon.com