svgxamarin.formsxamarin.androidsplash-screen

Create Android splash screen using SVG animation


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)


Solution

  • 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.

    enter image description here