पैलेट एपीआई की मदद से रंग चुनें

किसी ऐप्लिकेशन को सफल बनाने के लिए, उसका विज़ुअल डिज़ाइन अच्छा होना ज़रूरी है. साथ ही, कलर स्कीम डिज़ाइन का मुख्य हिस्सा होती हैं. पैलेट लाइब्रेरी, Jetpack की एक लाइब्रेरी है. यह इमेज से मुख्य रंगों को निकालती है, ताकि आकर्षक ऐप्लिकेशन बनाए जा सकें.

पैलेट लाइब्रेरी का इस्तेमाल करके, लेआउट की थीम डिज़ाइन की जा सकती हैं. साथ ही, अपने ऐप्लिकेशन के विज़ुअल एलिमेंट में पसंद के मुताबिक रंग भी लागू किए जा सकते हैं. उदाहरण के लिए, किसी गाने के एल्बम कवर के आधार पर, रंगों के हिसाब से टाइटल कार्ड बनाया जा सकता है. इसके अलावा, बैकग्राउंड इमेज बदलने पर, ऐप्लिकेशन के टूलबार के रंग में बदलाव किया जा सकता है. Palette ऑब्जेक्ट की मदद से, Bitmap इमेज के रंगों को ऐक्सेस किया जा सकता है. साथ ही, बिटमैप से छह मुख्य कलर प्रोफ़ाइलें भी मिलती हैं, ताकि आपको डिज़ाइन के विकल्पों के बारे में जानकारी मिल सके.

लाइब्रेरी सेट अप करना

Palette लाइब्रेरी का इस्तेमाल करने के लिए, अपने build.gradle में यह जानकारी जोड़ें:

android {
    compileSdkVersion(33)
    ...
}

dependencies {
    ...
    implementation("androidx.palette:palette:1.0.0")
}

android {
    compileSdkVersion 33
    ...
}

dependencies {
    ...
    implementation 'androidx.palette:palette:1.0.0'
}

पैलेट बनाना

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

पैलेट बनाने के लिए, पहले Bitmap से Palette.Builder को इंस्टैंशिएट करें. इसके बाद, पैलेट जनरेट करने से पहले, Palette.Builder का इस्तेमाल करके उसे पसंद के मुताबिक बनाया जा सकता है. इस सेक्शन में, बिटमैप इमेज से पैलेट जनरेट करने और उसे पसंद के मुताबिक बनाने के बारे में बताया गया है.

पैलेट का इंस्टेंस जनरेट करना

Bitmap से Palette.Builder बनाने के लिए, from(Bitmap bitmap) वाले तरीके का इस्तेमाल करके Palette इंस्टेंस जनरेट करें.

बिल्डर, पैलेट को सिंक्रोनस या एसिंक्रोनस तरीके से जनरेट कर सकता है. अगर आपको उसी थ्रेड पर पैलेट बनाना है जिस पर तरीका कॉल किया जा रहा है, तो पैलेट को सिंक्रोनस तरीके से जनरेट करने का इस्तेमाल करें. अगर पैलेट को किसी दूसरी थ्रेड पर, एक साथ जनरेट किया जाता है, तो पैलेट बनने के तुरंत बाद उसे ऐक्सेस करने के लिए, onGenerated() के तरीके का इस्तेमाल करें.

नीचे दिए गए कोड स्निपेट में, पैलेट जनरेट करने के दोनों तरीकों के उदाहरण दिए गए हैं:

// Generate palette synchronously and return it.
fun createPaletteSync(bitmap: Bitmap): Palette = Palette.from(bitmap).generate()

// Generate palette asynchronously and use it on a different thread using onGenerated().
fun createPaletteAsync(bitmap: Bitmap) {
    Palette.from(bitmap).generate { palette ->
        // Use generated instance.
    }
}

// Generate palette synchronously and return it.
public Palette createPaletteSync(Bitmap bitmap) {
  Palette p = Palette.from(bitmap).generate();
  return p;
}

// Generate palette asynchronously and use it on a different thread using onGenerated().
public void createPaletteAsync(Bitmap bitmap) {
  Palette.from(bitmap).generate(new PaletteAsyncListener() {
    public void onGenerated(Palette p) {
      // Use generated instance.
    }
  });
}

अगर आपको क्रम से लगाई गई इमेज या ऑब्जेक्ट की सूची के लिए, लगातार पैलेट जनरेट करने की ज़रूरत है, तो यूज़र इंटरफ़ेस (यूआई) की परफ़ॉर्मेंस धीमी होने से बचाने के लिए, Palette इंस्टेंस को कैश मेमोरी में सेव करें. मुख्य थ्रेड पर पैलेट न बनाएं.

पैलेट को पसंद के मुताबिक बनाना

