Cara Paling Masuk Akal Bikin Splash Screen Android di React Native via XML

Pernah buka aplikasi Android terus langsung disambut layar putih kosong yang bikin ilfeel sebelum masuk ke menu utama? Masalah klasik ini sering banget terjadi saat aplikasi butuh waktu inisialisasi di awal. Solusi standarnya jelas: pasang splash screen.

Banyak developer pemula buru-buru bikin komponen React murni dengan timer buatan cuma buat nampilin logo. Padahal, pendekatan yang jauh lebih fleksibel dan tepat di ekosistem Android adalah mengeksekusinya langsung di level native menggunakan file XML dan tema terpisah dari aktivitas utama aplikasi.

Berikut bedah teknis dan langkah implementasinya tanpa ribet.

Kenapa Harus XML Native dan Aktivitas Terpisah?

Splash screen pada dasarnya adalah grafis yang muncul persis saat aplikasi Android pertama kali diluncurkan. Fungsinya sederhana tapi vital: memamerkan identitas seperti logo atau nama aplikasi, sekaligus bisa jadi wadah indikator loading ketika proses startup berjalan di balik layar.

Mengimplementasikan splash screen sebagai aktivitas terpisah alih-alih menempelkannya langsung ke dalam aktivitas utama aplikasi memberikan keuntungan besar dari sisi desain. Kita dapat memanfaatkan format grafis khusus yang fleksibel, di mana aset visual bisa diskalakan dan diubah ukurannya agar tetap terlihat konsisten di berbagai ukuran serta resolusi layar tanpa pecah.

Berikut panduan langkah demi langkah menyusun konfigurasinya langsung di folder native Android.

Langkah 1: Inisialisasi Project di Android Studio

Buka Android Studio, lalu buat project baru melalui jalur menu standar: Menu -> File -> New Project.


Create New Project Android Studio

Pastikan codebase Android sudah terbuka sempurna dan proses indexing selesai sebelum lanjut mengutak-atik direktori resource.

Langkah 2: Menyiapkan File Drawable XML

Langkah berikutnya adalah menyiapkan aset grafis. Masuk ke direktori: app → src → main → res → drawable

Buat folder drawable jika belum ada, lalu buat file baru bernama splash_screen.xml. File ini akan menjadi wadah grafis splash screen yang siap dipanggil oleh sistem tema Android.

Langkah 3: Konfigurasi Theme pada styles.xml

Arahkan struktur folder ke: app → src → main → res → values → styles.xml

Tambahkan konfigurasi tema kustom di dalam file tersebut. Kita akan mengatur agar tema aplikasi langsung memanggil aset @drawable/splash_screen sebagai window background dan mengaktifkan mode fullscreen.

xml
<resources>  
    <!-- Base application theme. -->  
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar"> <!-- Customize your theme here with custom splash screen-->  
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>  
        <item name="android:windowBackground">@drawable/splash_screen</item>  
        <item name="android:windowFullscreen">true</item> 
    </style>  
</resources>

Langkah 4: Menentukan Palet Warna di colors.xml

Agar visual splash screen punya warna latar yang pas, kita perlu mendefinisikan kodenya. Buka atau buat file baru bernama colors.xml pada direktori: app → src → main → res → values → colors.xml

Masukkan kode warna hex untuk background splash screen:

xml
<?xml version="1.0" encoding="utf-8"?>  
<resources>  
    <color name="splash_background">#35386f</color>  
</resources>

Langkah 5: Binding Tema ke AndroidManifest.xml

Langkah pemungkas yang paling krusial ada di file manifest. Masuk ke AndroidManifest.xml, lalu pastikan atribut android:theme pada tag <application> sudah diarahkan ke @style/AppTheme yang tadi sudah diracik pada file styles.

xml
<application  
      android:name=".MainApplication"  
      android:label="@string/app_name"  
      android:icon="@mipmap/ic_launcher"  
      android:roundIcon="@mipmap/ic_launcher_round"  
      android:allowBackup="false"  
      <!-- Our Customize theme. -->  
      android:theme="@style/AppTheme">  
      <activity  
        android:exported="true"  
        android:name=".MainActivity"  
        android:label="@string/app_name"  
...  
...

Hasil Akhir

Setelah semua file tersimpan dan aplikasi di-build ulang, splash screen akan langsung muncul mulus saat pertama kali aplikasi dibuka sebelum aktivitas utama mengambil alih layar.


Splash Screen Dongeng Indonesia

Setup via XML native ini jauh lebih rapi, konsisten terhadap berbagai resolusi, dan langsung menyelesaikan masalah layar kosong saat aplikasi baru dinyalakan.

Tags :