আপনার অ্যাপে প্রথমবার ব্যবহারকারীদের পরিচয় করিয়ে দিন

কম্পোজ দিয়ে আরও ভালোভাবে তৈরি করুন

জেটপ্যাক কম্পোজ ব্যবহার করে অ্যান্ড্রয়েড টিভি ওএস-এর জন্য ন্যূনতম কোডে সুন্দর ইউআই তৈরি করুন।

টিভির জন্য সুর রচনা করুন →

প্রথমবারের ব্যবহারকারীকে আপনার অ্যাপ থেকে কীভাবে সবচেয়ে বেশি সুবিধা পাওয়া যায় তা দেখানোর জন্য, অ্যাপটি চালু করার সময় অনবোর্ডিং তথ্য উপস্থাপন করুন। এখানে অনবোর্ডিং তথ্যের কিছু উদাহরণ দেওয়া হলো:

• কোনো ব্যবহারকারী যখন প্রথমবার কোনো চ্যানেল অ্যাপে প্রবেশ করেন, তখন কোন কোন চ্যানেল উপলব্ধ আছে সে সম্পর্কে বিস্তারিত তথ্য প্রদর্শন করুন।
• আপনার অ্যাপের উল্লেখযোগ্য বৈশিষ্ট্যগুলোর প্রতি দৃষ্টি আকর্ষণ করুন।
• প্রথমবার অ্যাপটি ব্যবহার করার সময় ব্যবহারকারীদের জন্য প্রয়োজনীয় বা প্রস্তাবিত পদক্ষেপগুলো ব্যাখ্যা করুন।

androidx.leanback লাইব্রেরিটি প্রথমবারের ব্যবহারকারীর তথ্য দেখানোর জন্য OnboardingSupportFragment ক্লাসটি প্রদান করে। এই নির্দেশিকায় বর্ণনা করা হয়েছে, কীভাবে OnboardingSupportFragment ক্লাসটি ব্যবহার করে প্রাথমিক তথ্য উপস্থাপন করা যায়, যা অ্যাপটি প্রথমবার চালু হওয়ার সময় দেখানো হয়।

OnboardingSupportFragment টিভি UI-এর সর্বোত্তম অনুশীলন ব্যবহার করে তথ্য এমনভাবে উপস্থাপন করে যা টিভি UI শৈলীর সাথে মেলে এবং টিভি ডিভাইসে সহজে নেভিগেট করা যায়।

চিত্র ১. একটি OnboardingSupportFragment উদাহরণ।

OnboardingSupportFragment সব ক্ষেত্রে ব্যবহারের জন্য উপযুক্ত নয়। যখন ব্যবহারকারীর ইনপুট প্রয়োজন এমন UI এলিমেন্ট, যেমন বাটন এবং ফিল্ড, অন্তর্ভুক্ত করার প্রয়োজন হয়, তখন OnboardingSupportFragment ব্যবহার করবেন না। এছাড়াও, ব্যবহারকারী নিয়মিত করবে এমন কাজের জন্যও OnboardingSupportFragment ব্যবহার করবেন না। সবশেষে, যদি ব্যবহারকারীর ইনপুট প্রয়োজন এমন একটি বহু-পৃষ্ঠার UI উপস্থাপন করার প্রয়োজন হয়, তবে একটি GuidedStepSupportFragment ব্যবহার করার কথা বিবেচনা করতে পারেন।

একটি অনবোর্ডিংসাপোর্টফ্র্যাগমেন্ট যোগ করুন

আপনার অ্যাপে একটি OnboardingSupportFragment যোগ করতে, এমন একটি ক্লাস ইমপ্লিমেন্ট করুন যা OnboardingSupportFragment ক্লাসকে এক্সটেন্ড করে। অ্যাক্টিভিটির লেআউট XML ব্যবহার করে অথবা প্রোগ্রাম্যাটিকভাবে এই ফ্র্যাগমেন্টটি অ্যাক্টিভিটিতে যোগ করুন। নিশ্চিত করুন যে অ্যাক্টিভিটি বা ফ্র্যাগমেন্টটি Theme_Leanback_Onboarding থেকে ডিরাইভড একটি থিম ব্যবহার করছে, যেমনটি 'থিম কাস্টমাইজ করুন' বিভাগে বর্ণনা করা হয়েছে।

