Monday , October 3 2022
Home / Android Studio / Cara Membuat Splash Screen Animasi dari Lottie

Cara Membuat Splash Screen Animasi dari Lottie

Cara Membuat Splash Screen Animasi dari Lottie. Hampir sama dengan artikel sebelumnya mengenai Cara Membuat Splash Screen Animasi – Android Studio Tutorial namun kali ini kita akan memanfaatkan langsung library dari Lottie secara langsung dan ternyata baru saya coba hasilnya lebih keren Lho 🙂

Untuk cara membuatnya juga tidak akan jauh berbeda. Bahkan klo yang ini malah lebih gampang sih menurut saya.

1. Buat Project Baru
-Buka aplikasi Android Studio
-Pilih Start a New Android Studio Project
-Pilih Empty Activity > Next
-Name : (bisa diisi sesuka temen2)
-Languange : Java
-Minimum SDK : API 17
-Finish

2. Pada build.gradle (Project: ….. )
Tambahkan kode berikut  dan letakkan seperti contoh dibawah ini:

allprojects {
      repositories {
         ...
         ...
         maven { url "https://jitpack.io" }

      }
  }

3. Pada build.grandle (Module)

tambahkan library berikut dan letakkan seperti contoh di bawah

dependencies {
    ...
    ...
     implementation 'com.airbnb.android:lottie:3.4.4'
}

4. Buat Layout Baru (Klo dengan cara di bawah ini maka akan otomatis membuat file javanya)
Buat dengan cara
-Klik kanan pada App > New > Activity > Empty Activity

Isi seperti contoh di bawah ini:

Pilih Finish

5. Tambahkan folder Raw
Klik kanan pada App > New > Folder > Raw Folder

Pilih Finish

6. Buka website https://lottiefiles.com/

Pilih dan download animasi yang diinginkan (file dalam bentuk .json)

Lalu copy dan pastekan file animasi tadi (dalam format .json) ke dalam Folder Raw di Android Studio

7. Pada activity_splash_screen.xml

Tambahkan kode berikut:

<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animationView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:lottie_rawRes="@raw/loading"
app:lottie_autoPlay="true"
android:layout_centerVertical="true"
app:lottie_loop="true"/>

sehingga akan menjadi seperti ini

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SplashScreen">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animationView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_rawRes="@raw/loading"
        app:lottie_autoPlay="true"
        android:layout_centerVertical="true"
        app:lottie_loop="true"/>

</RelativeLayout>

jangan lupa ganti tulisan loading dengan nama file .json animasi agan.
8. Pada SplashScreen.java

Tambahkan kode

final Handler handler = new Handler();
handler.postDelayed(new Runnable() {
    @Override
    public void run() {
        startActivity(new Intent(getApplicationContext(), MainActivity.class));
        finish();
    }
}, 3000L); //3000 L = 3 detik

sehingga kodenya akan menjadi seperti ini

package com.splashscreenanimasi.app;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;

public class SplashScreen extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash_screen);

        final Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                startActivity(new Intent(getApplicationContext(), MainActivity.class));
                finish();
            }
        }, 3000L); //3000 L = 3 detik
    }
}


8. Pada AndroidManifest.xml

Rubah kodenya menjadi seperti ini:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.splashscreenanimasi.app">

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">
    <activity android:name=".SplashScreen">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

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

</manifest>

9. Selesai dan coba run aplikasi

Check Also

Cara Membuat In App Review/Rating

Cara Membuat In App Review/Rating. Halo teman-teman apakah dari kalian pernah mengetahui mengenai In App …