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 😋
