Animated Splash Screen with Magic Gradients
How make Splash Screen with animated Magic Gradients? Pros and Cons of these Splash Screens. What can go wrong here?
Hi folks, all we know is that we can use images as splash-screen. Also, some of you know what we might use LottieAnimationView
as an animated splash screen. Similarly, that gives me an idea that we can use Magic Gradients with Animations to build a āCustom Splash Screenā with some animations.
So, how we will do that:
- Move all initialization(leave only Xamarin.Forms) from default place to special interface.
- Add new Xamarin.Forms Page ā which will be our new splash screen.
- Initialize all at the new page while an animation is shown for a user.
Quite simple ā right? In that case, letās describe each step in detail.
Initial Solution
We have our awesome Application with beautiful Home Page. But loading of all NuGet packages and initialising all required components takeās 5 second on each platform š„ŗ. This is sad. But! We can make wait time not so bored if will show some smooth animations ā we thought.
In that case, we need to create a new interface where we will move all our platform initialization from OnCreate
method inside MainActivity
for Android and from FinishedLaunching
method inside AppDelegate
.
Letās name it IPlatformInitializer
and place inside our Xamarin.Forms project:
Remark: inside I will use Simple Injector IoC Container, but the proposed solution is applicable for any modern IoC Provider.
Android Platform Initializer
Letās create AndroidPlatformInitializer
class and implement IPlatformInitializer
. For that we need to move everything that can be inialised after Xamarin.Froms from OnCreate
method inside MainActivity
and register our implementation into IoC.
iOS Platform Initializer
Letās create iOSPlatformInitializer
class and implement IPlatformInitializer
. For that we need to move everything that can be inialised after Xamarin.Froms from FinishedLaunching
method inside AppDelegate
and register our implementation into IoC.
Yeah, I know 1ā1 like we have done that for Android š„±, but hold on, next thing we will create Animated Magic Gradient Background.
Xamarin.Forms Splash Page
Now letās create SplashPage
inside Xamarin Project. We may create that without any Page Model because we donāt plan to make some complex logic. At code behind inside Constructor, we need to set BindingContext
to true
thatās required for bind IsRunning
of AnimationTrigger
because we canāt just set True
value inside XAML. This is not a problem if we use standard MVVM architecture but in our case where we donāt plan to have View Model, we need to make that dirty trick š¤Ŗ.
Inside OnAppearing
method, we need setup all our dependencies and after that change a MainPage
on Main Thread
.
Iām not sure is the way to easily explain in two words how elements should be placed inside XAML. So, I create some kind of diagram, where I showed how elements are placed inside a page:
Now, I think we can explain how to make animation with a gradient. We will create GradientView
which should fill and expand the entire space. This is our background. It should have two same colour gradient. One of them should be changed with ColorAnimation ā AnimationTrigger
. Also, we need to set that animation RepeatBehavior=āForeverā AutoReverse=āTrueā
and duration ā not too fast and not too slow ā Duration=ā3000"
(3s).On top of it we place white Label with text āMagic Gradientsā. And thatās it, pretty simple, right? š±
Now to see that change inside App.xaml.cs
MainPage to SplashPage:
MainPage = new SplashPage();
Now, our apps starting with short white screen and our beautiful animated Gradient background. And this is not so bad, and we even can leave with that. But we may start with the initial colour of our gradient to make the process of changing the platform splash to our page invisible for users.
Android Native Splash Screen
There are a thousand examples of how to make it, but I will go with slightly another way š
. I tried according to examples separate splash screen XML file with TextView
inside, but itās not working for me. I donāt think making a text with transparent background is a good idea, so I just change a background colour inside our main activity and donāt create any other. Helpfully it starts quite fast thanks to one activity and no other NuGet initialisation at the beginning.
iOS Native Splash Screen
The same is here, just place a screenshot from xCode where shows that I just change background color and add a white text āMagic Gradientsā with the same font size and font family as in Xamarin Splash Page. Also, quite important to do not forget to check info.plist file and ensure that our Launch Screen.storyboard is linked there.
<string>Launch Screen</string><key>CFBundleName</key>
And thatās it, Folks! Please follow my Twitter account to get all updates about blog posts or my speeches š š. Good luck with your projects š