Tutorial membuat app intro atau onboard screen di Android Studio

Sumber: apptimize.com

Untuk pengguna aplikasi mobile seperti Android atau iOS, pasti sering melihat app intro atau onboarding screen ketika pertama kali membuka aplikasi yang diunduhnya. Biasanya, ia muncul dalam beberapa slide dengan tampilan yang menarik. Tahukah kamu, bahwa app intro dan onboarding

screen itu sebenarnya adalah dua hal yang berbeda?

App Intro

Ada beberapa pengertian tentang App Intro, salah satunya adalah dari Sulaiman.

“ The intro screen is a great way to showcase your app’s greatest features. It is simply, one of the ways by which you can increase retention rates. The App Intro screen is a small part of the overall onboarding experience that you can build for your app”

Dia mengatakan bahwa App Intro itu adalah cara untuk mengenalkan pertama kali kepada pengguna untuk meningkatkan retention rates. Retention rate itu secara sederhana adalah perbandingan jumlah pengguna akan bertahan menggunakan aplikasi yang digunakan dengan jumlah pengguna secara keseluruhan. Hal ini berkaitan dengan kepuasan mereka juga dalam menggunakan aplikasi. Jadi, App Intro ini berfungsi untuk meningkatkan ‘daya tarik’ pengguna ketika menggunakan aplikasi. App Intro merupakan bagian dari onboarding screen.

Onboarding screen

Beberapa referensi sering menyatakan bahwah onboarding itu sama dengan App Intro. Padahal, keduanya sangat berbeda. Onboarding adalah cara yang digunakan supaya pengguna dapat mengerti tentang cara aplikasi yang ia gunakan bekerja. Jadi, App intro adalah bagian dari onboarding screen.

Sumber: Roman Zadyrako

Tutorial membuat App Intro

Terdapat beberapa cara untuk membuat App Intro, ada dengan teknik manual, ada juga dengan menggunakan library yang sudah ada. Memakai library yang sudah ada dipandang lebih sederhana dan mudah. Nah, dalam tutorial ini saya akan memberikan cara membuat App Intro dengan menggunakan library AppIntro. Library ini tidak memerlukan layout khusus untuk menampilkan App Intro. Jadi hanya dengan beberapa baris kode, kamu sudah bisa menampilkan App Intro di aplikasi yang kamu buat!

1. Tambahkan jitpack ke dalam build.gradle di bagian akhir repositories

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

2. Jika project android kamu sudah menggunakan AndroidX, maka bisa langsung menambahkan dependenciesnya di file build.gradle (module). Tapi jika belum, kamu harus menggunakan versi yang lama.

dependencies {
	        // AndroidX version
	        implementation 'com.github.AppIntro:AppIntro:v5.1.0'
	        
	        // *** Atau ***
	        
	        // Version lama
	        implementation 'com.github.AppIntro:AppIntro:v4.2.3'
	}

3. Setelah itu, kamu harus mengatur agar App Intro ini hanya digunakan pertama kali saja. Artinya, ketika pengguna menggunakan aplikasi untuk yang kedua kali dan seterusnya, App Intro ini tidak ditampilkan kepada pengguna. Caranya adalah dengan menyimpan suatu variabel penanda di SharedPreference.

Thread t = new Thread(new Runnable() {
        @Override
        public void run() {
            //  Inisialisasi SharedPreferences
            SharedPreferences getPrefs = PreferenceManager
                    .getDefaultSharedPreferences(getBaseContext());

            //  Buat sebuah boolean di preference dan set menjadi true
            boolean isFirstStart = getPrefs.getBoolean("firstStart", true);

            //  Jika aplikasi baru digunakan pertama kali
            if (isFirstStart) {

                //  Launch app intro
                final Intent i = new Intent(MainActivity.this, IntroActivity.class);

                runOnUiThread(new Runnable() {
                  @Override public void run() {
                    startActivity(i);
                  }
                });

                //  Buat editor preferences
                SharedPreferences.Editor e = getPrefs.edit();

                //  Edit value yang firstart menjadi false
                e.putBoolean("firstStart", false);

                //  Simpan perubahannya
                e.apply();
            }
        }
    });

    // Jalankan threadnya
    t.start();

    ...
}

4. Nah untuk membuat file IntroActivity-nya, buat dulu class IntroActivity dengan meng-extend AppIntro dan masukkan kode berikut.

public class IntroActivity extends AppIntro {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        

        // Opsi 1: Menggunakan fragment yang udah dibuat sebelumnya
        addSlide(firstFragment);
        addSlide(secondFragment);
        addSlide(thirdFragment);
        addSlide(fourthFragment);

        // Opsi 2: Otomatis membuat default intro. Ini lebih praktis. Tinggal tambahin lagi aja slidernya yang banyak.
        SliderPage sliderPage = new SliderPage();
        sliderPage.setTitle("Ini adalah judul");
        sliderPage.setDescription("Ini adalah description");
        sliderPage.setImageDrawable(R.drawable.gambarEnte);
        addSlide(AppIntroFragment.newInstance(sliderPage));

        // Konfigurasi tambahan
        // Warna
        setBarColor(Color.parseColor("#3F51B5"));
        setSeparatorColor(Color.parseColor("#2196F3"));

        // Skip/Done button?
        showSkipButton(false);
        setProgressButtonEnabled(false);

   
    }

    @Override
    public void onSkipPressed(Fragment currentFragment) {
        super.onSkipPressed(currentFragment);
        // Do something 
    }

    @Override
    public void onDonePressed(Fragment currentFragment) {
        super.onDonePressed(currentFragment);
        // Do something 
    }

    @Override
    public void onSlideChanged(@Nullable Fragment oldFragment, @Nullable Fragment newFragment) {
        super.onSlideChanged(oldFragment, newFragment);
        // Do something
    }
}

5. Tambahkan activitynya di Andoroid Manifest.xml

<activity android:name="com.example.example.intro"
    android:label="@string/app_intro" />

6. Sekarang, run aplikasi kamu dan lihat yang terjadi. Beberapa method tambahan dan detail penggunaan library ini dapat dilihat di sini

Sekian tutorial ini semoga bermanfaat ya buat semuanya. Stay cheers :)