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

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

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

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

सबसे पहले, कस्टम टैब के पता बार को कस्टमाइज़ करना, ताकि वह आपके ऐप्लिकेशन की थीम से मेल खाए. नीचे दिया गया स्निपेट 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()));

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