Android splash screen styling

Since Android 12 the splash screen of your Android app is always your app icon. If you want to change the styling of the splash screen you can create a custom theme and set a background color, custom icon or even an animation.

At first you’ll need to get your start activity name. The quickest way to get that is to build your app and look at the last log lines before it is starting your app. It will be something like this:

[INFO]  Installing app on device: Pixel 9 
[INFO]  App successfully installed
[INFO]  Starting app: com.miga.myapp/.AppNameActivity

The last line is showing the activity name. It is the same as your tiapp.xml <name> node without spaces and Activity at the end. In my case the name is <name>App Name</name>.

Then you’ll need to add a new node in your <android> node in the tiapp.xml file:

<android xmlns:android="http://schemas.android.com/apk/res/android">
 <manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1">

  <application android:icon="@mipmap/ic_launcher">
   <activity android:name=".AppNameActivity" android:theme="@style/Theme.Custom.Splash" />
  </application>

 </manifest>
</android>

Here we will say that it should load a new theme that will have our custom settings.

Now create a file mytheme.xml in app/platform/android/res/values/ and add this content:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!-- theme for splashscreen -->
    <style name="Theme.Custom.Splash" parent="@style/Theme.MaterialComponents.NoActionBar">
        <item name="android:windowSplashScreenBackground">#023047</item>
        <item name="android:windowSplashScreenAnimatedIcon">@drawable/logo</item>
    </style>

</resources>

and place a file called logo.png inside app/platform/android/res/drawable/. The file can also be a drawable or even an animated gif. Some recommended sizes can be found in the official Android documentation: https://developer.android.com/develop/ui/views/launch/splash-screen#dimensions

If you want to add another image (200×80) at the bottom of the splash screen you can add:

<item name="android:windowSplashScreenBrandingImage">@drawable/brandimage</item>

to the theme.

windowSplashScreenBackground is the background color of the whole splash screen and windowSplashScreenAnimatedIcon will be the icon that is displayed in the circular cutout. By default it will be transparent but there is also another item: <item name="android:windowSplashScreenIconBackgroundColor">#ff0</item> that you can use to define the background color of the circle.

To test it and see the splash screen longer you can just remove your main $.index.open() or win.open() from your first controller. That way it will stay at the splash screen.