একটি সফল অ্যাপের জন্য ভাল ভিজ্যুয়াল ডিজাইন অপরিহার্য, এবং রঙের স্কিমগুলি ডিজাইনের একটি প্রাথমিক উপাদান। প্যালেট লাইব্রেরি হল একটি জেটপ্যাক লাইব্রেরি যা দৃশ্যত আকর্ষক অ্যাপ তৈরি করতে ছবি থেকে বিশিষ্ট রং বের করে।
আপনি প্যালেট লাইব্রেরি ব্যবহার করতে পারেন লেআউট থিম ডিজাইন করতে এবং আপনার অ্যাপের ভিজ্যুয়াল উপাদানগুলিতে কাস্টম রং প্রয়োগ করতে। উদাহরণস্বরূপ, আপনি একটি গানের অ্যালবামের কভারের উপর ভিত্তি করে একটি রঙ-সমন্বিত শিরোনাম কার্ড তৈরি করতে বা একটি অ্যাপের টুলবারের রঙ সামঞ্জস্য করার জন্য একটি প্যালেট ব্যবহার করতে পারেন যখন এটির পটভূমি চিত্র পরিবর্তন হয়। Palette অবজেক্ট আপনাকে একটি Bitmap চিত্রের রঙগুলিতে অ্যাক্সেস দেয় এবং আপনার ডিজাইন পছন্দগুলি জানাতে বিটম্যাপ থেকে ছয়টি প্রধান রঙের প্রোফাইল সরবরাহ করে।
লাইব্রেরি সেট আপ করুন
প্যালেট লাইব্রেরি ব্যবহার করতে, আপনার 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.
}
});
}
আপনি যদি ছবি বা বস্তুর একটি সাজানো তালিকার জন্য ক্রমাগত প্যালেট তৈরি করতে চান, তাহলে ধীর UI কর্মক্ষমতা রোধ করতে Palette উদাহরণগুলি ক্যাশ করার কথা বিবেচনা করুন। আপনার প্রধান থ্রেডে প্যালেট তৈরি করবেন না।
আপনার প্যালেট কাস্টমাইজ করুন
Palette.Builder আপনাকে ফলাফল প্যালেটে কতগুলি রঙ রয়েছে তা চয়ন করে আপনার প্যালেটটি কাস্টমাইজ করতে দেয়, প্যালেট তৈরি করতে নির্মাতা আপনার চিত্রের কোন অংশটি ব্যবহার করে এবং প্যালেটে কোন রঙগুলি অন্তর্ভুক্ত রয়েছে৷ উদাহরণস্বরূপ, আপনি কালো রঙটি ফিল্টার করতে পারেন বা নিশ্চিত করতে পারেন যে নির্মাতা আপনার প্যালেট তৈরি করতে একটি চিত্রের উপরের অর্ধেকটি ব্যবহার করে।
Palette.Builder ক্লাস থেকে নিম্নলিখিত পদ্ধতিগুলির সাহায্যে আপনার প্যালেটের আকার এবং রঙগুলি সূক্ষ্ম-টিউন করুন:
-
addFilter() - এই পদ্ধতিটি একটি ফিল্টার যোগ করে যা নির্দেশ করে যে ফলিত প্যালেটে কোন রং অনুমোদিত। আপনার নিজস্ব
Palette.Filterপাস করুন৷ প্যালেট থেকে কোন রঙগুলি ফিল্টার করা হয়েছে তা নির্ধারণ করতে এটিরisAllowed()পদ্ধতি ফিল্টার করুন এবং সংশোধন করুন৷ -
maximumColorCount() - এই পদ্ধতিটি আপনার প্যালেটে সর্বাধিক সংখ্যক রঙ সেট করে। ডিফল্ট মান হল 16, এবং সর্বোত্তম মান উৎস চিত্রের উপর নির্ভর করে। ল্যান্ডস্কেপের জন্য, সর্বোত্তম মান 8-16 এর মধ্যে থাকে, যখন মুখের ছবিগুলির মান সাধারণত 24-32 হয়।
Palette.Builderআরও রঙের প্যালেট তৈরি করতে বেশি সময় নেয়। -
setRegion() - প্যালেট তৈরি করার সময় নির্মাতা বিটম্যাপের কোন এলাকা ব্যবহার করেন এই পদ্ধতিটি নির্দেশ করে। আপনি শুধুমাত্র একটি বিটম্যাপ থেকে প্যালেট তৈরি করার সময় এই পদ্ধতিটি ব্যবহার করতে পারেন এবং এটি মূল চিত্রকে প্রভাবিত করে না।
-
addTarget() - এই পদ্ধতিটি আপনাকে নির্মাতার সাথে একটি
Targetরঙের প্রোফাইল যোগ করে আপনার নিজস্ব রঙের ম্যাচিং করতে দেয়। যদি ডিফল্টTargetঅপর্যাপ্ত হয়, তবে উন্নত বিকাশকারীরা একটিTarget.Builderব্যবহার করে তাদের নিজস্বTargetতৈরি করতে পারে।
রঙ প্রোফাইল নিষ্কাশন
ম্যাটেরিয়াল ডিজাইনের মানগুলির উপর ভিত্তি করে, প্যালেট লাইব্রেরি একটি চিত্র থেকে সাধারণত ব্যবহৃত রঙের প্রোফাইলগুলি বের করে। প্রতিটি প্রোফাইল একটি Target দ্বারা সংজ্ঞায়িত করা হয়, এবং বিটম্যাপ ইমেজ থেকে নিষ্কাশিত রঙগুলি প্রতিটি প্রোফাইলের বিপরীতে স্যাচুরেশন, আলোকসজ্জা এবং জনসংখ্যার (রঙ দ্বারা প্রতিনিধিত্ব করা বিটম্যাপে পিক্সেলের সংখ্যা) উপর ভিত্তি করে স্কোর করা হয়। প্রতিটি প্রোফাইলের জন্য, সেরা স্কোর সহ রঙটি প্রদত্ত ছবির জন্য সেই রঙের প্রোফাইলটিকে সংজ্ঞায়িত করে।
ডিফল্টরূপে, একটি Palette অবজেক্টে একটি প্রদত্ত চিত্র থেকে 16টি প্রাথমিক রঙ থাকে। আপনার প্যালেট তৈরি করার সময়, আপনি Palette.Builder ব্যবহার করে এর রঙের সংখ্যা কাস্টমাইজ করতে পারেন। আরও রঙ বের করা প্রতিটি রঙের প্রোফাইলের জন্য আরও সম্ভাব্য মিল সরবরাহ করে, তবে এটি Palette.Builder তৈরি করার সময় প্যালেট তৈরি করতে বেশি সময় নেয়।
প্যালেট লাইব্রেরি নিম্নলিখিত ছয়টি রঙের প্রোফাইল বের করার চেষ্টা করে:
- হালকা প্রাণবন্ত
- প্রাণবন্ত
- ডার্ক ভাইব্রেন্ট
- হালকা নিঃশব্দ
- নিঃশব্দ
- অন্ধকার নিঃশব্দ
Palette প্রতিটি get< Profile >Color() পদ্ধতি সেই নির্দিষ্ট প্রোফাইলের সাথে যুক্ত প্যালেটের রঙ ফেরত দেয়, যেখানে ছয়টি রঙের প্রোফাইলের একটির নাম দ্বারা প্রতিস্থাপিত হয় < Profile > । উদাহরণস্বরূপ, ডার্ক ভাইব্রেন্ট কালার প্রোফাইল পাওয়ার পদ্ধতি হল getDarkVibrantColor() । যেহেতু সমস্ত ছবিতে সমস্ত রঙের প্রোফাইল থাকে না, তাই ফিরে আসার জন্য একটি ডিফল্ট রঙ প্রদান করুন।
চিত্র 1 একটি ছবি এবং তার সংশ্লিষ্ট রঙের প্রোফাইলগুলি 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() পদ্ধতিটি আদর্শ ছয়টি রঙের প্রোফাইল সহ একটি চিত্র থেকে উত্পন্ন সমস্ত সোয়াচের একটি তালিকা প্রদান করে।
কোডের নিম্নলিখিত স্নিপেটটি পূর্ববর্তী কোড স্নিপেটগুলি থেকে পদ্ধতিগুলি ব্যবহার করে সিঙ্ক্রোনাসভাবে একটি প্যালেট তৈরি করতে, এর প্রাণবন্ত সোয়াচ পেতে এবং বিটম্যাপ চিত্রের সাথে মেলে একটি টুলবারের রঙ পরিবর্তন করতে। চিত্র 2 ফলস্বরূপ চিত্র এবং টুলবার প্রদর্শন করে।
কোটলিন
// 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);
}