Palette.Builder की मदद से, अपने पैलेट को पसंद के मुताबिक बनाया जा सकता है. इसके लिए, यह चुना जा सकता है कि पैलेट में कितने रंग होने चाहिए, पैलेट जनरेट करने के लिए बिल्डर आपकी इमेज के किस हिस्से का इस्तेमाल करेगा, और पैलेट में कौनसे रंग शामिल किए जाएं. उदाहरण के लिए, काले रंग को फ़िल्टर किया जा सकता है या यह पक्का किया जा सकता है कि बिल्डर, पैलेट जनरेट करने के लिए सिर्फ़ इमेज के ऊपरी हिस्से का इस्तेमाल करे.

Palette.Builder क्लास में दिए गए इन तरीकों की मदद से, अपने पैलेट के साइज़ और रंगों में बदलाव करें:

addFilter()

इस तरीके से एक फ़िल्टर जुड़ता है, जो यह बताता है कि पैलेट में किन रंगों का इस्तेमाल किया जा सकता है. अपने Palette.Filter को पास करें और isAllowed() के तरीके में बदलाव करें, ताकि यह तय किया जा सके कि पैलेट से कौनसे रंग फ़िल्टर किए जाएं.

maximumColorCount()

यह तरीका, आपके पैलेट में ज़्यादा से ज़्यादा रंग सेट करता है. डिफ़ॉल्ट वैल्यू 16 होती है. हालांकि, सोर्स इमेज के हिसाब से, यह वैल्यू कम या ज़्यादा हो सकती है. लैंडस्केप के लिए, ऑप्टिमम वैल्यू 8 से 16 के बीच होती हैं. वहीं, आम तौर पर चेहरे वाली तस्वीरों के लिए, वैल्यू 24 से 32 के बीच होती हैं. Palette.Builder को ज़्यादा रंगों वाले पैलेट जनरेट करने में ज़्यादा समय लगता है.

setRegion()

इस तरीके से पता चलता है कि पैलेट बनाते समय, बिल्डर बिटमैप के किस हिस्से का इस्तेमाल करता है. इस तरीके का इस्तेमाल सिर्फ़ बिटमैप से पैलेट जनरेट करने के लिए किया जा सकता है. इससे ओरिजनल इमेज पर कोई असर नहीं पड़ता.

addTarget()

इस तरीके से, बिल्डर में Target कलर प्रोफ़ाइल जोड़कर, अपनी पसंद के मुताबिक कलर मैचिंग की जा सकती है. अगर डिफ़ॉल्ट Target का इस्तेमाल करने पर, Target.Builder के लिए ज़रूरी शर्तें पूरी नहीं होती हैं, तो बेहतर डेवलपर Target.Builder का इस्तेमाल करके, अपने हिसाब से Target बना सकते हैं.

कलर प्रोफ़ाइलें निकालना

Material Design के स्टैंडर्ड के आधार पर, पैलेट लाइब्रेरी किसी इमेज से आम तौर पर इस्तेमाल होने वाली कलर प्रोफ़ाइलें निकालती है. हर प्रोफ़ाइल को Target से दिखाया जाता है. साथ ही, बिटमैप इमेज से निकाले गए रंगों को हर प्रोफ़ाइल के हिसाब से, संतृप्ति, चमक, और पॉप्युलेशन (रंग से दिखाए गए बिटमैप में पिक्सल की संख्या) के आधार पर स्कोर दिया जाता है. हर प्रोफ़ाइल के लिए, सबसे अच्छा स्कोर वाला रंग, दी गई इमेज के लिए उस कलर प्रोफ़ाइल को तय करता है.

डिफ़ॉल्ट रूप से, किसी Palette ऑब्जेक्ट में किसी दी गई इमेज के 16 मुख्य रंग होते हैं. पैलेट जनरेट करते समय, Palette.Builder का इस्तेमाल करके, पैलेट में रंगों की संख्या को पसंद के मुताबिक बनाया जा सकता है. ज़्यादा रंगों को निकालने से, हर कलर प्रोफ़ाइल के लिए ज़्यादा संभावित मैच मिलते हैं. हालांकि, इससे पैलेट जनरेट करने में Palette.Builder को ज़्यादा समय लगता है.

पैलेट लाइब्रेरी, इन छह कलर प्रोफ़ाइलों को निकालने की कोशिश करती है:

• लाइट वाइब्रेंट
• वाइब्रेंट
• डार्क वाइब्रेंट
• लाइट म्यूट
• म्यूट किया गया
• डार्क म्यूट

Palette में मौजूद हर get<Profile>Color() तरीका, उस प्रोफ़ाइल से जुड़े पैलेट में रंग दिखाता है. इसमें <Profile> को छह कलर प्रोफ़ाइलों में से किसी एक के नाम से बदल दिया जाता है. उदाहरण के लिए, गहरे रंग वाली वाइब्रेंट कलर प्रोफ़ाइल पाने का तरीका getDarkVibrantColor() है. सभी इमेज में सभी कलर प्रोफ़ाइलें मौजूद नहीं होतीं. इसलिए, इमेज में दिखने वाला डिफ़ॉल्ट रंग डालें.

