Palette API-এর সাহায্যে রঙ বেছে নিন

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

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

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

প্যালেট লাইব্রেরি ব্যবহার করতে, আপনার 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 ব্যবহার করে প্যালেট তৈরি করার আগে তা কাস্টমাইজ করতে পারবেন। এই বিভাগে বিটম্যাপ ছবি থেকে প্যালেট তৈরি ও কাস্টমাইজ করার পদ্ধতি বর্ণনা করা হয়েছে।

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

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

আপনাকে যদি ছবি বা অবজেক্টের সাজানো তালিকার জন্য ক্রমাগত প্যালেট জেনারেট করতে হয়, তাহলে 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>-এর জায়গায় ছয়টি কালার প্রোফাইলের মধ্যে একটির নাম ব্যবহার করা হয়। যেমন, ডার্ক ভাইব্র্যান্ট কালার প্রোফাইল পাওয়ার পদ্ধতি হল getDarkVibrantColor()। যেহেতু সব ছবিতে সব রঙের প্রোফাইল থাকে না, তাই ডিফল্ট রঙ প্রদান করুন।

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

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

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

কালার প্রোফাইল সম্পর্কে আরও তথ্য অ্যাক্সেস করার জন্য সোয়াচে অতিরিক্ত পদ্ধতি আছে, যেমন HSL ভ্যালু এবং পিক্সেল পপুলেশন। আপনি 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);
}