Built my first Tauri app layout — cross platform Linux and Android

21 March 2026

Today I figured out how Tauri works and built the layout for my first cross platform application targeting Linux and Android.

What is Tauri

Tauri is a framework for building desktop and mobile apps using web technologies for the UI and Rust for the backend. Think of it like Electron but way lighter — instead of bundling a whole Chromium browser, it uses the system’s native webview.

This means:

  • Much smaller bundle size than Electron
  • Lower memory usage
  • Rust backend for performance and safety
  • Same codebase for Linux, Windows, macOS, Android, iOS

How it works

your web UI (HTML/CSS/JS or any framework)
        ↓
Tauri wraps it in a native window
        ↓
communicates with Rust backend via commands
        ↓
Rust handles system level stuff
        ↓
ships as a native .deb, .apk, .exe etc

The webview white flash problem

When a Tauri app starts on Android, it shows a brief white screen before your UI loads — looks terrible especially on dark themed apps.

The fix needs two parts — a native Android splash screen that shows instantly before WebView loads, and a CSS fade transition into the app.

Step 1 — Native Android splash drawable

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <color android:color="#0f0f0f"/>
    </item>
</layer-list>

Step 2 — Update themes.xml

Set the window background, status bar and navigation bar all to dark:

<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="Theme.while" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="android:windowBackground">@drawable/splash</item>
        <item name="android:statusBarColor">#0f0f0f</item>
        <item name="android:navigationBarColor">#0f0f0f</item>
    </style>
</resources>

Apply same to both values/themes.xml and values-night/themes.xml.

Step 3 — CSS fade in

Add this to app.html so the app fades in smoothly after WebView loads:

html, body {
  background: #0f0f0f;
  margin: 0;
  padding: 0;
}

body {
  animation: appFadeIn 0.4s ease forwards;
}

@keyframes appFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

How it works now

app tap
  ↓
Android shows #0f0f0f instantly (native, zero delay)
  ↓
WebView loads in background (still dark)
  ↓
Svelte renders → fades in smoothly (0.4s)
  ↓
app is ready — no white flash!

What I learned

  • Tauri uses system webview — much lighter than Electron
  • Android webview flash needs to be fixed at native level not just CSS
  • The splash drawable shows before WebView even starts loading
  • CSS fade handles the transition from native to web smoothly
  • Same fix pattern works for any Tauri Android app