Need Help: Splashscreen for android 12 using Vue/Capacitor

[Christoph33444]

I'm building a Vue/Capacitor app that allows users to input data and generate a PDF. It's a single-page app with 10 input fields, and it's being tested on an emulator via Android Studio.

The issue I'm facing is with the splash screen behavior on Android 12+. When launching the app, I see two splash screens:

The first splash screen shows the app icon centered on a colored background — I believe this is the Android 12 system splash.

After about 10 seconds, it transitions to a completely white screen that lasts another 6–10 seconds before the app finally loads.

I want to remove the second white screen entirely and have the Android 12 splash until the app is ready. The app doesn't use network and should load quickly, so this delay seems excessive.

Here’s my current setup:

AndroidManifest:

`
type

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">

    <activity
        android:screenOrientation="portrait"
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode|navigation"
        android:name=".MainActivity"
        android:label="@string/title_activity_main"
        android:theme="@style/Theme.MyApp.Splash"
        android:launchMode="singleTask"
        android:exported="true">

        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>

    </activity>

    <provider
        android:name="androidx.core.content.FileProvider"
        android:authorities="${applicationId}.fileprovider"
        android:exported="false"
        android:grantUriPermissions="true">
        <meta-data
            android:name="android.support.FILE_PROVIDER_PATHS"
            android:resource="@xml/file_paths" />
    </provider>
</application>

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.INTERNET" />

`

Styles.xml:
`

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

<style name="Theme.MyApp.Splash" parent="Theme.SplashScreen">
    <item name="windowSplashScreenAnimatedIcon">@mipmap/ic_launcher</item>
    <item name="windowSplashScreenBackground">@color/splash_bg</item>
    <item name="postSplashScreenTheme">@style/AppTheme.NoActionBar</item>
</style>

`

MainActivity.java:

`package.com.begginer1app

import android.os.Bundle;
import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {
@OverRide
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
}
`

[YCistak]

The second screen you're seeing isn't a splash screen at all — it's your window background, and that's why none of the splash-screen settings make it go away.

Here's the actual sequence on Android 12+:

1. The system splash draws windowSplashScreenAnimatedIcon on windowSplashScreenBackground. This one cannot be disabled — every app gets it.
2. The system splash is dismissed and your activity takes over with postSplashScreenTheme, i.e. AppTheme.NoActionBar.
3. The WebView exists but hasn't painted its first frame yet. During that gap the only thing on screen is the activity's android:windowBackground.

Your AppTheme.NoActionBar inherits from Theme.AppCompat.DayNight.NoActionBar and never sets android:windowBackground, so step 3 paints the AppCompat default — white in light mode. That's your white screen.

The fix

Give the post-splash theme the same background as the splash:

<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>

    <!-- visible from splash dismissal until the WebView paints its first frame -->
    <item name="android:windowBackground">@color/splash_bg</item>
    <item name="android:background">@color/splash_bg</item>
</style>

Once the two colours match, step 2→3 is invisible: the user sees one continuous screen instead of a splash followed by a white flash.

Two things worth knowing while you're in there:

DayNight will bite you. If your web UI is always light but the phone is in dark mode, Theme.AppCompat.DayNight.* resolves that window background to a near-black. You get a dark frame wedged between the splash and your app. If the app has no dark theme, use Theme.AppCompat.Light.NoActionBar instead of DayNight.

Two logos read as two splashes. If your own app renders a logo on first paint, the system splash icon plus your logo look like two consecutive splash screens even when the colours match. You can leave only the background from the system splash by pointing the icon at a transparent drawable:

<!-- res/drawable/splash_empty.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <size android:width="1dp" android:height="1dp" />
    <solid android:color="@android:color/transparent" />
</shape>

<item name="windowSplashScreenAnimatedIcon">@drawable/splash_empty</item>

Omitting the attribute doesn't work — the system falls back to your launcher icon. It has to be an explicitly transparent shape.

About the 10 seconds

The colour fix removes the flash, not the delay. The Android 12 system splash is around a second at most; 10 seconds means something else is holding the app. Two things to check:

• Is @capacitor/splash-screen installed? Its launchShowDuration defaults to 3000 ms and it will sit there whether or not your web layer is ready. Either lower it, or set launchAutoHide: false and call SplashScreen.hide() yourself once the app has actually rendered.
• Attach chrome://inspect from desktop Chrome to the running WebView and watch the Network/Performance panel during a cold start. For a 10-input single-page app the web layer should boot in well under a second; if it doesn't, the time is going into your bundle, not into Capacitor.