আপনার অ্যাপের প্রধান অ্যাক্টিভিটির onCreate() মেথডে, আপনার OnboardingSupportFragment এর প্যারেন্ট অ্যাক্টিভিটিকে নির্দেশ করে এমন একটি Intent সহ startActivity() কল করুন। এটি নিশ্চিত করতে সাহায্য করে যে আপনার অ্যাপ চালু হওয়ার সাথে সাথেই OnboardingSupportFragment প্রদর্শিত হবে।

ব্যবহারকারী যখন প্রথমবার আপনার অ্যাপ চালু করেন, তখনই যেন OnboardingSupportFragment টি প্রদর্শিত হয়, তা নিশ্চিত করতে একটি SharedPreferences অবজেক্ট ব্যবহার করে ট্র্যাক করুন যে ব্যবহারকারী আগে থেকেই OnboardingSupportFragment টি দেখেছেন কিনা। একটি বুলিয়ান ভ্যালু নির্ধারণ করুন যা ব্যবহারকারী OnboardingSupportFragment টি দেখা শেষ করলে 'true'-তে পরিবর্তিত হবে। আপনার মেইন অ্যাক্টিভিটির onCreate() মেথডে এই ভ্যালুটি পরীক্ষা করুন এবং ভ্যালুটি 'false' হলেই কেবল OnboardingSupportFragment প্যারেন্ট অ্যাক্টিভিটিটি চালু করুন।

