Memperkenalkan pengguna pemula ke aplikasi Anda

Untuk menunjukkan cara mengoptimalkan aplikasi Anda kepada pengguna pemula, berikan informasi orientasi saat aplikasi dimulai. Berikut ini beberapa contoh informasi orientasi:

  • Menampilkan informasi mendetail tentang saluran yang tersedia saat pengguna mengakses aplikasi saluran untuk pertama kalinya.
  • Menarik perhatian pengguna ke fitur-fitur penting dalam aplikasi Anda.
  • Mengilustrasikan langkah-langkah wajib atau yang direkomendasikan untuk dilakukan pengguna saat menggunakan aplikasi untuk pertama kalinya.

Library leanback androidx menyediakan class OnboardingFragment untuk menyajikan informasi kepada pengguna pemula. Pelajaran ini menjelaskan cara menggunakan class OnboardingFragment untuk memberikan informasi pendahuluan yang ditampilkan saat aplikasi diluncurkan untuk pertama kalinya. Class OnboardingFragment menggunakan praktik terbaik UI TV untuk memberikan informasi dengan cara yang cocok dengan gaya UI TV, dan mudah dinavigasi di perangkat TV.

Gambar 1. Contoh OnboardingFragment.

OnboardingFragment tidak boleh menyertakan elemen UI yang memerlukan input pengguna, seperti tombol dan kolom. Demikian pula, class tersebut tidak boleh digunakan sebagai elemen UI untuk tugas yang dilakukan pengguna secara rutin. Jika perlu menampilkan UI multihalaman yang memerlukan input pengguna, pertimbangkan untuk menggunakan GuidedStepFragment.

Menambahkan OnboardingFragment

Untuk menambahkan OnboardingFragment ke aplikasi Anda, implementasikan class yang menyediakan class OnboardingFragment. Tambahkan fragmen ini ke sebuah aktivitas, entah itu melalui XML tata letak aktivitas atau secara terprogram. Pastikan aktivitas atau fragmen tersebut menggunakan tema yang berasal dari Theme_Leanback_Onboarding, seperti dijelaskan dalam Menyesuaikan tema.

Pada metode onCreate() aktivitas utama aplikasi Anda, panggil startActivity() dengan Intent yang menunjuk ke aktivitas induk OnboardingFragment's. Cara ini memastikan bahwa OnboardingFragment Anda muncul segera setelah aplikasi Anda dimulai.

Untuk memastikan OnboardingFragment hanya muncul pertama kali saat pengguna memulai aplikasi Anda, gunakan objek SharedPreferences untuk melacak apakah pengguna telah melihat OnboardingFragment atau belum. Tentukan nilai boolean yang akan berubah ke true jika pengguna sudah melihat OnboardingFragment. Periksa nilai ini dalam onCreate() aktivitas utama Anda, dan hanya mulai aktivitas induk OnboardingFragment jika nilainya false. Contoh berikut ini menunjukkan penggantian onCreate() yang memeriksa ketersediaan nilai SharedPreferences dan, jika ditetapkan ke true, akan memanggil startActivity() untuk menampilkan OnboardingFragment:

Kotlin

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        PreferenceManager.getDefaultSharedPreferences(this).apply {
            // Check if we need to display our OnboardingFragment
            if (!getBoolean(MyOnboardingFragment.COMPLETED_ONBOARDING_PREF_NAME, false)) {
                // The user hasn't seen the OnboardingFragment yet, so show it
                startActivity(Intent(this@OnboardingActivity, OnboardingActivity::class.java))
            }
        }
    }
    

Java

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        SharedPreferences sharedPreferences =
                PreferenceManager.getDefaultSharedPreferences(this);
        // Check if we need to display our OnboardingFragment
        if (!sharedPreferences.getBoolean(
                MyOnboardingFragment.COMPLETED_ONBOARDING_PREF_NAME, false)) {
            // The user hasn't seen the OnboardingFragment yet, so show it
            startActivity(new Intent(this, OnboardingActivity.class));
        }
    }
    

Setelah pengguna melihat OnboardingFragment, gunakan objek SharedPreferences untuk menandainya sebagai telah dilihat. Caranya, di OnboardingFragment, ganti onFinishFragment() dan tetapkan nilai SharedPreferences ke true, seperti yang ditunjukkan dalam contoh berikut ini:

Kotlin

    override fun onFinishFragment() {
        super.onFinishFragment()
        // User has seen OnboardingFragment, so mark our SharedPreferences
        // flag as completed so that we don't show our OnboardingFragment
        // the next time the user launches the app.
        PreferenceManager.getDefaultSharedPreferences(context).edit().apply {
            putBoolean(COMPLETED_ONBOARDING_PREF_NAME, true)
            apply()
        }
    }
    

Java

    @Override
    protected void onFinishFragment() {
        super.onFinishFragment();
        // User has seen OnboardingFragment, so mark our SharedPreferences
        // flag as completed so that we don't show our OnboardingFragment
        // the next time the user launches the app.
        SharedPreferences.Editor sharedPreferencesEditor =
                PreferenceManager.getDefaultSharedPreferences(getContext()).edit();
        sharedPreferencesEditor.putBoolean(
                COMPLETED_ONBOARDING_PREF_NAME, true);
        sharedPreferencesEditor.apply();
    }
    

