Membuat Splash Screen Android hanya dengan file XML React Native

Splash Screen adalah grafis yang ditampilkan saat aplikasi Android diluncurkan. Basanya digunakan untuk menampilkan logo atau nama aplikasi. Splash Screen juga dapat digunakan untuk menampilkan loading indikator saat aplikasi pertama dimulai.

Kali ini kita akan mengimplementasikan Splash Screen sebagai aktivitas terpisah, bukan diintegrasikan langsung ke dalam aktivitas utama aplikasi. Kelebihannya memungkinkan lebih banyak fleksibilitas dalam hal desain dan implementasi.

Kita akan menambahkan gambar pada tampilan splash screen. Ini adalah format gambar khusus yang memungkinkan gambar diubah ukurannya dan diskalakan untuk terlihat konsisten di berbagai ukuran dan resolusi layar.

1. Langkah Pertama.

Buat Sebuah project dengan cara : Menu -> File -> New Project

Create New Project Android Studio

2. Langkah Kedua.

Lalu buat sebuah folder dengan nama drawable di folder app → src → main → res → drawable . Buatlah sebuah file dengan nama splash_screen.xml lalu masukan kode seperti ini.

3. Langkah Ketiga.

Tambahkan kode dibawah ini pada file app → src → main → res → values → styles.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>

4. Langkah Keempat.

Buat sebuah File bernama app → src → main → res → values → colors.xml lalu tambahkan kode dibawah ini.

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

5. Langkah Kelima

Pastikan Bahwa di AndroidManifest.xml android:theme mengarah ke @style/AppTheme seperti pada langkah ke tiga.

<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"
...
...

Hasilnya akan terlihat sepeti video ini.

Splash Screen Dongeng Indonesia