Android Splash Screen Logos and Animations with Xamarin

Android 12 has a few surprises for mobile developers, and its new splash screen is one of the most notorious. In previous versions of the SDK, you needed to create an activity if you wanted to customize the splash screen. However, we now have access to the splash screen API to customize the screen. You can read more about it here and here.

In this post I will show Xamarin mobile developers how to use the new properties to include an icon on the splash screen. Also, I will demonstrate how to perform a basic animation on the splash screen so we can test out this new feature.

Android Icon and Resources

First, we need the appropriate images set in the app. You can use the default Xamarin.Forms icons, but I’ll use Trailhead’s logo :). I’ll begin by replacing the icons. I’m using IconKitchen to generate all the files for every screen size quickly:

Best tool ever!

Download the zip file, and after you are done replacing the resources, your solution should look something like this:

Note I’ve replaced the default icon with ic_launcher.xml.

Now, there are additional changes we need to make. In our style.xml file, we need to define the splash screen properties for our theme:

Updating the MainTheme style

“windowSplashScreenBackground” is the background color for the splash screen. It will attempt to calculate it from “windowBackground” if we don’t set it.

“windowSplashScreenAnimatedIcon” is what interests us in this example. It replaces an icon in the center of the starting window. If the object is animated and drawable, it will also play the animation while showing the starting window.

Remember, these values only work for the API level 31 or newer and will be ignored on older versions.

So far, so good.

Android Animation

Now, let’s get into the more complicated part. You can perform the animation with a png, but I would advise against it because animations usually transform and distort the content and you might not get the desired result. Different-sized PNGs were meant to be used in earlier versions of Android when nobody knew how many screen sizes manufacturers would create. SVGs are the safest option here because it won’t matter on which screen it’s drawn; it will scale to fit it perfectly.

Having said that. If you don’t have an SVG file, you can either ask your local designer to create one, or you can use FreeConvert to generate one (you might need to clean the result a bit, though).

The Android splash screen dimensions follow the same specifications as Adaptive icons. If you need to adjust your image, you can use a free editor, like Method Draw.

Resizing my icon to 80 x 80 within a 240 x 240 canvas

Open Shapeshifter and import your SVG file. If it’s not in a group, you must create one and move your layers under that group. Notice there’s a small clock to the right of each layer. That’s where we can set an animation for our SVG. Sadly, you can only add an alpha transition to the vector, hence you need to create a group. Groups can create rotations, scaling, translations, and so on. You can read more about it here.

First, check the dimensions of your vector and set the pivot by half of the height and width in your group. This will make the animation origin in the center.

Double-check the width and height of your vector
I’m setting the pivots X and Y with half of the height and width of the vector.

Now you can set the animation in the group. In this example, I’ve decided to use a rotation animation with an alpha transition.

The Android documentation suggests 1 second for the animations
The alpha transition settings from 0 (transparent) to 1 (opaque)
The rotation animation settings

Once you are happy with the result, export it as an “Animated Vector Drawable” and add it to your Android project.

Don’t forget to replace the old icon with your new animated icon. Also, you might need to add the animation duration:

“windowSplashScreenAnimationDuration” was introduced in API 31. It was meant to be used to set the animation duration. Sadly, it had a short life. It was deprecated in API 33 because the app can infer the animation duration based on the animated vector drawable you’ve set.

Now let’s see the result!

Not so bad, huh? Now you know how to include animations in your splash screens.

BONUS TRACK: Branding

Want to add a branding image to the splash screen? Sure! You only need to set the “android:windowSplashScreenBrandingImage” property:

And this is the outcome:

I hope this can help you. As always, you can check the source code here. Happy coding!

Related Blog Posts

We hope you’ve found this to be helpful and are walking away with some new, useful insights. If you want to learn more, here are a couple of related articles that others also usually find to be interesting:

Our Gear Is Packed and We're Excited to Explore with You

Ready to come with us? 

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the form below. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

This field is for validation purposes and should be left unchanged.

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the form below. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

Montage Portal

Montage Furniture Services provides furniture protection plans and claims processing services to a wide selection of furniture retailers and consumers.

Project Background

Montage was looking to build a new web portal for both Retailers and Consumers, which would integrate with Dynamics CRM and other legacy systems. The portal needed to be multi tenant and support branding and configuration for different Retailers. Trailhead architected the new Montage Platform, including the Portal and all of it’s back end integrations, did the UI/UX and then delivered the new system, along with enhancements to DevOps and processes.

Logistics

We’ve logged countless miles exploring the tech world. In doing so, we gained the experience that enables us to deliver your unique software and systems architecture needs. Our team of seasoned tech vets can provide you with:

Custom App and Software Development

We collaborate with you throughout the entire process because your customized tech should fit your needs, not just those of other clients.

Cloud and Mobile Applications

The modern world demands versatile technology, and this is exactly what your mobile and cloud-based apps will give you.

User Experience and Interface (UX/UI) Design

We want your end users to have optimal experiences with tech that is highly intuitive and responsive.

DevOps

This combination of Agile software development and IT operations provides you with high-quality software at reduced cost, time, and risk.

Trailhead stepped into a challenging project – building our new web architecture and redeveloping our portals at the same time the business was migrating from a legacy system to our new CRM solution. They were able to not only significantly improve our web development architecture but our development and deployment processes as well as the functionality and performance of our portals. The feedback from customers has been overwhelmingly positive. Trailhead has proven themselves to be a valuable partner.

– BOB DOERKSEN, Vice President of Technology Services
at Montage Furniture Services

Technologies Used

When you hit the trails, it is essential to bring appropriate gear. The same holds true for your digital technology needs. That’s why Trailhead builds custom solutions on trusted platforms like .NET, Angular, React, and Xamarin.

Expertise

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

  • Project Management
  • Architecture
  • Web App Development
  • Cloud Development
  • DevOps
  • Process Improvements
  • Legacy System Integration
  • UI Design
  • Manual QA
  • Back end/API/Database development

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

Our Gear Is Packed and We're Excited to Explore with You

Ready to come with us? 

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the contact form. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

This field is for validation purposes and should be left unchanged.

Thank you message.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.