Menambahkan halaman OnboardingFragment

Setelah menambahkan OnboardingFragment, Anda perlu menentukan halaman onboarding. OnboardingFragment menampilkan konten dalam susunan halaman yang diurutkan. Setiap halaman dapat memiliki sebuah judul, deskripsi, dan beberapa subtampilan yang dapat berisi gambar atau animasi.

Gambar 2. Elemen halaman OnboardingFragment.

Gambar 2 menunjukkan contoh halaman dengan keterangan yang menandai elemen-elemen halaman yang dapat disesuaikan, yang dapat diberikan oleh OnboardingFragment. Elemen halaman tersebut adalah:

  1. Judul halaman.
  2. Deskripsi halaman.
  3. Tampilan konten halaman, dalam hal ini tanda centang hijau sederhana dalam kotak abu-abu. Tampilan ini bersifat opsional. Gunakan tampilan ini untuk mengilustrasikan detail halaman seperti screenshot yang menyoroti fitur aplikasi yang dijelaskan halaman.
  4. Tampilan latar belakang halaman, dalam hal ini gradien warna biru sederhana. Tampilan ini selalu dirender di balik tampilan lain pada halaman. Tampilan ini bersifat opsional.
  5. Tampilan latar depan halaman, dalam hal ini logo. Tampilan ini selalu dirender di depan semua tampilan lain pada halaman. Tampilan ini bersifat opsional.

Inisialisasi informasi halaman saat OnboardingFragment pertama kali dibuat atau disematkan ke aktivitas induk, karena sistem akan meminta informasi halaman saat membuat tampilan fragmen. Anda dapat menginisialisasi informasi halaman di constructor class atau melalui penggantian onAttach().

Ganti setiap metode berikut yang memberikan informasi halaman ke sistem:

Ganti setiap metode berikut untuk menyediakan subtampilan opsional yang digunakan untuk menampilkan gambar atau animasi:

  • onCreateBackgroundView() menampilkan View yang Anda buat untuk difungsikan sebagai tampilan latar belakang, atau null jika tampilan latar belakang tidak diperlukan.
  • onCreateContentView() menampilkan View yang Anda buat untuk difungsikan sebagai tampilan konten, atau null jika tampilan konten tidak diperlukan.
  • onCreateForegroundView() menampilkan View yang Anda buat untuk difungsikan sebagai tampilan latar depan, atau null jika tampilan latar depan tidak diperlukan.

Sistem menambahkan View yang Anda buat ke tata letak halaman. Contoh berikut mengganti onCreateContentView() dan menampilkan ImageView:

Kotlin

    private lateinit var contentView: ImageView
    ...
    override fun onCreateContentView(inflater: LayoutInflater?, container: ViewGroup?): View? {
        return ImageView(context).apply {
            scaleType = ImageView.ScaleType.CENTER_INSIDE
            setImageResource(R.drawable.onboarding_content_view)
            setPadding(0, 32, 0, 32)
            contentView = this
        }
    }
    

Java

    private ImageView contentView;
    ...
    @Override
    protected View onCreateContentView(LayoutInflater inflater, ViewGroup container) {
        contentView = new ImageView(getContext());
        contentView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
        contentView.setImageResource(R.drawable.onboarding_content_view);
        contentView.setPadding(0, 32, 0, 32);
        return contentView;
    }
    

Menambahkan layar logo awal

OnboardingFragment dapat dimulai dengan layar logo opsional yang memperkenalkan aplikasi Anda. Jika Anda ingin menampilkan Drawable sebagai layar logo, dalam metode OnboardingFragment'sonCreate(), panggil setLogoResourceId() dengan ID Drawable Anda. Sistem akan muncul dan sejenak menampilkan Drawable dengan jelas, lalu menghilangkan Drawable sebelum menampilkan halaman pertama OnboardingFragment Anda.

Jika Anda ingin memberikan animasi kustom untuk layar logo, alih-alih memanggil setLogoResourceId(), ganti onCreateLogoAnimation() dan tampilkan objek Animator yang merender animasi kustom Anda, seperti ditunjukkan dalam contoh berikut ini:

Kotlin

    public override fun onCreateLogoAnimation(): Animator =
            AnimatorInflater.loadAnimator(context, R.animator.onboarding_logo_screen_animation)
    

Java

    @Override
    public Animator onCreateLogoAnimation() {
        return AnimatorInflater.loadAnimator(getContext(),
                R.animator.onboarding_logo_screen_animation);
    }
    

Menyesuaikan animasi halaman

Sistem menggunakan animasi default saat menampilkan halaman pertama OnboardingFragment Anda dan saat pengguna menavigasi ke halaman lain. Anda dapat menyesuaikan animasi ini dengan mengganti metode pada OnboardingFragment.

