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

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

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

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

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

Kotlin

android {
    compileSdkVersion(33)
    ...
}

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

Groovy

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() तरीके का इस्तेमाल करें.

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

Kotlin

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

Java

// 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 बना सकते हैं.

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

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

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

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

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

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

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

पहला डायग्राम. पैलेट के लिए, डिफ़ॉल्ट तौर पर ज़्यादा से ज़्यादा रंगों की संख्या (16) के हिसाब से, इमेज और उसकी निकाली गई कलर प्रोफ़ाइल का उदाहरण.

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

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

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

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

Kotlin

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

Java

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

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

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

Kotlin

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

Java

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

दूसरी इमेज. टूलबार और टाइटल के टेक्स्ट के रंग के साथ, चमकीले रंग की इमेज का उदाहरण.