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

किसी ऐप्लिकेशन को सफल बनाने के लिए, उसका विज़ुअल डिज़ाइन अच्छा होना ज़रूरी है. साथ ही, कलर स्कीम डिज़ाइन का मुख्य कॉम्पोनेंट होती हैं. कॉन्टेंट बनाने Palette लाइब्रेरी एक 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 ऑब्जेक्ट की मदद से, इमेज के मुख्य रंगों के साथ-साथ ओवरले किए गए टेक्स्ट के रंगों को भी ऐक्सेस किया जा सकता है. अपने ऐप्लिकेशन की स्टाइल डिज़ाइन करने और किसी सोर्स इमेज के आधार पर, अपने ऐप्लिकेशन की कलर स्कीम को डाइनैमिक तौर पर बदलने के लिए, पैलेट का इस्तेमाल करें.

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

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

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

बिल्डर, पैलेट को सिंक्रोनस या एसिंक्रोनस तरीके से जनरेट कर सकता है. इस्तेमाल की जाने वाली चीज़ें अगर आपको उसी क्रम में पैलेट बनाना है, तो थ्रेड को कॉल किया जा रहा है. अगर एसिंक्रोनस तरीके से पैलेट जनरेट किया जाता है, तो अगर आपने अन्य थ्रेड पर जवाब दिया है, तो 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 के बीच होती है. वहीं, चेहरों वाली तस्वीरें आम तौर पर 8 से 16 के बीच की होती हैं की वैल्यू 24 से 32 के बीच होती है. Palette.Builder पूरी होने में ज़्यादा समय लगता है ज़्यादा रंगों वाले पैलेट जनरेट करते हैं.

setRegion()

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

addTarget()

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

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

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

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

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

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

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

आकृति 1 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);
}