Create Android splash screen using SVG animation

Question

I am developing an app using Xamarin.Forms and I am trying to insert the splash screen to my Android project.

I found a few tutorials for creating a splash screen with a background color and a static png image, but I want to use my svg animation as splash screen. I thought I could follow a tutorial for static image and just replace the png image with the svg animation, but it didn't work. Here's what I have so far:

On SplashActivity.cs:

[Activity(Label = "SplashActivity", Theme = "@style/Theme.Splash", MainLauncher = true, NoHistory = true)]
    public class SplashActivity : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Create your application here
        }

        protected override void OnResume()
        {
            base.OnResume();
            Task startupWork = new Task(() => { SimulateStartup(); });
            startupWork.Start();
        }

        async void SimulateStartup()
        {
            await Task.Delay(5000);
            StartActivity(new Intent(Application.Context, typeof(MainActivity)));
        }
    }

On MainActivity.cs:

// I only changed the MainLauncher property to false
[Activity(Label = "MyApp", Icon = "@mipmap/icon", Theme = "@style/MainTheme", MainLauncher = false, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize )]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        ...
    }

On styles.xml (in the Xamarin.Android project):

<style name="Theme.Splash" parent="android:Theme">
    <item name="android:windowBackground">@drawable/desenhando5s</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">true</item>
    <item name="colorPrimaryDark">#004632</item>
  </style>

When I run the application, it only shows a black screen as splash screen and then shows my login page as always. Can anybody tell me what I have to do to set my animation as the splash screen?

(FYI: in case anyone wants to know, I created the animation using SVGator)

Answer 1

You could use FFImageLoading to load your svg image in your SplashActivity instead of set it in styles.xml.

Splash screen:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FFImageLoading.Views.ImageViewAsync
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>

Code:

protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);

        // Create your application here

        SetContentView(Resource.Layout.layout5);

        var filePath = "check";
        var imageView = FindViewById<ImageView>(Resource.Id.imageView);
        ImageService.Instance.LoadCompiledResource(filePath).WithCustomDataResolver(new SvgDataResolver(64, 0, true)).Into(imageView);
    }
    protected override void OnResume()
    {
        base.OnResume();
        Task startupWork = new Task(() => { SimulateStartup(); });
        startupWork.Start();
    }
    async void SimulateStartup()
    {
        await Task.Delay(5000);
        StartActivity(new Intent(Application.Context, typeof(MainActivity)));
    }

Updated:

Please check the screenshot. The .svg image is in the drawable folder. The layout5 is the splash screen in the layout folder.