নিম্নলিখিত উদাহরণটি onCreate() এর একটি ওভাররাইড দেখায় যা একটি SharedPreferences মান পরীক্ষা করে এবং, যদি এটি true সেট করা না থাকে, তাহলে OnboardingSupportFragment দেখানোর জন্য startActivity() কল করে:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    PreferenceManager.getDefaultSharedPreferences(this).apply {
        // Check if we need to display our OnboardingSupportFragment
        if (!getBoolean(MyOnboardingSupportFragment.COMPLETED_ONBOARDING_PREF_NAME, false)) {
            // The user hasn't seen the OnboardingSupportFragment yet, so show it
            startActivity(Intent(this@OnboardingActivity, OnboardingActivity::class.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 OnboardingSupportFragment
    if (!sharedPreferences.getBoolean(
            MyOnboardingSupportFragment.COMPLETED_ONBOARDING_PREF_NAME, false)) {
        // The user hasn't seen the OnboardingSupportFragment yet, so show it
        startActivity(new Intent(this, OnboardingActivity.class));
    }
}

ব্যবহারকারী OnboardingSupportFragment টি দেখার পর, SharedPreferences অবজেক্ট ব্যবহার করে সেটিকে দৃষ্ট হিসেবে চিহ্নিত করুন। এটি করার জন্য, আপনার OnboardingSupportFragment এ onFinishFragment() ওভাররাইড করুন এবং আপনার SharedPreferences মান true সেট করুন, যেমনটি নিচের উদাহরণে দেখানো হয়েছে:

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

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

অনবোর্ডিংসাপোর্টফ্র্যাগমেন্ট পৃষ্ঠাগুলি যোগ করুন

একটি OnboardingSupportFragment ধারাবাহিকভাবে কয়েকটি পৃষ্ঠায় বিষয়বস্তু প্রদর্শন করে। আপনার OnboardingSupportFragment যোগ করার পর, আপনাকে অনবোর্ডিং পৃষ্ঠাগুলো নির্ধারণ করতে হবে। প্রতিটি পৃষ্ঠায় একটি শিরোনাম, একটি বিবরণ এবং বেশ কয়েকটি সাবভিউ থাকতে পারে, যেগুলোতে ছবি বা অ্যানিমেশন থাকতে পারে।

চিত্র ২. OnboardingSupportFragment পেজের উপাদানসমূহ।

চিত্র ২-এ একটি উদাহরণ পৃষ্ঠা দেখানো হয়েছে, যেখানে কলআউটের মাধ্যমে সেইসব কাস্টমাইজযোগ্য পৃষ্ঠার উপাদানগুলো চিহ্নিত করা হয়েছে যা আপনার OnboardingSupportFragment প্রদান করতে পারে। পৃষ্ঠার উপাদানগুলো হলো:

1. পৃষ্ঠার শিরোনাম।
2. পৃষ্ঠার বিবরণ।
3. পেজের বিষয়বস্তু দেখার ভিউ, এক্ষেত্রে এটি একটি ধূসর বাক্সের মধ্যে একটি সাধারণ সবুজ টিক চিহ্ন। এই ভিউটি ঐচ্ছিক। পেজের বিস্তারিত তথ্য তুলে ধরতে এই ভিউটি ব্যবহার করুন। উদাহরণস্বরূপ, আপনি এমন একটি স্ক্রিনশট অন্তর্ভুক্ত করতে পারেন যা পেজটিতে বর্ণিত অ্যাপের ফিচারটিকে তুলে ধরে।
4. পেজের ব্যাকগ্রাউন্ড ভিউ, এক্ষেত্রে একটি সাধারণ নীল গ্রেডিয়েন্ট। এই ভিউটি সবসময় পেজের অন্যান্য ভিউয়ের পেছনে রেন্ডার হয়। এই ভিউটি ঐচ্ছিক।
5. পেজের ফোরগ্রাউন্ড ভিউ, এক্ষেত্রে একটি লোগো। এই ভিউটি সর্বদা পেজের অন্য সব ভিউয়ের সামনে প্রদর্শিত হয়। এই ভিউটি ঐচ্ছিক।

আপনার OnboardingSupportFragment প্রথমবার তৈরি বা প্যারেন্ট অ্যাক্টিভিটির সাথে সংযুক্ত করার সময় পেজের তথ্য ইনিশিয়ালাইজ করুন, কারণ সিস্টেম ফ্র্যাগমেন্টের ভিউ তৈরি করার সময় পেজের তথ্যের অনুরোধ করে। আপনি আপনার ক্লাস কনস্ট্রাক্টরে অথবা onAttach() এর ওভাররাইডে পেজের তথ্য ইনিশিয়ালাইজ করতে পারেন।

নিম্নলিখিত প্রতিটি মেথড ওভাররাইড করুন, যেগুলো সিস্টেমে পেজের তথ্য সরবরাহ করে:

• getPageCount() আপনার OnboardingSupportFragment এ থাকা পৃষ্ঠার সংখ্যা ফেরত দেয়।
• getPageTitle() অনুরোধকৃত পৃষ্ঠা নম্বরের শিরোনাম ফেরত দেয়।
• getPageDescription() অনুরোধকৃত পৃষ্ঠা নম্বরের বিবরণ ফেরত দেয়।

ছবি বা অ্যানিমেশন প্রদর্শনের জন্য ঐচ্ছিক সাবভিউ যোগ করতে নিচের প্রতিটি মেথড ওভাররাইড করুন:

• onCreateBackgroundView() এমন একটি View রিটার্ন করে যা আপনি ব্যাকগ্রাউন্ড ভিউ হিসেবে তৈরি করেন, অথবা কোনো ব্যাকগ্রাউন্ড ভিউয়ের প্রয়োজন না হলে null রিটার্ন করে।
• onCreateContentView() এমন একটি View রিটার্ন করে যা আপনি কন্টেন্ট ভিউ হিসেবে কাজ করার জন্য তৈরি করেন, অথবা কোনো কন্টেন্ট ভিউয়ের প্রয়োজন না হলে null রিটার্ন করে।
• onCreateForegroundView() এমন একটি View রিটার্ন করে যা আপনি ফোরগ্রাউন্ড ভিউ হিসেবে কাজ করার জন্য তৈরি করেন, অথবা কোনো ফোরগ্রাউন্ড ভিউয়ের প্রয়োজন না হলে null রিটার্ন করে।

সিস্টেমটি আপনার তৈরি করা View পেজ লেআউটে যুক্ত করে। নিম্নলিখিত উদাহরণটি onCreateContentView() কে ওভাররাইড করে এবং একটি ImageView রিটার্ন করে:

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
    }
}

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;
}

