১. ভূমিকা
সর্বশেষ হালনাগাদ: ০৮/০৪/২২
অ্যান্ড্রয়েড ১৩ থেকে ব্যবহারকারীরা তাদের অ্যাডাপ্টিভ লঞ্চার আইকন থিম করতে পারবেন। এই ফিচারের মাধ্যমে, সমর্থিত অ্যান্ড্রয়েড লঞ্চারগুলোর অ্যাপ আইকনগুলো ব্যবহারকারীর বেছে নেওয়া ওয়ালপেপার এবং অন্যান্য থিমের রঙ ধারণ করে রঙিন হয়ে ওঠে।
আপনার অ্যান্ড্রয়েড অ্যাপের জন্য প্রয়োজনীয় সমস্ত সিস্টেম অ্যাসেট, নতুন অ্যাডাপ্টিভ কালার আইকন সহ, সহজেই তৈরি করুন।
আপনি যা শিখবেন
- বিভিন্ন ধরনের অ্যাপ আইকন সম্পর্কে ধারণা এবং সেগুলো ডিজাইন করার কিছু কৌশল।
- অ্যান্ড্রয়েড লঞ্চার ফিগমা টেমপ্লেট কীভাবে ব্যবহার করবেন
- অ্যান্ড্রয়েড স্টুডিও অ্যাসেট জেনারেটর কীভাবে ব্যবহার করবেন।
- অ্যান্ড্রয়েড স্টুডিও এমুলেটর ব্যবহার করে কীভাবে আপনার লঞ্চার আইকনের প্রিভিউ দেখবেন
পূর্বশর্ত
- ফিগমা সম্পর্কে প্রাথমিক জ্ঞান
- ঐচ্ছিক: অ্যাপ আইকনের আর্টওয়ার্ক (ফোরগ্রাউন্ড, ব্যাকগ্রাউন্ড এবং মনোক্রোম্যাটিক)
আপনার যা যা লাগবে
- একটি ফিগমা অ্যাকাউন্ট
- একটি ফিগমা ডিজাইনল্যাব ফাইল
- ঐচ্ছিক: অ্যান্ড্রয়েড স্টুডিও ইনস্টল করা একটি পিসি।
২. শুরু করুন
সেটআপ
শুরু করার জন্য, আপনাকে অ্যান্ড্রয়েড অ্যাপ আইকন ফিগমা ফাইলটি অ্যাক্সেস করতে হবে।
প্রথমে, ফিগমাতে সাইন ইন করুন অথবা একটি অ্যাকাউন্ট তৈরি করুন ।
ফিগমা কমিউনিটি থেকে অনুলিপি
অ্যান্ড্রয়েড লঞ্চার টেমপ্লেট ফাইলে যান অথবা ফিগমা কমিউনিটিতে ‘মাইগ্রেটিং টু ভ্যারিয়েবল ফন্টস’ (Migrating to Variable fonts) লিখে সার্চ করুন। ফাইলটি আপনার ফোল্ডারে কপি করতে উপরের ডান কোণায় থাকা ‘গেট এ কপি’ (Get a Copy) বাটনে ক্লিক করুন।
টেমপ্লেট ব্যবহার করে
অ্যান্ড্রয়েড আইকন টেমপ্লেটটি দুটি পৃষ্ঠা নিয়ে গঠিত:
- প্রচ্ছদ পৃষ্ঠায় প্রাসঙ্গিক ধারণা এবং টেমপ্লেটটি কীভাবে ব্যবহার করতে হয়, তা সংক্ষেপে আলোচনা করা হয়েছে।
- টেমপ্লেট পৃষ্ঠাটিতে প্রয়োজনীয় অ্যাসেট তৈরি করার জন্য দরকারি সবকিছু রয়েছে, যা তিনটি ফ্রেমে (রঙ, আকৃতি, প্লে স্টোর) বিভক্ত।
দ্রষ্টব্য: বাম দিকের লেয়ার প্যানেলে বেশিরভাগ লেয়ার এবং গ্রুপ লক করা আছে; এগুলো লক করাই থাকবে। (আপনি আনলক করা আর্টওয়ার্ক গ্রুপগুলোর মধ্যে আর্টওয়ার্ক রাখতে পারবেন।)
কিন্তু অ্যাসেট তৈরি করা শুরু করার আগে, চলুন দেখে নেওয়া যাক আমরা কী তৈরি করব...
৩. অ্যান্ড্রয়েড সিস্টেম আইকন
লঞ্চার আইকন
লঞ্চার আইকন বা অ্যাপ আইকন আপনার অ্যাপ চালু করার অভিজ্ঞতার একটি অপরিহার্য অংশ হিসেবে কাজ করে; এই আইকনগুলো আপনার অ্যাপে প্রবেশের পথ হিসেবে হোমস্ক্রিনে প্রদর্শিত হয়।
অভিযোজিত আকার
একটি অ্যাডাপ্টিভ আইকন, বা AdaptiveIconDrawable , ডিভাইসের স্বতন্ত্র ক্ষমতা এবং ব্যবহারকারীর থিমিংয়ের ওপর নির্ভর করে ভিন্নভাবে প্রদর্শিত হতে পারে। অ্যাডাপ্টিভ আইকনগুলো প্রধানত হোমস্ক্রিনে লঞ্চার দ্বারা ব্যবহৃত হয়, তবে এগুলো শর্টকাট, সেটিংস অ্যাপ, শেয়ারিং ডায়ালগ এবং ওভারভিউ স্ক্রিনেও ব্যবহার করা যেতে পারে।
একটি অ্যাডাপ্টিভ আইকন বিভিন্ন ডিভাইস মডেলে নানা রকম আকৃতি প্রদর্শন করতে পারে। উদাহরণস্বরূপ, এটি একটি OEM ডিভাইসে বৃত্তাকার আকৃতি এবং অন্য ডিভাইসে বর্গাকার আকৃতি প্রদর্শন করতে পারে। প্রতিটি ডিভাইস OEM-কে অবশ্যই একটি মাস্ক সরবরাহ করতে হবে, যা সিস্টেম একই আকৃতির সমস্ত অ্যাডাপ্টিভ আইকন রেন্ডার করার জন্য ব্যবহার করে।
আকৃতির সাথে খাপ খাইয়ে নেওয়ার ক্ষমতা সিস্টেমটিকে ব্যবহারকারীর মিথস্ক্রিয়ার মাধ্যমে বিভিন্ন অ্যানিমেশন ইফেক্ট প্রয়োগ করার সুযোগ দেয়।
অভিযোজিত রঙ
অ্যাডাপ্টিভ আইকনগুলোতে এখন ডাইনামিক কালার ব্যবহার করা যাবে, যার ফলে ব্যক্তিগত পছন্দ অনুযায়ী থিমযুক্ত অ্যাপ আইকন তৈরি করা সম্ভব হবে।
যদি কোনো ব্যবহারকারী থিমযুক্ত অ্যাপ আইকন সক্রিয় করে থাকেন (অর্থাৎ, সিস্টেম সেটিংসে ‘থিমড আইকন’ টগলটি চালু করে থাকেন), এবং লঞ্চারটি এই বৈশিষ্ট্যটি সমর্থন করে, তাহলে সিস্টেমটি টিন্ট কালার নির্ধারণ করার জন্য ব্যবহারকারীর নির্বাচিত ওয়ালপেপার এবং থিমের রঙ ব্যবহার করে।
আকৃতি অনুযায়ী মানিয়ে নেওয়া আইকনগুলোর মতোই, অ্যাডাপ্টিভ কালার আইকনগুলো একটি ফোরগ্রাউন্ড এবং একটি ব্যাকগ্রাউন্ড দিয়ে গঠিত হয়। এক্ষেত্রে শুধু একটি একরঙা ফোরগ্রাউন্ড আইকন অ্যাসেট প্রদান করতে হয়, সিস্টেমটি তার থেকে প্রাপ্ত কালার স্কিম ব্যবহার করে ব্যাকগ্রাউন্ড এবং রঙ উভয়েরই দায়িত্ব নিয়ে নেয়।
আপনি নোটিফিকেশন আইকন হিসেবেও একই একরঙা আইকন ব্যবহার করতে পারেন।
উত্তরাধিকার
পুরোনো অ্যান্ড্রয়েড সংস্করণ চালিত বা অ্যাডাপ্টিভ ফিচার সমর্থন করে না এমন ডিভাইসগুলোকে (৮.০-এর পূর্ববর্তী) সাপোর্ট করার জন্য লিগ্যাসি আইকন অন্তর্ভুক্ত করা উচিত।
এগুলোর কোনো ফোরগ্রাউন্ড ও ব্যাকগ্রাউন্ড রিসোর্স থাকবে না এবং এগুলোর আকৃতি মুক্ত হতে পারে। আপনি যদি প্রদত্ত টেমপ্লেটটি ব্যবহার করেন, তাহলে চূড়ান্ত অ্যাডাপ্টিভ শেপ আর্টওয়ার্কটি আপনার লিগ্যাসি আইকনের জন্য প্রয়োজনীয় মাপে এক্সপোর্ট করা হবে।
বিজ্ঞপ্তি আইকন
নোটিফিকেশন হলো এমন একটি বার্তা যা অ্যান্ড্রয়েড আপনার অ্যাপের UI-এর বাইরে প্রদর্শন করে, ব্যবহারকারীকে রিমাইন্ডার, অন্য কারো কাছ থেকে আসা বার্তা বা আপনার অ্যাপ থেকে অন্যান্য সময়োপযোগী তথ্য জানানোর জন্য। সিস্টেমটি বিভিন্ন স্থানে এবং ফরম্যাটে নোটিফিকেশন দেখায়, যেমন স্ট্যাটাস বারে একটি আইকন হিসেবে, নোটিফিকেশন ড্রয়ারে আরও বিস্তারিত এন্ট্রি হিসেবে, অ্যাপের আইকনের উপর একটি ব্যাজ হিসেবে এবং পেয়ার করা পরিধানযোগ্য ডিভাইসগুলোতে স্বয়ংক্রিয়ভাবে।
শিল্পকর্ম সংরক্ষণ করুন
গুগল প্লে এবং গুগলের অন্যান্য প্রচারমূলক চ্যানেলে আপনার অ্যাপটিকে তুলে ধরতে ও প্রচার করতে আপনি ফিচার গ্রাফিক, স্ক্রিনশট, সংক্ষিপ্ত বিবরণ এবং ভিডিও ব্যবহার করতে পারেন।
অ্যাপ আইকনটি আপনার অ্যাপের লঞ্চার আইকনকে প্রতিস্থাপন করে না, বরং এটি একটি আরও উন্নত ও উচ্চ-রেজোলিউশনের সংস্করণ হওয়া উচিত।
লঞ্চার আইকনের মতোই, আর্টওয়ার্ক পুরো অ্যাসেট স্পেস জুড়ে থাকতে পারে, অথবা আপনি লোগোর মতো আর্টওয়ার্ক উপাদানগুলোকে কীলাইন গ্রিডে ডিজাইন ও স্থাপন করতে পারেন।
আপনার স্টোর লিস্টিং প্রকাশ করার জন্য আপনাকে অবশ্যই একটি 512x512 পিক্সেল বর্গাকার অ্যাপ আইকন প্রদান করতে হবে। আপনি যদি অ্যান্ড্রয়েড অ্যাপ আইকন টেমপ্লেট ব্যবহার করেন, তবে এটি এক্সপোর্টের সময় অ্যাডাপটিভ শেপ আর্টওয়ার্ক ব্যবহার করে সরবরাহ করা হয়।
৪. নকশার সর্বোত্তম অনুশীলন
লঞ্চার আইকন ব্যবহারকারীর জন্য আপনার অ্যাপটি চালু করে। আপনার অ্যাপে প্রবেশের মাধ্যম হিসেবে, এগুলোকে অবশ্যই চেনা ও পাঠযোগ্য হতে হবে। আপনার লঞ্চার আইকনে এই গুণাবলী নিশ্চিত করার জন্য এখানে কিছু সেরা উপায় দেওয়া হলো।
শিল্পকর্ম সরল রাখুন। একাধিক লেয়ার, অনেক ইফেক্ট এবং লেখা পরিহার করুন। ছোট আকারে এই বিবরণগুলো হারিয়ে যাবে বা দেখতে অসুবিধা হবে। 
জটিল আকৃতি পরিহার করুন। লোগোও এর অন্তর্ভুক্ত। সম্ভব হলে একটি সরলীকৃত লোগো ব্যবহার করুন, অথবা এমন প্রতীক ব্যবহারের কথা ভাবুন যা আপনার ব্যবহারকারীরা আপনার অ্যাপের সাথে যুক্ত করতে পারে। একটি পাঠযোগ্য ও স্বতন্ত্র আকৃতি ব্যবহারকারীদের মধ্যে ঐক্য তৈরি করতে সাহায্য করে, যার ফলে তারা বিভিন্ন প্রেক্ষাপট থেকে (যেমন অ্যাডাপ্টিভ কালার এবং নোটিফিকেশন) আপনার অ্যাপটিকে সহজেই চিনতে পারে। 
গ্রিড ব্যবহার করুন। গ্রিড বা কীলাইনের সুবিধা নিয়ে নিশ্চিত করুন যে, ক্রপ করার পরেও ফোরগ্রাউন্ড আর্টওয়ার্কটি ঠিকঠাক কাজ করবে, যার মধ্যে ফুল ব্লিড ইলাস্ট্রেশন আর্টওয়ার্কও অন্তর্ভুক্ত। 
বৈসাদৃশ্য বিবেচনা করুন । অ্যাডাপ্টিভ শেপ এবং লিগ্যাসি আইকনগুলির জন্য, নিশ্চিত করুন যে আইকনের ফোরগ্রাউন্ড এবং ব্যাকগ্রাউন্ডের মধ্যে সুস্পষ্ট বৈসাদৃশ্য রয়েছে। গাঢ় ড্রপ শ্যাডো ব্যবহার করা থেকে বিরত থাকুন, কারণ এগুলোকে সিস্টেম শ্যাডো বলে ভুল করা হতে পারে। 
আর্টওয়ার্ক নিরাপদ অঞ্চলের মধ্যে রাখুন। ফোরগ্রাউন্ড অ্যাসেটগুলো ৭২x৭২ পিক্সেলের মধ্যে রাখুন (যদি না আপনি ফুল ব্লিড ব্যবহার করেন)। ব্যাকগ্রাউন্ড ১০৮x১০৮ পিক্সেলে রাখুন। দ্রষ্টব্য: আইকন টেমপ্লেটের আর্টওয়ার্ক ফ্রেমটি ৭২x৭২ পিক্সেলের চেয়ে বড়, যাতে আপনি আইকন আর্টওয়ার্ক তৈরি করতে পারেন। অ্যাসেটগুলো স্পেসিফিকেশন অনুযায়ী রিসাইজ করা হবে। 
ভেক্টর ফরম্যাট। রাস্টার ফরম্যাটের (যেমন PNG, JPG, এবং GIF ফাইল) পরিবর্তে ভেক্টর ফরম্যাটে (যেমন SVG, AI, PDF, এবং EPS ফাইল) থাকা আর্টওয়ার্ক ব্যবহার করার চেষ্টা করুন। এটি নিশ্চিত করে যে আপনার আর্টওয়ার্ক নতুন ফিচারগুলোর সাথে সামঞ্জস্যপূর্ণ এবং সম্পাদনা করা সহজ। 
৫. অভিযোজিত রঙ এবং বিজ্ঞপ্তি আইকন
এবার আপনার নিজের অ্যান্ড্রয়েড সিস্টেম আইকন তৈরি করার পালা।
- ফিগমা ফাইলে অ্যান্ড্রয়েড অ্যাপ আইকনগুলো খুঁজুন।
- ফাইলটির মধ্যে, Adaptive color ফ্রেমটি খুঁজুন। বাম দিকের লেয়ার প্যানেলে Adaptive color > Components > art > Icon artwork area > Themed Icon art < add your icon খুঁজে বের করুন। আপনার কাছে যদি আগে থেকেই কোনো একরঙা আইকন তৈরি থাকে, তবে নমুনা bugdroid আইকনটি প্রতিস্থাপন করতে সেটি এখানে কপি করুন এবং সরাসরি ধাপ ৬-এ চলে যান।
- আপনার যদি কোনো একরঙা আইকন না থাকে, তবে আপনার অ্যাপের সাথে সম্পর্কিত একটি লোগো বা আইকন দিয়ে শুরু করুন। আপনার আইকনটি আপডেট করতে ডিজাইন টিপসগুলো দেখুন। প্রথমে সরলীকরণ করুন এবং জটিল আকার পরিহার করুন। উদাহরণস্বরূপ, এখানে অ্যাপের মধ্যে ব্যবহৃত চিত্রগুলোকে কম জটিল পাতার আকার দিয়ে সরল করা হয়েছে। সাদা স্থান ব্যবহার করে ছায়া এবং রেখার বিবরণ অনুকরণ করা হয়েছে।
- এখন, কীলাইন গ্রিড ব্যবহার করে সাইজিং আপডেট করুন। এখানে আমরা রিসাইজকে ' স্কেল' এ সেট করেছি এবং নিশ্চিত করেছি যে আর্টওয়ার্কটি ফোরগ্রাউন্ড সেফ জোনের মধ্যে রয়েছে। টেমপ্লেটটি আর্টওয়ার্কসহ ৪x আকারে সেট করা আছে এবং এক্সপোর্টের জন্য এটি স্বয়ংক্রিয়ভাবে রিসাইজ হয়ে যায়, ফলে আপনি আপনার আইকনগুলো আরও বড় স্কেলে ডিজাইন করতে পারবেন।
- ফাইলটি ম্যাটেরিয়াল থিম বিল্ডারের সাথে কাজ করার জন্য সেট আপ করা হয়েছে, যা ডাইনামিক কালার প্রিভিউ করতে সাহায্য করে। ফোরগ্রাউন্ড আইকনের কালার স্টাইলটি On-surface-variant- এর সাথে সংযুক্ত করুন।
- এখন, প্লাগইন প্যানেল থেকে ম্যাটেরিয়াল থিম বিল্ডার খুলে, আপনি সোর্স কালারটি শাফেল করতে পারেন অথবা এক্সট্র্যাক্ট করা সোর্স কালার ব্যবহার করে রঙগুলো আপডেট করার জন্য একটি ছবি যোগ করতে পারেন।
- বিভিন্ন রেজোলিউশনে বা হোম স্ক্রিনে এটি কেমন দেখাবে? টেমপ্লেটটি এমনভাবে সেট আপ করা হয়েছে যাতে আর্টওয়ার্ক ফ্রেমের মধ্যে রাখা আর্টওয়ার্ক বিভিন্ন প্রিভিউ প্রেক্ষাপটে প্রদর্শিত হয়।
- সিস্টেমটি নোটিফিকেশন হিসেবে একরঙা আইকনটি ব্যবহার করে এবং প্রিভিউতেও সেভাবেই প্রদর্শন করে।
৬. অভিযোজিত আকৃতি এবং লিগ্যাসি আইকন
এখন, আইকনটির ব্যাপক সমর্থন নিশ্চিত করতে আমরা অ্যাডাপ্টিভ শেপ এবং লিগ্যাসি আইকন তৈরি করব।
- ফাইলটির মধ্যে, শেপ ফ্রেমটি খুঁজুন। বাম দিকের লেয়ার প্যানেলে আইকন ব্যাকগ্রাউন্ড খুঁজুন এবং আপনার আইকনটি যোগ করুন । যদি আপনার কাছে আগে থেকেই কোনো আইকন তৈরি থাকে, তবে নমুনা বাগড্রয়েড আইকনটি প্রতিস্থাপন করতে সেটি এখানে কপি করুন এবং সরাসরি ধাপ ৫-এ চলে যান। যদি আপনার কোনো আইকন না থাকে, তবে আপনার অ্যাপের সাথে সম্পর্কিত কোনো লোগো বা আইকন দিয়ে শুরু করুন অথবা একরঙা আইকনটি পুনরায় ব্যবহার করুন।
- আইকনের সর্বোত্তম অনুশীলনগুলো মাথায় রেখে ফোরগ্রাউন্ড আইকনটি আপডেট করুন। এখানে আমি মূল ইলাস্ট্রেশনের রঙগুলো ফিরিয়ে এনেছি, কিন্তু বিস্তারিত বিবরণ ন্যূনতম রেখেছি।
- এখন, কীলাইন গ্রিড ব্যবহার করে সাইজিং আপডেট করুন। এখানে আমরা রিসাইজকে স্কেল -এ সেট করেছি এবং নিশ্চিত করেছি যে আর্টওয়ার্কটি ফোরগ্রাউন্ড সেফ জোনের মধ্যে রয়েছে।
- অ্যাডাপ্টিভ শেপ অ্যাপ আইকনগুলোর একটি স্বতন্ত্র ব্যাকগ্রাউন্ডও থাকতে পারে। এর ফলে আইকনের লেয়ারগুলো নিরাপদে ক্রপ করা যায় এবং ইন্টারঅ্যাকশনের সময় সূক্ষ্ম মুভমেন্ট ইফেক্ট পাওয়া যায়। এছাড়াও আপনি অ্যান্ড্রয়েড স্টুডিওতে একটি সলিড কালার ব্যাকগ্রাউন্ড ব্যবহার ও নির্ধারণ করতে পারেন।
- প্রিভিউগুলো আপডেট হয়ে দেখায় যে ফোরগ্রাউন্ড ও ব্যাকগ্রাউন্ড একসাথে, হোমস্ক্রিনে, বিভিন্ন ক্রপ করা আকারে এবং একটি লিগ্যাসি আইকন হিসেবে কেমন দেখায়।
হোম স্ক্রিন প্রিভিউ থেকে আইকনগুলো নির্বাচন করে এবং শেপ ভ্যারিয়েন্ট অপশনটি পরিবর্তন করে ক্রপ করার জন্য ব্যবহৃত শেপটি আপডেট করা যায়। 
৭. রপ্তানি
চমৎকার, আপনি এখন আপনার অ্যাপ আইকনগুলো দিয়ে টেমপ্লেটটি আপডেট করেছেন! চলুন, বাস্তবায়নের জন্য এগুলো এক্সপোর্ট করা যাক।
- নিশ্চিত করুন যে ক্যানভাসে কোনো কিছুই নির্বাচিত নেই।
- ফিগমা মেনুতে যান > ফাইল > এক্সপোর্ট ( Shift + Cmd + E )।
- এক্সপোর্ট মেনুতে, এক্সপোর্ট নিশ্চিত করুন। এটি টেমপ্লেট থেকে অ্যাসেটগুলো ডাউনলোড করবে।
রপ্তানিতে কী আছে?
এক্সপোর্ট করা অ্যাসেটগুলোতে আপনার অ্যাপ আইকনটি প্রয়োগ করার জন্য প্রয়োজনীয় সমস্ত ফাইল রয়েছে, যা নিচে দেওয়া হলো।
- ফিগমা অ্যাডাপ্টিভ কালারের জন্য একরঙা ফোরগ্রাউন্ড আইকনটিকে একটি SVG ফাইল হিসেবে এক্সপোর্ট করে, এবং এর সাথে অ্যাডাপ্টিভ শেপ আইকনগুলোর জন্য ফোরগ্রাউন্ড ও ব্যাকগ্রাউন্ড উভয়ই এক্সপোর্ট করে।
- ফিগমা রেজোলিউশন অনুযায়ী সাজানো বিভিন্ন মিপম্যাপ ডিরেক্টরিতে লিগ্যাসি আইকনও প্রদান করে।
ব্যাস! আপনার আইকনটি এখন ডেভেলপমেন্ট টিমের কাছে পাঠানোর জন্য প্রস্তুত।
বিকল্পভাবে, যদি আপনি অ্যান্ড্রয়েড স্টুডিওর মধ্যেই আপনার আইকনগুলির প্রিভিউ দেখতে এবং সেই SVG ফাইলগুলিকে তাদের চূড়ান্ত অ্যাসেট ফরম্যাটে রূপান্তর করতে চান, তাহলে পরবর্তী ধাপে যান।
৮. ইমেজ অ্যাসেট স্টুডিও ব্যবহার করুন
অ্যান্ড্রয়েড স্টুডিও দিয়ে শুরু করুন
- অ্যান্ড্রয়েড স্টুডিও ডাউনলোড ও ইনস্টল করুন ।
- অ্যান্ড্রয়েড স্টুডিও চালু করুন।
অ্যান্ড্রয়েড স্টুডিও আপনাকে একটি নতুন প্রজেক্ট শুরু করার বা বিদ্যমান প্রজেক্টগুলো নির্বাচন করার বিকল্প দেখায়।
- আপাতত একটি নতুন প্রজেক্ট বেছে নিন। পরবর্তী স্ক্রিনগুলো আপনাকে আপনার নতুন প্রজেক্টটি সেট আপ করতে ধাপে ধাপে নির্দেশনা দেবে।
- স্টার্টার টেমপ্লেটগুলো থেকে যেকোনো একটি টেমপ্লেট বেছে নিন, কারণ আমরা শুধু লঞ্চ আইকনগুলোই দেখব।
- এরপর, আপনার নতুন প্রজেক্টটির নাম দিন এবং ফিনিশ নির্বাচন করুন। নতুন প্রজেক্টটি তৈরি হতে কয়েক মুহূর্ত সময় লাগবে।
ইমেজ অ্যাসেট স্টুডিও ব্যবহার করুন
এখন আমরা অ্যাসেট স্টুডিও নামক একটি সহায়ক টুল ব্যবহার করে আপনার আইকনগুলো প্রজেক্টে যোগ করতে পারি।
- এই টুলটি অ্যাক্সেস করতে, ফাইল মেনু > নতুন > ইমেজ অ্যাসেট নির্বাচন করুন।
- ইমেজ অ্যাসেট স্টুডিও খুললে, Path- এ থাকা ফোল্ডার আইকনটি নির্বাচন করে ফোরগ্রাউন্ড লেয়ারটি যোগ করুন। এক্সপোর্ট করা SVG ফাইলটিকে drawable-anydpi/ic_launcher.svg হিসেবে বেছে নিন।
- ব্যাকগ্রাউন্ড লেয়ার ট্যাবটি নির্বাচন করুন এবং একইভাবে এক্সপোর্ট করা ব্যাকগ্রাউন্ড লেয়ারটি বেছে নিন। বিকল্পভাবে, একটি সলিড কালার লঞ্চার ব্যাকগ্রাউন্ড পেতে অ্যাসেট টাইপ: কালার বেছে নিন।
- ফোরগ্রাউন্ড লেয়ারে ফিরে যান এবং ছবিটি সেফ জোনের মধ্যে আছে কিনা তা পুনরায় পরীক্ষা করুন। আইকনটির আকার এমনভাবে পরিবর্তন করুন যা দেখতে সবচেয়ে ভালো লাগে।
- কাজ শেষ হলে, Next-এ ক্লিক করুন। এটি আপনাকে জিজ্ঞাসা করবে যে আপনার প্রোজেক্টের মধ্যে আইকনগুলো কোথায় যাবে (আপনি এটিকে ডিফল্ট অবস্থায় রাখতে পারেন অথবা Main-এ পরিবর্তন করতে পারেন)। তারপর Finish-এ ক্লিক করুন। আপনি আপনার লঞ্চার অ্যাসেটগুলো res > drawable-এর অধীনে খুঁজে পাবেন। ডাবল ক্লিক করলে চূড়ান্ত ভেক্টর ড্রয়েবলগুলোর একটি প্রিভিউ খুলবে।
- মনোক্রোম লেয়ার অ্যাসেটটি ম্যানুয়ালি res/drawable অথবা res/drawable-v24- এ কপি-পেস্ট করুন, অথবা res ফোল্ডারে রাইট-ক্লিক করে New > Vector Asset নির্বাচন করে মনোক্রোম লেয়ারটি ম্যানুয়ালি ইম্পোর্ট করুন।
- res/mipmap-anydpi-v26/ic_launcher.xml এবং res/mipmap-anydpi-v26/ic_launcher_round.xml ফাইল দুটিতে বিদ্যমান android:monochrome="path/to/monochrome/asset" লাইনটি যোগ করুন অথবা পরিবর্তন করে সঠিক মনোক্রোম অ্যাসেটটি নির্দেশ করুন।
৯. পূর্বরূপ এবং সম্পদ
এমুলেটরে প্রিভিউ
অ্যাপ প্রজেক্টে এগুলো যুক্ত করার জন্য আমরা এটা করেছি, যাতে আমরা আসল ডিভাইস বা এমুলেটরে এগুলোর প্রিভিউ দেখতে পারি! চলুন দেখি আমাদের আইকনগুলো বাস্তবে কেমন দেখাবে।
আপনার ডিভাইসে ডিফল্টভাবে একটি এমুলেটর সেটআপ করা থাকার কথা, কিন্তু যদি না থাকে, তাহলে একটি অ্যান্ড্রয়েড ভার্চুয়াল ডিভাইস তৈরি করুন । সবুজ প্লে বাটনটিতে ক্লিক করুন। এটি প্রজেক্টটি বিল্ড করবে এবং এমুলেটরটি খুলে দেবে।
চূড়ান্ত সম্পদ
চমৎকার, আপনি এমুলেটর ব্যবহার করে একটি ডিভাইসে আপনার লঞ্চার আইকনটি কেমন দেখাবে তা পরীক্ষা করতে পেরেছেন এবং সেগুলোকে একটি অ্যাপ প্রজেক্টে যুক্ত করেছেন। এর ফলে সেগুলো তাদের চূড়ান্ত রূপে রূপান্তরিত হয়েছে! কিন্তু সেগুলো এখন কোথায়?
অ্যান্ড্রয়েড অ্যাপের সাথে অ্যাসেটগুলো রিসোর্স হিসেবে থাকে এবং রিসোর্স প্যানেল (সাধারণত বাম দিকে) খুলে এগুলো খুঁজে পাওয়া যায়। অ্যাপটির ভেতরে প্রবেশ করে আপনার Res ফোল্ডারটি খুঁজুন। একটি মেনু খুলতে রাইট-ক্লিক করুন এবং (ম্যাকে) Open in Finder নির্বাচন করুন, এটি একটি ফাইন্ডার উইন্ডো খুলবে। ঐচ্ছিকভাবে, আপনি একই ধরনের প্রক্রিয়া ব্যবহার করে আপনার অ্যাপের বাকি অ্যাসেটগুলো রূপান্তর ও পরীক্ষা করে কিছু ডেভেলপমেন্ট এবং QA সময় বাঁচাতে পারেন। যদি আপনি আপনার অ্যাপের বাকি অ্যাসেটগুলো রূপান্তর করে থাকেন, তাহলে এই ফোল্ডারটি ডেভেলপমেন্ট টিমের সাথে শেয়ার করা যেতে পারে।
১০. অভিনন্দন
চমৎকার কাজ, আপনি একটি অ্যান্ড্রয়েড অ্যাপ তৈরি করার জন্য প্রয়োজনীয় অ্যান্ড্রয়েড সিস্টেম আইকন সম্পর্কে শিখেছেন, নিজের আইকন ডিজাইন করেছেন, আইকন টেমপ্লেট রিসোর্সটি দেখেছেন, এবং সম্ভবত অ্যান্ড্রয়েড স্টুডিওতে প্রবেশ করে প্রোডাকশনের জন্য অ্যাসেট প্রিভিউ ও রূপান্তর করার মাধ্যমে আরও এক ধাপ এগিয়ে গেছেন!
আপনার কোনো প্রশ্ন থাকলে, টুইটারে @MaterialDesign ব্যবহার করে যেকোনো সময় আমাদের জিজ্ঞাসা করতে পারেন।
আরও ডিজাইন কন্টেন্ট এবং টিউটোরিয়ালের জন্য youtube.com/MaterialDesign- এ চোখ রাখুন।