पहले चित्र में, एक फ़ोटो और get<Profile>Color() तरीकों से मिली उस फ़ोटो की कलर प्रोफ़ाइलें दिखाई गई हैं.

कलर स्कीम बनाने के लिए, स्वैच का इस्तेमाल करना

Palette क्लास, हर कलर प्रोफ़ाइल के लिए Palette.Swatch ऑब्जेक्ट भी जनरेट करती है. Palette.Swatch ऑब्जेक्ट में, उस प्रोफ़ाइल से जुड़ा रंग और पिक्सल में रंग की संख्या शामिल होती है.

कलर प्रोफ़ाइल के बारे में ज़्यादा जानकारी ऐक्सेस करने के लिए, स्वाॅच के पास अन्य तरीके होते हैं. जैसे, एचएसएल वैल्यू और पिक्सल पॉप्युलेशन. getBodyTextColor() और getTitleTextColor() तरीकों का इस्तेमाल करके, ज़्यादा बेहतर कलर स्कीम और ऐप्लिकेशन थीम बनाने के लिए, स्वाॅच का इस्तेमाल किया जा सकता है. ये तरीके, स्वैच के रंग के साथ इस्तेमाल करने के लिए सही रंग दिखाते हैं.

Palette में मौजूद हर get<Profile>Swatch() तरीका, उस प्रोफ़ाइल से जुड़ा स्वैच दिखाता है. इसमें <Profile> की जगह, छह कलर प्रोफ़ाइलों में से किसी एक का नाम दिखता है. हालांकि, पैलेट के get<Profile>Swatch() तरीकों के लिए डिफ़ॉल्ट वैल्यू पैरामीटर ज़रूरी नहीं हैं, लेकिन अगर इमेज में वह प्रोफ़ाइल मौजूद नहीं है, तो वे null दिखाते हैं. इसलिए, इस्तेमाल करने से पहले देख लें कि कोई स्वैच शून्य तो नहीं है. उदाहरण के लिए, अगर वाइब्रेंट स्वैच की वैल्यू शून्य नहीं है, तो नीचे दिए गए कोड से पैलेट में मौजूद टाइटल टेक्स्ट का रंग मिलता है:

val vibrant = myPalette.vibrantSwatch
// In Kotlin, check for null before accessing properties on the vibrant swatch.
val titleColor = vibrant?.titleTextColor

Palette.Swatch vibrant = myPalette.getVibrantSwatch();
if(vibrant != null){
    int titleColor = vibrant.getTitleTextColor();
    // ...
}

किसी पैलेट में सभी रंगों को ऐक्सेस करने के लिए, getSwatches() तरीका, इमेज से जनरेट किए गए सभी स्वैच की सूची दिखाता है. इसमें स्टैंडर्ड छह कलर प्रोफ़ाइलें भी शामिल हैं.

नीचे दिया गया कोड स्निपेट, पिछले कोड स्निपेट के तरीकों का इस्तेमाल करके, एक साथ पैलेट जनरेट करता है. साथ ही, उसका शानदार स्वैच पाता है और बिटमैप इमेज से मैच करने के लिए टूलबार के रंगों को बदलता है. दूसरी इमेज में, नतीजे के तौर पर मिली इमेज और टूलबार दिखाया गया है.

// Set the background and text colors of a toolbar given a bitmap image to
// match.
fun setToolbarColor(bitmap: Bitmap) {
    // Generate the palette and get the vibrant swatch.
    val vibrantSwatch = createPaletteSync(bitmap).vibrantSwatch

    // Set the toolbar background and text colors.
    // Fall back to default colors if the vibrant swatch isn't available.
    with(findViewById<Toolbar>(R.id.toolbar)) {
        setBackgroundColor(vibrantSwatch?.rgb ?:
                ContextCompat.getColor(context, R.color.default_title_background))
        setTitleTextColor(vibrantSwatch?.titleTextColor ?:
                ContextCompat.getColor(context, R.color.default_title_color))
    }
}

// Set the background and text colors of a toolbar given a bitmap image to
// match.
public void setToolbarColor(Bitmap bitmap) {
    // Generate the palette and get the vibrant swatch.
    // See the createPaletteSync() method from the preceding code snippet.
    Palette p = createPaletteSync(bitmap);
    Palette.Swatch vibrantSwatch = p.getVibrantSwatch();

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

    // Load default colors.
    int backgroundColor = ContextCompat.getColor(getContext(),
        R.color.default_title_background);
    int textColor = ContextCompat.getColor(getContext(),
        R.color.default_title_color);

    // Check that the Vibrant swatch is available.
    if(vibrantSwatch != null){
        backgroundColor = vibrantSwatch.getRgb();
        textColor = vibrantSwatch.getTitleTextColor();
    }

    // Set the toolbar background and text colors.
    toolbar.setBackgroundColor(backgroundColor);
        toolbar.setTitleTextColor(textColor);
}