Untuk menyesuaikan animasi yang muncul di halaman pertama, ganti onCreateEnterAnimation() dan tampilkan Animator. Contoh berikut akan membuat Animator yang menskalakan tampilan konten secara horizontal:

Kotlin

    override fun onCreateEnterAnimation(): Animator =
        ObjectAnimator.ofFloat(contentView, View.SCALE_X, 0.2f, 1.0f)
                .setDuration(ANIMATION_DURATION)
    

Java

    @Override
    protected Animator onCreateEnterAnimation() {
        Animator startAnimator = ObjectAnimator.ofFloat(contentView,
                View.SCALE_X, 0.2f, 1.0f).setDuration(ANIMATION_DURATION);
        return startAnimator;
    }
    

Untuk menyesuaikan animasi yang digunakan saat pengguna menavigasi ke halaman lain, ganti onPageChanged(). Dalam metode onPageChanged(), buat Animators yang akan menghilangkan halaman sebelumnya dan menampilkan halaman berikutnya, tambahkan ini ke AnimatorSet, lalu tetapkan. Contoh berikut menggunakan animasi fade-out untuk menghilangkan halaman sebelumnya, memperbarui gambar tampilan konten, dan menggunakan animasi fade-in untuk menampilkan halaman berikutnya:

Kotlin

    override fun onPageChanged(newPage: Int, previousPage: Int) {
        // Create a fade-out animation used to fade out previousPage and, once
        // done, swaps the contentView image with the next page's image.
        val fadeOut = ObjectAnimator.ofFloat(mContentView, View.ALPHA, 1.0f, 0.0f)
                .setDuration(ANIMATION_DURATION)
                .apply {
                    addListener(object : AnimatorListenerAdapter() {

                        override fun onAnimationEnd(animation: Animator) {
                            mContentView.setImageResource(pageImages[newPage])
                        }
                    })
                }
        // Create a fade-in animation used to fade in nextPage
        val fadeIn = ObjectAnimator.ofFloat(mContentView, View.ALPHA, 0.0f, 1.0f)
                .setDuration(ANIMATION_DURATION)
        // Create AnimatorSet with our fade-out and fade-in animators, and start it
        AnimatorSet().apply {
            playSequentially(fadeOut, fadeIn)
            start()
        }
    }
    

Java

    @Override
    protected void onPageChanged(final int newPage, int previousPage) {
        // Create a fade-out animation used to fade out previousPage and, once
        // done, swaps the contentView image with the next page's image.
        Animator fadeOut = ObjectAnimator.ofFloat(mContentView,
                View.ALPHA, 1.0f, 0.0f).setDuration(ANIMATION_DURATION);
        fadeOut.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                mContentView.setImageResource(pageImages[newPage]);
            }
        });
        // Create a fade-in animation used to fade in nextPage
        Animator fadeIn = ObjectAnimator.ofFloat(mContentView,
                View.ALPHA, 0.0f, 1.0f).setDuration(ANIMATION_DURATION);
        // Create AnimatorSet with our fade-out and fade-in animators, and start it
        AnimatorSet set = new AnimatorSet();
        set.playSequentially(fadeOut, fadeIn);
        set.start();
    }
    

Untuk penjelasan selengkapnya tentang cara membuat Animators dan AnimatorSets, baca Animasi properti.

Menyesuaikan tema

Setiap implementasi OnboardingFragment harus menggunakan tema Theme_Leanback_Onboarding, atau tema yang berasal dari Theme_Leanback_Onboarding. Tetapkan tema untuk OnboardingFragment Anda dengan melakukan salah satu langkah berikut:

  • Tetapkan aktivitas induk OnboardingFragment's agar menggunakan tema yang diinginkan. Contoh berikut menunjukkan cara menetapkan aktivitas agar menggunakan Theme_Leanback_Onboarding dalam manifes aplikasi:
        <activity
           android:name=".OnboardingActivity"
           android:enabled="true"
           android:exported="true"
           android:theme="@style/Theme.Leanback.Onboarding">
        </activity>
        
  • Tetapkan tema dalam aktivitas induk dengan atribut LeanbackOnboardingTheme_onboardingTheme dalam tema aktivitas kustom. Arahkan atribut ini ke tema kustom lain yang hanya digunakan oleh objek OnboardingFragment pada aktivitas Anda. Gunakan pendekatan ini jika aktivitas Anda sudah menggunakan tema kustom dan Anda tidak ingin menerapkan gaya OnboardingFragment ke tampilan lain dalam aktivitas itu.
  • Ganti onProvideTheme() dan tampilkan tema yang Anda inginkan. Gunakan pendekatan ini jika beberapa aktivitas menggunakan OnboardingFragment atau jika aktivitas induk tidak dapat menggunakan tema yang diinginkan. Contoh berikut mengganti onProvideTheme() dan menampilkan Theme_Leanback_Onboarding:

    Kotlin

        override fun onProvideTheme(): Int = R.style.Theme_Leanback_Onboarding
        

    Java

        @Override
        public int onProvideTheme() {
           return R.style.Theme_Leanback_Onboarding;
        }