প্যালেট API দিয়ে রং নির্বাচন করুন

একটি সফল অ্যাপের জন্য ভালো ভিজ্যুয়াল ডিজাইন অপরিহার্য, এবং কালার স্কিম হলো ডিজাইনের একটি প্রধান উপাদান। প্যালেট লাইব্রেরি হলো একটি জেটপ্যাক লাইব্রেরি যা ছবি থেকে প্রধান রঙগুলো বের করে এনে দৃষ্টিনন্দন অ্যাপ তৈরি করে।

আপনি আপনার অ্যাপের লেআউট থিম ডিজাইন করতে এবং ভিজ্যুয়াল এলিমেন্টগুলিতে কাস্টম রঙ প্রয়োগ করতে প্যালেট লাইব্রেরি ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি একটি গানের অ্যালবাম কভারের উপর ভিত্তি করে তার জন্য একটি রঙ-সমন্বিত টাইটেল কার্ড তৈরি করতে অথবা অ্যাপের ব্যাকগ্রাউন্ড ইমেজ পরিবর্তন হলে তার টুলবারের রঙ সামঞ্জস্য করতে একটি প্যালেট ব্যবহার করতে পারেন। Palette অবজেক্টটি আপনাকে একটি Bitmap ইমেজের রঙগুলো ব্যবহারের সুযোগ দেয় এবং একই সাথে আপনার ডিজাইনের সিদ্ধান্তগুলোকে প্রভাবিত করার জন্য বিটম্যাপ থেকে ছয়টি প্রধান কালার প্রোফাইলও সরবরাহ করে।

লাইব্রেরি সেট আপ করুন

Palette লাইব্রেরি ব্যবহার করতে, আপনার build.gradle ফাইলে নিম্নলিখিতটি যোগ করুন:

android {
    compileSdkVersion(36)
    ...
}

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

android {
    compileSdkVersion 36
    ...
}

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

যদি আপনাকে ছবি বা অবজেক্টের একটি সাজানো তালিকার জন্য ক্রমাগত প্যালেট তৈরি করতে হয়, তাহলে UI-এর ধীরগতি রোধ করতে Palette ইনস্ট্যান্সগুলো ক্যাশ করার কথা বিবেচনা করুন। আপনার প্রধান থ্রেডে প্যালেটগুলো তৈরি করবেন না।

আপনার প্যালেট কাস্টমাইজ করুন

Palette.Builder আপনাকে আপনার প্যালেট কাস্টমাইজ করার সুযোগ দেয়। এর মাধ্যমে আপনি বেছে নিতে পারেন যে, চূড়ান্ত প্যালেটে কয়টি রঙ থাকবে, বিল্ডারটি প্যালেট তৈরি করতে আপনার ছবির কোন অংশ ব্যবহার করবে এবং প্যালেটে কোন কোন রঙ অন্তর্ভুক্ত থাকবে। উদাহরণস্বরূপ, আপনি কালো রঙ ফিল্টার করে বাদ দিতে পারেন অথবা এটি নিশ্চিত করতে পারেন যে, বিল্ডারটি আপনার প্যালেট তৈরি করার জন্য শুধুমাত্র ছবির উপরের অর্ধেক অংশ ব্যবহার করবে।

Palette.Builder ক্লাসের নিম্নলিখিত মেথডগুলো ব্যবহার করে আপনার প্যালেটের আকার ও রং সূক্ষ্মভাবে সমন্বয় করুন:

addFilter()

এই মেথডটি একটি ফিল্টার যোগ করে, যা নির্দেশ করে যে চূড়ান্ত প্যালেটে কোন রংগুলো অনুমোদিত হবে। আপনার নিজের Palette.Filter পাস করুন এবং প্যালেট থেকে কোন রংগুলো ফিল্টার করা হবে তা নির্ধারণ করতে এর isAllowed() মেথডটি পরিবর্তন করুন।

maximumColorCount()

এই পদ্ধতিটি আপনার প্যালেটে রঙের সর্বোচ্চ সংখ্যা নির্ধারণ করে। এর ডিফল্ট মান হলো ১৬, এবং সর্বোত্তম মানটি উৎস ছবির উপর নির্ভর করে। প্রাকৃতিক দৃশ্যের জন্য সর্বোত্তম মান ৮-১৬ এর মধ্যে থাকে, অন্যদিকে মুখমণ্ডলযুক্ত ছবির ক্ষেত্রে সাধারণত ২৪-৩২ এর মধ্যে মান পাওয়া যায়। বেশি রঙের প্যালেট তৈরি করতে Palette.Builder বেশি সময় লাগে।

setRegion()

এই পদ্ধতিটি নির্দেশ করে যে প্যালেট তৈরি করার সময় বিল্ডার বিটম্যাপের কোন অংশ ব্যবহার করবে। আপনি শুধুমাত্র বিটম্যাপ থেকে প্যালেট তৈরি করার সময় এই পদ্ধতিটি ব্যবহার করতে পারবেন এবং এটি মূল ছবির উপর কোনো প্রভাব ফেলে না।

addTarget()

