Tutorial membuat app intro atau onboard screen di Android Studio
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.
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!
- 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 :)