একটি প্রাথমিক লোগো স্ক্রিন যোগ করুন

আপনার OnboardingSupportFragment একটি ঐচ্ছিক লোগো স্ক্রিন দিয়ে শুরু হতে পারে, যা আপনার অ্যাপের পরিচয় তুলে ধরে। আপনি যদি আপনার লোগো স্ক্রিন হিসেবে একটি Drawable প্রদর্শন করতে চান, তাহলে আপনার OnboardingSupportFragment এর onCreate() মেথডে আপনার Drawable এর ID দিয়ে setLogoResourceId() কল করুন। সিস্টেমটি Drawable টিকে ফেড-ইন করে এবং অল্প সময়ের জন্য প্রদর্শন করে, এবং তারপর আপনার OnboardingSupportFragment এর প্রথম পৃষ্ঠা দেখানোর আগে Drawable ফেড-আউট করে দেয়।

আপনি যদি আপনার লোগো স্ক্রিনের জন্য একটি কাস্টম অ্যানিমেশন দিতে চান, তাহলে setLogoResourceId() কল করার পরিবর্তে onCreateLogoAnimation() ওভাররাইড করুন এবং একটি Animator অবজেক্ট রিটার্ন করুন যা আপনার কাস্টম অ্যানিমেশনটি রেন্ডার করবে, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

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

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

পৃষ্ঠার অ্যানিমেশন কাস্টমাইজ করুন

আপনার OnboardingSupportFragment এর প্রথম পৃষ্ঠা প্রদর্শন করার সময় এবং ব্যবহারকারী যখন অন্য কোনো পৃষ্ঠায় যান, তখন সিস্টেম ডিফল্ট অ্যানিমেশন ব্যবহার করে। আপনি আপনার OnboardingSupportFragment এর মেথডগুলো ওভাররাইড করে এই অ্যানিমেশনগুলো কাস্টমাইজ করতে পারেন।

আপনার প্রথম পৃষ্ঠায় প্রদর্শিত অ্যানিমেশনটি কাস্টমাইজ করতে, onCreateEnterAnimation() ওভাররাইড করুন এবং একটি Animator রিটার্ন করুন। নিম্নলিখিত উদাহরণটি এমন একটি Animator তৈরি করে যা কন্টেন্ট ভিউকে আনুভূমিকভাবে স্কেল করে:

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

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

ব্যবহারকারী যখন অন্য কোনো পৃষ্ঠায় যান, তখন ব্যবহৃত অ্যানিমেশনটি কাস্টমাইজ করতে onPageChanged() মেথডটি ওভাররাইড করুন। আপনার onPageChanged() মেথডের মধ্যে, Animator অবজেক্ট তৈরি করুন যা পূর্ববর্তী পৃষ্ঠাটি সরিয়ে দেয় এবং পরবর্তী পৃষ্ঠাটি প্রদর্শন করে, এগুলোকে একটি AnimatorSet এ যুক্ত করুন এবং সেটটি প্লে করুন। নিচের উদাহরণটিতে পূর্ববর্তী পৃষ্ঠাটি সরানোর জন্য একটি ফেড-আউট অ্যানিমেশন, কন্টেন্ট ভিউ-এর ইমেজ আপডেট করা এবং পরবর্তী পৃষ্ঠাটি প্রদর্শন করার জন্য একটি ফেড-ইন অ্যানিমেশন ব্যবহার করা হয়েছে:

