Create Android splash screen using SVG animation - svg

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.