Configure Android Splash Screen Settings for TF-App

The @capacitor/splash-screen plugin controls the native loading screen displayed on Android while the Capacitor WebView initializes and your Vite app boots. TF-App uses version ^7.0.1 of this plugin, configured entirely through the plugins.SplashScreen block in capacitor.config.json. No Java or Kotlin changes are needed for the options documented on this page.

SplashScreen Configuration Block

"plugins": {
  "SplashScreen": {
    "launchShowDuration": 2000,
    "launchAutoHide": true,
    "backgroundColor": "#1E88E5",
    "androidSplashResourceName": "splash",
    "androidScaleType": "CENTER",
    "showSpinner": false,
    "androidSpinnerStyle": "horizontal",
    "iosSpinnerStyle": "small",
    "spinnerColor": "#FFFFFF",
    "splashFullScreen": true,
    "splashImmersive": true,
    "layoutName": "launch_screen",
    "useIconBackground": true,
    "webLinearGradient": "linear-gradient(135deg, #1E88E5 0%, #0D47A1 100%)"
  }
}

Option Reference

launchShowDuration

number

How long the splash screen remains visible, in milliseconds, before it is automatically hidden. Only applies when launchAutoHide is true.Current value: 2000 (2 seconds)

launchAutoHide

boolean

When true, the splash screen dismisses itself after launchShowDuration milliseconds. When false, the splash persists indefinitely until you call SplashScreen.hide() manually from JavaScript — useful for hiding the splash only after your data has loaded.Current value: true

backgroundColor

string

The hex color used as the splash screen background on Android. This fills the area behind the splash image drawable, so it shows through any transparent regions in the PNG.Current value: #1E88E5 (Material Blue 600)

androidSplashResourceName

string

The name (without extension) of the drawable resource file used as the splash image. Capacitor looks for this file in android/app/src/main/res/drawable*/. The default drawable directories are drawable, drawable-land-hdpi, drawable-land-mdpi, etc.Current value: splash → resolves to splash.png in each drawable folder

androidScaleType

string

Controls how the splash drawable is scaled to fit the screen. Mirrors Android’s ImageView.ScaleType enum.

Value	Behavior
`CENTER`	Centers the image at its natural size; does not scale.
`CENTER_CROP`	Scales uniformly to fill the screen; may crop edges.
`CENTER_INSIDE`	Scales down to fit within the screen; never upscales.
`FIT_CENTER`	Scales to fit within the screen, maintaining aspect ratio.
`FIT_START`	Same as `FIT_CENTER` but aligned to the top-left.
`FIT_END`	Same as `FIT_CENTER` but aligned to the bottom-right.
`FIT_XY`	Stretches the image to fill the screen exactly; distorts if aspect ratio differs.

Current value: CENTER

showSpinner

boolean

When true, renders a loading spinner on top of the splash image while the WebView loads.Current value: false

androidSpinnerStyle

string

Style of the Android spinner when showSpinner is true. Accepted values: horizontal, small, large, inverse, smallInverse, largeInverse.Current value: horizontal

iosSpinnerStyle

string

Style of the iOS spinner when showSpinner is true. Accepted values: small, large.Current value: small

TF-App targets Android only — there is no iOS project in this repository. This option is present in capacitor.config.json but has no effect on TF-App builds. It is safe to leave it in place if you plan to add an iOS target in the future.

spinnerColor

string

Hex color applied to the loading spinner when showSpinner is true. Applies to both Android and iOS.Current value: #FFFFFF (white)

splashFullScreen

boolean

When true, hides the Android status bar (the top bar showing time and notifications) for the duration of the splash screen, giving the launch screen a full-height appearance.Current value: true

splashImmersive

boolean

When true, hides both the status bar and the bottom navigation bar during the splash screen, providing a fully immersive full-screen launch experience.Current value: true

layoutName

string

The name of the Android layout XML file to use as the splash screen layout. Capacitor looks for this in android/app/src/main/res/layout/. The default Capacitor-generated layout is launch_screen.Current value: launch_screen

useIconBackground

boolean

When true, applies the backgroundColor behind the adaptive icon on API 31+ devices that use the Android 12 splash screen API. Ensures consistent branding on newer devices.Current value: true

webLinearGradient

string

A CSS gradient string used as the splash background when running TF-App in a desktop browser (e.g., npm run dev or npm run preview). This value has no effect on the compiled Android APK — it is a browser-only preview aid.Current value: linear-gradient(135deg, #1E88E5 0%, #0D47A1 100%)

webLinearGradient only affects how the splash looks in a browser preview session. The Android native splash screen uses backgroundColor and the drawable resource specified in androidSplashResourceName. Changes to webLinearGradient require no cap sync.

Hiding the Splash Manually

By default, TF-App auto-hides the splash after 2000 ms (launchAutoHide: true). For a smoother experience — especially on screens that fetch data before rendering — you can take manual control:

Disable auto-hide in capacitor.config.json

"SplashScreen": {
  "launchAutoHide": false
}

Call SplashScreen.hide() when ready

Import the plugin and hide the splash after your data or view is fully initialized:

import { SplashScreen } from '@capacitor/splash-screen';

async function initApp() {
  // Fetch initial data, authenticate user, etc.
  await loadUserSession();
  await fetchDashboardData();

  // Now dismiss the splash screen
  await SplashScreen.hide();
}

initApp();

Sync and rebuild

npm run build && npx cap sync android

For real estate apps like TF-App where the initial view depends on authentication state, setting launchAutoHide: false and calling SplashScreen.hide() after the login check completes prevents users from seeing a blank white screen between the splash and the authenticated dashboard.

Replacing the Splash Image

The splash image is a set of PNG drawables stored in the Android resource directories. To replace the default Capacitor splash with TF-App’s branded artwork:

Locate the drawable directories

The splash PNGs live at:

android/app/src/main/res/
├── drawable/splash.png
├── drawable-land-hdpi/splash.png
├── drawable-land-mdpi/splash.png
├── drawable-land-xhdpi/splash.png
├── drawable-land-xxhdpi/splash.png
├── drawable-land-xxxhdpi/splash.png
├── drawable-port-hdpi/splash.png
├── drawable-port-mdpi/splash.png
├── drawable-port-xhdpi/splash.png
├── drawable-port-xxhdpi/splash.png
└── drawable-port-xxxhdpi/splash.png

Generate correctly sized assets

Each density bucket requires a different pixel dimension. Use Android Studio’s Image Asset Studio (File → New → Image Asset → Launch Icons) or a tool like @capacitor/assets to generate all sizes from a single high-resolution source image (recommended: 2732×2732 px PNG with transparent background).

npx @capacitor/assets generate --android

Replace the files

Copy your new splash.png files into each drawable directory, keeping the filename splash to match androidSplashResourceName in capacitor.config.json.

Rebuild the Android project

npm run build && npx cap sync android

Then open Android Studio and run Build → Clean Project before deploying to ensure no stale cached drawables remain.

Get Started

Core Features

Configuration

Android Deployment

Development Guide

Configure Android Splash Screen Settings for TF-App

SplashScreen Configuration Block

Option Reference

Hiding the Splash Manually

Replacing the Splash Image

Build docs developers (and LLMs) love

Get Started

Core Features

Configuration

Android Deployment

Development Guide

Documentation Index

​SplashScreen Configuration Block

​Option Reference

​Hiding the Splash Manually

​Replacing the Splash Image

Build docs developers (and LLMs) love

SplashScreen Configuration Block

Option Reference

Hiding the Splash Manually

Replacing the Splash Image