এই পদ্ধতিটি আপনাকে বিল্ডারে একটি Target কালার প্রোফাইল যোগ করে নিজের মতো করে কালার মেলানোর সুযোগ দেয়। যদি ডিফল্ট Target যথেষ্ট না হয়, তবে অভিজ্ঞ ডেভেলপাররা Target.Builder ব্যবহার করে নিজেদের Target তৈরি করতে পারেন।

রঙের প্রোফাইল বের করুন

ম্যাটেরিয়াল ডিজাইনের মানদণ্ডের উপর ভিত্তি করে, প্যালেট লাইব্রেরি একটি ছবি থেকে সচরাচর ব্যবহৃত রঙের প্রোফাইলগুলো বের করে আনে। প্রতিটি প্রোফাইল একটি Target দ্বারা সংজ্ঞায়িত করা হয়, এবং বিটম্যাপ ছবি থেকে বের করা রঙগুলোকে স্যাচুরেশন, লুমিন্যান্স এবং পপুলেশন (বিটম্যাপে রঙটি দ্বারা প্রতিনিধিত্ব করা পিক্সেলের সংখ্যা)-এর উপর ভিত্তি করে প্রতিটি প্রোফাইলের সাপেক্ষে স্কোর দেওয়া হয়। প্রতিটি প্রোফাইলের জন্য, সর্বোচ্চ স্কোর পাওয়া রঙটিই প্রদত্ত ছবির জন্য সেই রঙের প্রোফাইলটিকে নির্ধারণ করে।

ডিফল্টরূপে, একটি Palette অবজেক্টে প্রদত্ত ছবি থেকে ১৬টি প্রাথমিক রঙ থাকে। আপনার প্যালেট তৈরি করার সময়, আপনি Palette.Builder ব্যবহার করে এর রঙের সংখ্যা কাস্টমাইজ করতে পারেন। আরও রঙ নিলে প্রতিটি কালার প্রোফাইলের জন্য আরও বেশি সম্ভাব্য মিল পাওয়া যায়, কিন্তু এর ফলে প্যালেট তৈরি করতে Palette.Builder বেশি সময় লাগে।

প্যালেট লাইব্রেরিটি নিম্নলিখিত ছয়টি রঙের প্রোফাইল বের করার চেষ্টা করে:

• হালকা প্রাণবন্ত
• প্রাণবন্ত
• গাঢ় প্রাণবন্ত
• আলো ম্লান
• ম্লান
• অন্ধকার ম্লান

Palette এর প্রতিটি get< Profile >Color() মেথড সেই নির্দিষ্ট প্রোফাইলের সাথে যুক্ত প্যালেটের রঙটি রিটার্ন করে, যেখানে < Profile > জায়গায় ছয়টি কালার প্রোফাইলের যেকোনো একটির নাম বসে। উদাহরণস্বরূপ, Dark Vibrant কালার প্রোফাইলটি পাওয়ার মেথডটি হলো getDarkVibrantColor() । যেহেতু সব ইমেজে সব কালার প্রোফাইল থাকে না, তাই রিটার্ন করার জন্য একটি ডিফল্ট রঙ প্রদান করুন।

চিত্র ১-এ একটি ছবি এবং get< Profile >Color() মেথড থেকে প্রাপ্ত এর সংশ্লিষ্ট রঙের প্রোফাইলগুলো দেখানো হয়েছে।

রঙের বিন্যাস তৈরি করতে নমুনা ব্যবহার করুন

Palette ক্লাসটি প্রতিটি কালার প্রোফাইলের জন্য Palette.Swatch অবজেক্টও তৈরি করে। Palette.Swatch অবজেক্টগুলোতে সেই প্রোফাইলের সংশ্লিষ্ট রঙের পাশাপাশি পিক্সেল এককে রঙটির পরিমাণও থাকে।

কালার প্রোফাইল সম্পর্কে আরও তথ্য, যেমন HSL ভ্যালু এবং পিক্সেল পপুলেশন, জানার জন্য সোয়াচগুলোতে অতিরিক্ত মেথড রয়েছে। আপনি getBodyTextColor() এবং getTitleTextColor() মেথডগুলো ব্যবহার করে আরও বিস্তারিত কালার স্কিম এবং অ্যাপ থিম তৈরি করতে পারেন। এই মেথডগুলো সোয়াচের কালারের উপর ব্যবহারের জন্য উপযুক্ত কালার রিটার্ন করে।

Palette প্রতিটি get< Profile >Swatch() মেথড সেই নির্দিষ্ট প্রোফাইলের সাথে যুক্ত সোয়াচটি রিটার্ন করে, যেখানে < Profile > জায়গায় ছয়টি কালার প্রোফাইলের যেকোনো একটির নাম বসে। যদিও প্যালেটের get< Profile >Swatch() মেথডগুলোর জন্য ডিফল্ট ভ্যালু প্যারামিটারের প্রয়োজন হয় না, কিন্তু ইমেজে সেই নির্দিষ্ট প্রোফাইলটি না থাকলে এটি null রিটার্ন করে। তাই, কোনো সোয়াচ ব্যবহার করার আগে সেটি null নয় তা যাচাই করে নিন। উদাহরণস্বরূপ, নিচের কোডটি একটি প্যালেট থেকে টাইটেল টেক্সটের কালারটি নিয়ে আসে যদি Vibrant সোয়াচটি 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);
}