আপনার অ্যাপে শুধু টেক্সট ও রঙ থাকলেও, আপনি হয়ত আরও ভিজ্যুয়াল এলিমেন্ট যোগ করতে চাইবেন, যেমন লোগো বা ইলাস্ট্রেশন। গ্রাফিক এফেক্ট তৈরি করতে বা মোশন যোগ করতে বিভিন্ন লাইব্রেরির সাথে আপনার অ্যাপে গ্রাফিক্স যোগ করার জন্য Android-এর নির্দিষ্ট পেশাদার পদ্ধতি রয়েছে।
Android অ্যাসেটকে ড্রয়েবল হিসেবে উল্লেখ করা হয়, এটি এক ধরনের রিসোর্স যা স্ক্রিনে আঁকা হয়। এর মধ্যে বিটম্যাপ, আকার ও ভেক্টর সহ আরও অনেক কিছু পড়ে।
ছবি ও গ্রাফিক্স তৈরি করার সময় নিম্নলিখিত বিষয়গুলি মনে রাখবেন:
- অ্যাসেটে অপরিবর্তনীয় টেক্সট যোগ করা এড়িয়ে চলুন।
- সম্ভব হলে প্রথমে ভেক্টর ফর্ম্যাট ব্যবহার করুন।
- রেজোলিউশন বাকেটের জন্য অ্যাসেট প্রদান করুন।
- ব্যাকগ্রাউন্ড ছবি ও টেক্সটের মধ্যে পর্যাপ্ত স্ক্রিম প্রদান করুন।
- যদিও Android গ্রেডিয়েন্ট, কালারাইজেশন ও ব্লারের মতো বিভিন্ন ধরনের ইমেজ এফেক্ট অর্জন করতে পারে, কিছু কিছু ক্ষেত্রে পারফর্ম্যান্সের খরচ বেশি হয়।
- অ্যানিমেটেড ভেক্টর ড্রয়েবেল ছোট UI অ্যানিমেশনের জন্য স্কেলেবেল ফর্ম্যাট প্রদান করে।
Android-এর জন্য কীভাবে অ্যাসেট এক্সপোর্ট করতে হয়
- অ্যাসেটের নাম ছোট হাতের অক্ষরে লিখুন।
- SVG হিসেবে এক্সপোর্ট করার জন্য সহজ অ্যাসেট সেট করুন।
- WebP, PNG, JPG হিসেবে এক্সপোর্ট করার জন্য ফটোর মতো জটিল ছবি সেট করুন।
- নিচের সারণিতে যেভাবে দেখানো হয়েছে সেই হিসেবে সঠিক রেজোলিউশন স্কেলিং সেট করুন।
| স্ক্রিনের সাইজ | স্কেল |
|---|---|
mdpi |
x১ |
hdpi |
x১.৫ |
xhdpi |
x২ |
xxhdpi |
x৩ |
xxxhdpi |
x৪ |
বিকল্প হিসেবে, আপনি Android Studio ব্যবহার করে SVG-কে ভেক্টর ড্রয়েবেলে (VD) কনভার্ট করতে পারেন। নিচের ছবিতে দেখানো অনুযায়ী, হ্যান্ডঅফের জন্য রেজোলিউশন অনুযায়ী ডিরেক্টরিতে অ্যাসেট সাজান। যেমন, ফোল্ডারের নামে স্ক্রিনের সাইজ অন্তর্ভুক্ত করুন।
অ্যাসেটের ধরন
Android-এ নিম্নলিখিত ধরনের অ্যাসেট কাজ করে।
ভেক্টর
ভেক্টর গ্রাফিক হল একটি লসলেস ফর্ম্যাট, যার অর্থ হল স্কেল করার সময় এটি ভিজ্যুয়াল তথ্য হারায় না। ভেক্টর হল গাণিতিক পয়েন্টের সমষ্টি যা ছবি তৈরি করার জন্য পূরণ করা হয়।
ভেক্টর ফর্ম্যাট
Android-এ নিম্নলিখিত ভেক্টর ইমেজ ফর্ম্যাট কাজ করে: SVG এবং ভেক্টর ড্রয়েবেল।
ভেক্টর ড্রয়েবেল দেখতে SVG-এর মতো হলেও XML-ভিত্তিক। এছাড়াও, এগুলি গ্রেডিয়েন্টের মতো
বিভিন্ন অ্যাট্রিবিউট সাপোর্ট করে। কোন কোন ফাইল কাজ করে সেই সম্পর্কে আরও জানতে,
VectorDrawable দেখুন। আপনি ভেক্টর অ্যাসেট স্টুডিও-এর মাধ্যমে
SVG-কে ভেক্টর ড্রয়েবেলে কনভার্ট করতে পারবেন।
উদাহরণ
আইকন ছোট সাইজের হয় বলে ভেক্টর ফর্ম্যাট ব্যবহার করে আইকন তৈরি করা সবচেয়ে ভালো। কোনও আইকনে মোশন যোগ করতে অ্যানিমেটেড ভেক্টর ড্রয়েবেল ব্যবহার করা যেতে পারে।
- ইলাস্ট্রেশন হল এমন গ্রাফিক্স যা ব্যবহারকারীদের নির্দেশ দিতে, ধারণা ব্যাখ্যা করতে বা আইডিয়া প্রকাশ করতে সাহায্য করে। এগুলি সাধারণত ব্র্যান্ড স্টাইল প্রকাশ করে।
- হিরো ইলাস্ট্রেশন বাকি কন্টেন্টের মধ্যে সবচেয়ে বেশি জোর দেয়, যা সামগ্রিক লুক ও ফিল সেট করতে এবং প্রাথমিক তথ্য ব্যাখ্যা করতে ব্যবহার করা হয়।
- স্পট ইলাস্ট্রেশন ছোট হয়, সাধারণত ইনলাইন হয় এবং আশেপাশের কন্টেন্টকে সমর্থন করে।
রাস্টার
লসি গ্রাফিক বা এমন গ্রাফিক যা কম্প্রেস বা স্কেল করার সময় ডিটেল হারিয়ে ফেলে, সেটি পিক্সেল দিয়ে তৈরি হয়। ফটো বা জটিল গ্রেডিয়েন্টের মতো বিস্তারিত ছবির জন্য সাধারণত রাস্টার গ্রাফিক্স ব্যবহার করা হয়। স্কেল করার সময় এগুলি ডিটেল হারিয়ে ফেলে, তাই এইসব ছবির একাধিক রেজোলিউশন এক্সপোর্ট করুন।
রাস্টার ফর্ম্যাট
Android-এ নিম্নলিখিত রাস্টার ইমেজ ফর্ম্যাট কাজ করে: PNG, GIF, JPG, WebP.
উদাহরণ
ব্যবহারের ক্ষেত্রে এমন ছবি অন্তর্ভুক্ত থাকে যাতে বিভিন্ন ধরনের টেক্সচার থাকে যার ফলে একটি বিস্তৃত রঙের প্যালেট এবং গ্রেডেশন বা এমন ছবি থাকে যাতে বেজিয়ার পয়েন্টের একটি অতিরিক্ত জটিল সেট থাকে। ব্যবহারের ক্ষেত্রে প্রোডাক্টের ফটো, লোকেশনের বিবরণ এবং আরও অনেক কিছুর মতো অত্যন্ত বিস্তারিত ফটো অ্যাসেটও অন্তর্ভুক্ত থাকতে পারে।
ঘড়ি সারানো
অ্যাসেট তৈরি করার সময় নিম্নলিখিত বিষয়গুলি মনে রাখবেন।
রেজোলিউশন বাকেট
আপনার অ্যাপকে স্ক্রিন ডেনসিটি রেঞ্জ বা বাকেটের উপর ভিত্তি করে বিটম্যাপ গ্রাফিক্স প্রদান করতে হবে অথবা অপারেটিং সিস্টেম অটোমেটিক এই বালতিগুলি ব্যবহার করে সংশ্লিষ্ট ডিভাইসে সঠিক গ্রাফিক প্রদর্শন করে। প্রতিটি বাকেটের জন্য অ্যাসেট প্রদান করে প্রতিটি ডিভাইসে হাই-ফিডেলিটি গ্রাফিক্স দেখানো নিশ্চিত করুন।
প্যাডিং
আইকন ও একই ধরনের ছোট অ্যাসেটে অন্তর্নিহিত (বিল্ট-ইন) প্যাডিং থাকতে হবে যাতে অ্যাসেটে যথেষ্ট টাচ টার্গেট স্পেস থাকে এবং সাইজ সামঞ্জস্যপূর্ণ হয়।
ফাইলের নাম
Android অ্যাসেট ছোট হাতের অক্ষরে লেখা হয় এবং এতে রেজোলিউশন সাফিক্স থাকে না।
আপনার ফাইল ও প্রোজেক্ট সাজিয়ে রাখতে, নামকরণ ও স্ট্রাকচার একই রকম রাখুন। যেমন, "ic_…" প্রিফিক্স দিয়ে আইকনের নাম দিলে আপনার প্রোজেক্টের সব আইকন সাজাতে এবং ডেভেলপমেন্টের সময় আইকন দ্রুত শনাক্ত করতে সাহায্য করতে পারে।
অন্যান্য অ্যাপ অ্যাসেট
অ্যাপ আইকন
হোমস্ক্রিনে লঞ্চার আইকন দেখা যায়। সিস্টেম UI-তে মনোক্রোম আইকন খুঁজুন, যার মধ্যে মনোক্রোম বিজ্ঞপ্তি, স্ট্যাটাস বার ও উইজেট অন্তর্ভুক্ত।
অ্যাডাপ্টিভ আইকনের জন্য ভেক্টর ড্রয়েবেল এবং লিগ্যাসি আইকনের জন্য PNG হিসেবে অ্যাপ আইকন ফর্ম্যাট করুন। আপনার অ্যাপ আইকন তৈরি ও প্রিভিউ করা সম্পর্কে আরও জানতে, আপনার অ্যাপ আইকন ডিজাইন ও প্রিভিউ করুন দেখুন।
স্প্ল্যাশ স্ক্রিন
Android 12 থেকে শুরু করে, আপনার অ্যাপ একটি অ্যানিমেটেড স্প্ল্যাশ স্ক্রিন দেখাতে পারে যা আপনার অ্যাপ খোলার সময় অ্যাপ আইকন দেখায়।
প্লেসমেন্ট
স্ক্রিনে ছবি কীভাবে স্কেল ও পজিশন করা উচিত তা লক্ষ্য করুন। Fit, Crop, FillHeight, FillWidth, FillBounds, Inside এবং None বিকল্পগুলি কোনও ছবিতে স্কেলিং সেট করার জন্য উপলভ্য।
এছাড়াও, অতিরিক্ত এফেক্ট তৈরি করতে আপনি কোনও শেপে ছবি ক্লিপ করতে পারেন।
রেসপন্সিভ ক্রপিং
রেসপন্সিভভাবে ছবি দেখাতে, বিভিন্ন ব্রেকপয়েন্ট রেঞ্জে কীভাবে ছবি ক্রপ করা হবে তা নির্ধারণ করুন। বিভিন্ন ব্রেকপয়েন্ট রেঞ্জে ক্রপ করার ফলে:
- একটি নির্দিষ্ট অনুপাত বজায় রাখুন।
- বিভিন্ন অনুপাতের সাথে মানানসই।
- ছবির উচ্চতা নির্দিষ্ট রাখুন।
একটি অনুপাত বজায় রাখুন
ছবির সাইজ ব্রেকপয়েন্ট রেঞ্জ জুড়ে একটি নির্দিষ্ট অনুপাত ধরে রাখতে পারে।
বিভিন্ন অনুপাতের সাথে মানিয়ে নেওয়া
বিভিন্ন ব্রেকপয়েন্ট রেঞ্জের সাথে মানানসই করে ছবির অনুপাত পরিবর্তন করা যেতে পারে। যেমন, ৯ নম্বর ছবিতে ব্রেকপয়েন্টের মধ্যে ছবির অনুপাত ১:১ থেকে ১৬:৯-এ পরিবর্তিত হয়।
ছবির নির্দিষ্ট উচ্চতা
ছবির সাইজ ব্রেকপয়েন্ট রেঞ্জের মধ্যে ও জুড়ে নির্দিষ্ট উচ্চতা ও ফ্লুইড প্রস্থ বজায় রাখতে পারে। ব্রেকপয়েন্টের মধ্যে প্রস্থ পরিবর্তনশীল হলেও ছবির উচ্চতা নির্দিষ্ট থাকে।
এফেক্ট
Android-এ বিভিন্ন বিল্ট-ইন ইমেজ এফেক্ট রয়েছে। এখানে কিছু সাধারণ প্রভাবের কথা উল্লেখ করা হল:
গ্রেডিয়েন্ট
Compose-এ, স্ক্রিনে কিছু আঁকার জন্য ব্রাশ ব্যবহার করুন। বিভিন্ন রঙের বা গ্রেডিয়েন্টের আকার আঁকার জন্য বিভিন্ন ব্রাশ ব্যবহার করা যেতে পারে। বিভিন্ন গ্রেডিয়েন্ট এফেক্ট পেতে, বিল্ট-ইন গ্রেডিয়েন্ট ব্রাশ ব্যবহার করুন। এই ব্রাশগুলি আপনাকে রঙের তালিকা নির্দিষ্ট করতে দেয় যেখান থেকে আপনি গ্রেডিয়েন্ট তৈরি করতে চান।
গ্রেডিয়েন্ট ব্রাশ আরও উন্নত গ্রেডিয়েন্ট তৈরি করতে পারে। এর জন্য কালার স্টপ ও টাইলিং যোগ করতে হয়। আপনাকে শুধু রঙের তালিকা ও স্টপ হওয়ার শতাংশের মান দিতে হবে। গ্রেডিয়েন্ট, সলিড কালার ফিল বা ছবি ক্রপ করতে কন্টেনার বা আকার ব্যবহার করুন।
অস্পষ্ট
Modifier.blur() পদ্ধতি ব্যবহার করে এবং ব্লার রেশিও প্রদান করে ছবিতে ব্লারিং এফেক্ট প্রয়োগ করুন। সাবধানে ব্লার ব্যবহার করুন কারণ এটি পারফর্ম্যান্সের উপর প্রভাব ফেলতে পারে এবং
শুধুমাত্র Android 12 ও তার পরবর্তী যেকোনও ভার্সনে চলা ডিভাইসে উপলভ্য। আরও
তথ্যের জন্য, কোনও ইমেজ কম্পোজেবল অস্পষ্ট করুন দেখুন।
ব্লেন্ড মোড
Android, ডিজাইন সফ্টওয়্যারে আপনি খুঁজে পেতে পারেন এমন একই ধরনের বুলিয়ান অপারেশন এবং ব্লেন্ড মোডের মাধ্যমে ছবি পরিবর্তন করতে সক্ষম, যেমন ইউনিয়ন বা মাল্টিপ্লাই। আরও তথ্যের জন্য, BlendMode দেখুন।
টিন্ট
অ্যাসেট টিন্ট করতে ব্লেন্ড মোড ও ফিল ব্যবহার করুন। এর ফলে আপনি একটি অ্যাসেট তৈরি করে সেটিতে বিভিন্ন রঙ প্রয়োগ করতে পারবেন, যা তৈরি করা অ্যাসেটের পরিমাণ কমাতে পারে।
মোশন
মোশন ফাইল আপলোড করার পরিবর্তে মোশন গ্রাফিক্স তৈরি করতে গ্রাফিক্স প্রোগ্রাম্যাটিকভাবে অ্যানিমেট করা যেতে পারে। এটি আরও বেশি নমনীয়তা ও ছোট অ্যাসেট রিসোর্স ব্যবহার করার সুবিধা দিতে পারে।
অ্যানিমেটেড ভেক্টর ড্রয়েবেল আপনাকে ছোট UI অ্যানিমেশন তৈরি করতে দেয়। অন্যথায়, Compose-এ কীফ্রেমের সাহায্যে অ্যানিমেট করা সম্পর্কে আরও জানুন। ইমেজ এফেক্ট সম্পর্কে আরও জানতে ইমেজ কাস্টমাইজ করুন নিবন্ধটি পড়ুন।