override fun onPageChanged(newPage: Int, previousPage: Int) {
    // Create a fade-out animation for previousPage and, once
    // done, swap 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 for nextPage
    val fadeIn = ObjectAnimator.ofFloat(mContentView, View.ALPHA, 0.0f, 1.0f)
            .setDuration(ANIMATION_DURATION)
    // Create AnimatorSet with fade-out and fade-in animators and start it
    AnimatorSet().apply {
        playSequentially(fadeOut, fadeIn)
        start()
    }
}

@Override
protected void onPageChanged(final int newPage, int previousPage) {
    // Create a fade-out animation for previousPage and, once
    // done, swap 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 for nextPage
    Animator fadeIn = ObjectAnimator.ofFloat(mContentView,
            View.ALPHA, 0.0f, 1.0f).setDuration(ANIMATION_DURATION);
    // Create AnimatorSet with fade-out and fade-in animators and start it
    AnimatorSet set = new AnimatorSet();
    set.playSequentially(fadeOut, fadeIn);
    set.start();
}

Animator অবজেক্ট এবং AnimatorSet অবজেক্ট কীভাবে তৈরি করতে হয় সে সম্পর্কে আরও বিস্তারিত জানতে, Property Animation Overview দেখুন।

থিম কাস্টমাইজ করুন

যেকোনো OnboardingSupportFragment ইমপ্লিমেন্টেশনে অবশ্যই Theme_Leanback_Onboarding থিম অথবা Theme_Leanback_Onboarding থেকে উত্তরাধিকারসূত্রে প্রাপ্ত কোনো থিম ব্যবহার করতে হবে। নিম্নলিখিতগুলির মধ্যে যেকোনো একটি করে আপনার OnboardingSupportFragment জন্য থিম সেট করুন:

• OnboardingSupportFragment এর প্যারেন্ট অ্যাক্টিভিটিতে কাঙ্ক্ষিত থিমটি সেট করুন। নিচের উদাহরণটিতে দেখানো হয়েছে, কীভাবে অ্যাপ ম্যানিফেস্টে একটি অ্যাক্টিভিটিতে Theme_Leanback_Onboarding থিমটি সেট করতে হয়:

  <activity
     android:name=".OnboardingActivity"
     android:enabled="true"
     android:exported="true"
     android:theme="@style/Theme.Leanback.Onboarding">
  </activity>

• প্যারেন্ট অ্যাক্টিভিটিতে একটি কাস্টম অ্যাক্টিভিটি থিমে LeanbackOnboardingTheme_onboardingTheme অ্যাট্রিবিউট ব্যবহার করে থিমটি সেট করুন। এই অ্যাট্রিবিউটটিকে এমন একটি কাস্টম থিমের দিকে নির্দেশ করুন যা শুধুমাত্র আপনার অ্যাক্টিভিটির OnboardingSupportFragment অবজেক্টগুলো ব্যবহার করে। এই পদ্ধতিটি ব্যবহার করুন যদি আপনার অ্যাক্টিভিটি ইতিমধ্যেই একটি কাস্টম থিম ব্যবহার করে এবং আপনি অ্যাক্টিভিটির অন্যান্য ভিউতে OnboardingSupportFragment স্টাইলগুলো প্রয়োগ করতে না চান।
• onProvideTheme() ওভাররাইড করুন এবং কাঙ্ক্ষিত থিমটি রিটার্ন করুন। যদি একাধিক অ্যাক্টিভিটি আপনার OnboardingSupportFragment ব্যবহার করে অথবা যদি প্যারেন্ট অ্যাক্টিভিটি কাঙ্ক্ষিত থিমটি ব্যবহার করতে না পারে, তবে এই পদ্ধতিটি ব্যবহার করুন। নিম্নলিখিত উদাহরণটি onProvideTheme() ওভাররাইড করে এবং Theme_Leanback_Onboarding রিটার্ন করে:

  কোটলিন

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

  জাভা

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