Tutorial Android — Membuat Splash Screen Android dengan Kotlin

Photo by Christian Wiediger on Unsplash

Hai..

Disini saya akan share cara membuat splash screen di android studio dengan bahasa kotlin dan menggunakan library anko.

Untuk yang belum pernah pakai android studio, bisa baca artikel ini untuk tau requirement awalnya sebelum mulai ikuti tutorial ini.

https://medium.com/@mfajarsodik/memulai-belajar-membuat-aplikasi-android-dengan-android-studio-1128b88b7407

Splash screen adalah tampilan awal sebelum memulai aplikasi, contonnya ketika membuka whatsapp, ketika membuka whatsapp akan ada logo whatsapp jika loading menuju aplikasi ada jeda waktu. Nah kita akan membuat tampilan seperti itu, langsung saja berikut tutorialnya.

Mulai Ngoding

Pertama buat project di Android Studio.

klik pilihan “start a new android studio project”

Lalu pilih “empty activity” kemudian klik button“next”

Lalu isi konfigurasi berikutnya sesuai kebutuhan project nantinya.

Untuk name itu adalah nama dari projek kita.

package name untuk nama dari package kita untuk structur folder dari project nanti dan juga untuk nama url dari aplikasi jika diupload ke play store.

disini kita menggunakan bahasa pemrograman kotlin.

Lalu kita klik button “Finish”

Gambar diatas adalah contoh setelah project sudah selesai dikonfigurasi, dan selanjutnya kita bisa mulai coding.

Lalu buat sebuah file class baru untuk membuat tampilan splash screen, dengan cara klik kanan pada folder java seperti contoh di screenshot dibawah ini, pilih kotlin file/class.

Lalu kita beri nama file tersebut dengan nama “SplashScreenActivity”

Lalu tambahkan code ini pada file SplashScreenActivity yang telah kita buat

class SplashScreenActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }
}

akan ada warning notification di bagian “SplashScreenActivity” dari kode diatas, karena activity kita belum ditambahkan ke “AndroidManifest.xml”

AndroidManifest.xml ini tempat kita untuk meletakkan activity, agar bisa saling berinteraksi. serta konfigurasi untuk hal-hal lain.

cara untuk menambahkan activity kita ke “AndroidManifest.xml” ini dengan double-click pada folder manifest dan akan muncul baris kode dari file “AndroidManifest.xml”

tambahkan code berikut diantara tag <application>

seperti contoh gambar dibawah

<activity android:name=".SplashScreenActivity"
    android:theme="@style/SplashStyle">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />

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

kita akan menjumpai notifikasi error dari code tersebut. Itu karena kita belum membuat style “SplashStyle” di file style.xml.

kita akses file style.xml yang ada di folder res -> values -> styles.xml

file style.xml

lalu tambahkan code berikut :

<style name="SplashStyle" parent="AppTheme">
    <item name="android:windowBackground">@drawable/splash_background</item>
</style>

kemudian akan ada notifikasi error pada “@drawable/splash_background”.

itu karena kita belum menambahkan file drawable yang bernama splash_background.xml.

kemudian kita tambahkan file “splash_background.xml”.

lokasi folder drawable

buat file baru dengan nama “splash_background”.

cara membuat file drawable baru

lalu coding pada file splash_background tersebut :

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@android:color/white" />

    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/calculator" />
    </item>

</layer-list>

Akan ditemui error pada “@drawable/calculator” , karena kita belum menambahkan file tersebut.

Tambahkan file yang ingin kamu gunakan dan di copy ke folder drawable.

Dengan cara klik kanan pada drawable -> Show In Explorer.

Lalu copy file icon aplikasi kamu ke folder drawable tersebut.

Di source saya menggunakan icon dari flaticon

https://www.flaticon.com/authors/kiranshastry

lalu selanjutnya kita perlu menambahkan library anko di file build.gradle

lokasi file build.gradle

lalu tambahkan code :

implementation "org.jetbrains.anko:anko:0.10.8"

lalu tekan “Sync Now”

lalu kita kembali ke file “SplashScreenActivity.kt” dan tambahkan code :

startActivity<MainActivity>()

Lalu coba run project kita pada device android atau bisa juga menggunakan emulator.

hasilnya akan muncul icon ditengah layar ketika awal aplikasi berjalan, jika terdapat delay untuk persiapan launch aplikasi.

tampilan aplikasi

github url : https://github.com/fajarsodik/kalkulator-sederhana-android

Selamat Belajar.

Jika menyukai konten ini dan mau mensupport:

https://saweria.co/mfajars