यूज़र इंटरफ़ेस (यूआई) को पसंद के मुताबिक बनाना

कस्टम टैब का एक फ़ायदा यह है कि इन्हें आपके ऐप्लिकेशन में आसानी से इंटिग्रेट किया जा सकता है. कस्टम टैब गाइड के इस हिस्से में, आपको अपने ऐप्लिकेशन के हिसाब से कस्टम टैब के लुक और व्यवहार को बदलने का तरीका बताया जाएगा.

टूलबार का रंग सेट करें

हल्के रंग की स्कीम के साथ पसंद के मुताबिक बनाया गया टैब
हल्के रंग वाला मोड
गहरे रंग की स्कीम के साथ पसंद के मुताबिक बनाया गया टैब
गहरे रंग वाला मोड

सबसे पहले, कस्टम टैब के पता बार को अपने ऐप्लिकेशन की थीम के मुताबिक बनाने के लिए, उसे पसंद के मुताबिक बनाना. नीचे दिया गया स्निपेट, setDefaultColorSchemeParams() को कॉल करके डिफ़ॉल्ट टूलबार का रंग बदल देता है. अगर आपके ऐप्लिकेशन में गहरे रंग की स्कीम भी काम करती है, तो इसे .setColorSchemeParams(CustomTabsIntent.COLOR_SCHEME_DARK, …) का इस्तेमाल करके सेट करें.

// get the current toolbar background color (this might work differently in your app)
@ColorInt int colorPrimaryLight = ContextCompat.getColor(MainActivity.this, R.color.md_theme_light_primary);
@ColorInt int colorPrimaryDark = ContextCompat.getColor(MainActivity.this, R.color.md_theme_dark_primary);

CustomTabsIntent intent = new CustomTabsIntent.Builder()
        // set the default color scheme
        .setDefaultColorSchemeParams(new CustomTabColorSchemeParams.Builder()
                .setToolbarColor(colorPrimaryLight)
                .build())
        // set the alternative dark color scheme
        .setColorSchemeParams(CustomTabsIntent.COLOR_SCHEME_DARK, new CustomTabColorSchemeParams.Builder()
                .setToolbarColor(colorPrimaryDark)
                .build())
        .build();

टूलबार में अब बैकग्राउंड और फ़ोरग्राउंड के रंग को पसंद के मुताबिक बनाया गया है.

पसंद के मुताबिक एंटर और एग्ज़िट ऐनिमेशन कॉन्फ़िगर करें

इसके बाद, setStartAnimation और setExitAnimation का इस्तेमाल करके, कस्टम स्टार्ट और एग्ज़िट ऐनिमेशन तय करके, अपने ऐप्लिकेशन में 'कस्टम टैब' के इस्तेमाल को और आसान बनाया जा सकता है. साथ ही, 'कस्टम टैब' इस्तेमाल करना ज़्यादा आसान हो जाता है:

CustomTabsIntent intent = new CustomTabsIntent.Builder()
…
.setStartAnimations(MainActivity.this, R.anim.slide_in_right, R.anim.slide_out_left)
.setExitAnimations(MainActivity.this, android.R.anim.slide_in_left, android.R.anim.slide_out_right)
.build();

ज़्यादा कस्टमाइज़ेशन: शीर्षक, AppBar को अपने-आप छिपाएं, और पसंद के मुताबिक बंद करने का आइकॉन

यहां कुछ और चीज़ें दी गई हैं जिन्हें अपनाकर कस्टम टैब के यूज़र इंटरफ़ेस (यूआई) को अपनी ज़रूरत के हिसाब से बदला जा सकता है.

  • स्क्रोल पर यूआरएल बार छिपाएं, ताकि उपयोगकर्ता को setUrlBarHidingEnabled()(true) का इस्तेमाल करके, वेब कॉन्टेंट एक्सप्लोर करने के लिए ज़्यादा जगह मिल सके.
  • setShowTitle()(true) की मदद से यूआरएल के बजाय, दस्तावेज़ का टाइटल दिखाएं.
  • अपने ऐप्लिकेशन में यूज़र फ़्लो के हिसाब से 'बंद करें' बटन को पसंद के मुताबिक बनाएं. उदाहरण के लिए, डिफ़ॉल्ट X आइकॉन की जगह बैक ऐरो दिखाकर: setCloseButtonIcon()(myCustomCloseIcon).

ये सभी ज़रूरी नहीं हैं. हालांकि, इनकी मदद से आपके ऐप्लिकेशन में 'कस्टम टैब' से जुड़े अनुभव को बेहतर बनाया जा सकता है.

Bitmap myCustomCloseIcon = getDrawable(R.drawable.ic_baseline_arrow_back_24));
CustomTabsIntent intent = new CustomTabsIntent.Builder()
  …
  .setUrlBarHidingEnabled(true)
  .setShowTitle(true)
  .setCloseButtonIcon(toBitmap(myCustomCloseIcon))
  .build();

कस्टम रेफ़रर सेट करना

अपना कस्टम टैब लॉन्च करते समय, ऐप्लिकेशन को रेफ़रर के तौर पर सेट किया जा सकता है. इस तरह, वेबसाइटों को यह बताया जा सकता है कि उन पर ट्रैफ़िक कहां से आ रहा है.

CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder().build()
customTabsIntent.intent.putExtra(Intent.EXTRA_REFERRER,
       Uri.parse("android-app://" + context.getPackageName()));

अगला लेख: अपने कस्टम टैब में कस्टम ऐक्शन जोड़ने का तरीका जानें.