অভিযোজিত আইকন, অভিযোজিত আইকন, অভিযোজিত আইকন, অভিযোজিত আইকন

একটি অ্যাডাপ্টিভ আইকন, বা AdaptiveIconDrawable , ডিভাইসের স্বতন্ত্র ক্ষমতা এবং ব্যবহারকারীর থিমিংয়ের ওপর নির্ভর করে ভিন্নভাবে প্রদর্শিত হতে পারে। অ্যাডাপ্টিভ আইকনগুলো প্রধানত হোম স্ক্রিনের লঞ্চারে ব্যবহৃত হয়, তবে এগুলো শর্টকাট, সেটিংস অ্যাপ, শেয়ারিং ডায়ালগ এবং ওভারভিউ স্ক্রিনেও ব্যবহার করা যেতে পারে। অ্যাডাপ্টিভ আইকনগুলো সমস্ত অ্যান্ড্রয়েড ফর্ম ফ্যাক্টর জুড়ে ব্যবহৃত হয়।

বিটম্যাপ ইমেজের বিপরীতে, অ্যাডাপ্টিভ আইকন বিভিন্ন ব্যবহারের ক্ষেত্রে নিজেকে মানিয়ে নিতে পারে:

  • বিভিন্ন আকৃতি: একটি অ্যাডাপ্টিভ আইকন বিভিন্ন ডিভাইস মডেলে নানা ধরনের আকৃতি প্রদর্শন করতে পারে। উদাহরণস্বরূপ, এটি একটি OEM ডিভাইসে বৃত্তাকার আকৃতি এবং অন্য একটি ডিভাইসে স্কোয়ার্কল (বর্গক্ষেত্র ও বৃত্তের মধ্যবর্তী একটি আকৃতি) প্রদর্শন করতে পারে। প্রতিটি ডিভাইস OEM-কে অবশ্যই একটি মাস্ক সরবরাহ করতে হবে, যা ব্যবহার করে সিস্টেম সমস্ত অ্যাডাপ্টিভ আইকনকে একই আকৃতিতে রেন্ডার করে।

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

  • ভিজ্যুয়াল ইফেক্টস: একটি অ্যাডাপ্টিভ আইকন বিভিন্ন ধরনের আকর্ষণীয় ভিজ্যুয়াল ইফেক্টস সমর্থন করে, যা ব্যবহারকারীরা হোম স্ক্রিনে আইকনটি রাখলে বা নাড়াচাড়া করলে প্রদর্শিত হয়।

    দুটি বৃত্তাকার অ্যান্ড্রয়েড নমুনা আইকনের উদাহরণ দেখানো একটি জিআইএফ, যা ব্যবহারকারীর প্রতিক্রিয়া দেখানোর জন্য অ্যানিমেট করা হয়েছে। প্রথম আইকনটিতে অ্যান্ড্রয়েড লোগোটি বৃত্তের ভিতরে প্রথমে বামে, তারপর ডানে, এবং তারপর উপরে ও নিচে কাঁপতে দেখা যায়। দ্বিতীয় আইকনটি প্রসারিত হয় এবং তারপর আবার সংকুচিত হয়।
    চিত্র ২. একটি অভিযোজিত আইকন দ্বারা প্রদর্শিত দৃশ্যগত প্রভাবের উদাহরণ।

  • ব্যবহারকারী থিমিং: অ্যান্ড্রয়েড ১৩ (এপিআই লেভেল ৩৩) থেকে, ব্যবহারকারীরা তাদের অ্যাডাপ্টিভ আইকন থিম করতে পারেন। যদি কোনো ব্যবহারকারী তাদের সিস্টেম সেটিংসে থিমযুক্ত অ্যাপ আইকন চালু করেন এবং লঞ্চারটি এই বৈশিষ্ট্যটি সমর্থন করে, তবে যে অ্যাপগুলির অ্যাডাপ্টিভ আইকনে একটি monochrome লেয়ার থাকে, সেগুলির আইকনের টিন্ট কালার নির্ধারণ করার জন্য সিস্টেম ব্যবহারকারীর নির্বাচিত ওয়ালপেপার এবং থিমের রঙ ব্যবহার করে। অ্যান্ড্রয়েড ১৬ কিউপিআর ২ থেকে, যে অ্যাপগুলি তাদের নিজস্ব আইকন সরবরাহ করে না, অ্যান্ড্রয়েড স্বয়ংক্রিয়ভাবে সেগুলির জন্য অ্যাপ আইকন থিম করে দেয়।

    তিনটি অ্যান্ড্রয়েড ডিভাইসের একটি উদাহরণ, যার প্রত্যেকটিতে ভিন্ন ভিন্ন রঙের আভা সহ একটি ভিন্ন ইউজার থিম দেখানো হচ্ছে: প্রথমটিতে গাঢ় রঙের আভা সহ একটি ওয়ালপেপার; দ্বিতীয়টিতে সোনালী আভা সহ একটি ওয়ালপেপার; তৃতীয়টিতে নীলাভ আভা সহ হালকা ধূসর রঙের একটি ওয়ালপেপার। প্রতিটি উদাহরণে, আইকনগুলো ওয়ালপেপারের রঙ গ্রহণ করেছে এবং নিখুঁতভাবে মিশে গেছে।
    চিত্র ৩. ব্যবহারকারীর ওয়ালপেপার ও থিম থেকে বৈশিষ্ট্য গ্রহণকারী অভিযোজিত আইকন।

    নিম্নলিখিত পরিস্থিতিগুলিতে, হোম স্ক্রিনে থিমযুক্ত অ্যাপ আইকনটি প্রদর্শিত হয় না, এবং এর পরিবর্তে অ্যাডাপ্টিভ বা স্ট্যান্ডার্ড অ্যাপ আইকনটি দেখা যায়:

    • যদি ব্যবহারকারী থিমযুক্ত অ্যাপ আইকন সক্রিয় না করেন।
    • যদি আপনার অ্যাপে একরঙা অ্যাপ আইকন না থাকে এবং ব্যবহারকারীর ডিভাইসটি অ্যান্ড্রয়েড ১৬ কিউপিআর ২-এর আগের কোনো সংস্করণে চলে।
    • যদি লঞ্চারটি থিমযুক্ত অ্যাপ আইকন সমর্থন না করে।

ডিজাইন অভিযোজিত আইকন

আপনার অ্যাডাপ্টিভ আইকনটি যেন বিভিন্ন আকার, ভিজ্যুয়াল ইফেক্ট এবং ইউজার থিমিং সমর্থন করে, তা নিশ্চিত করার জন্য ডিজাইনটিকে নিম্নলিখিত শর্তগুলো পূরণ করতে হবে:

  • আইকনটির রঙিন সংস্করণের জন্য আপনাকে অবশ্যই দুটি লেয়ার প্রদান করতে হবে: একটি ফোরগ্রাউন্ডের জন্য এবং অন্যটি ব্যাকগ্রাউন্ডের জন্য। লেয়ারগুলো ভেক্টর বা বিটম্যাপ হতে পারে, তবে ভেক্টরই বেশি পছন্দনীয়।

    একটি ফোরগ্রাউন্ড লেয়ার (বামে) এবং একটি ব্যাকগ্রাউন্ড লেয়ারের (ডানে) উদাহরণ। ফোরগ্রাউন্ডে একটি ৬৬x৬৬ সেফ জোনের কেন্দ্রে একটি নমুনা অ্যান্ড্রয়েড লোগোর ১৬-পার্শ্বযুক্ত আইকন দেখানো হয়েছে। সেফ জোনটি একটি ১০৮x১০৮ কন্টেইনারের ভিতরে কেন্দ্রে অবস্থিত। ব্যাকগ্রাউন্ডে সেফ জোন এবং কন্টেইনারের একই মাপ দেখানো হয়েছে, কিন্তু এতে শুধু একটি নীল ব্যাকগ্রাউন্ড রয়েছে এবং কোনো লোগো নেই।
    চিত্র ৪। ফোরগ্রাউন্ড এবং ব্যাকগ্রাউন্ড লেয়ার ব্যবহার করে সংজ্ঞায়িত অভিযোজিত আইকন। এখানে প্রদর্শিত ৬৬x৬৬ নিরাপদ অঞ্চলটি হলো সেই এলাকা যা কোনো OEM দ্বারা সংজ্ঞায়িত শেপড মাস্ক দ্বারা কখনো ছেঁটে ফেলা হয় না।
    পূর্ববর্তী চিত্রের আইকনটিকে একটি বৃত্তাকার মাস্কের উপর স্থাপন করে দেখানো একটি উদাহরণ।
    চিত্র ৫। একটি বৃত্তাকার মাস্ক প্রয়োগ করার পর ফোরগ্রাউন্ড এবং ব্যাকগ্রাউন্ড লেয়ারগুলো একসাথে কেমন দেখায় তার একটি উদাহরণ।

  • আপনি যদি অ্যাপ আইকনের ইউজার থিমিং সমর্থন করতে চান, তাহলে আইকনটির মনোক্রোম সংস্করণের জন্য একটি একক লেয়ার প্রদান করুন।

    একটি একরঙা আইকন লেয়ারের উদাহরণ (বামে) এবং রঙিন প্রিভিউ (ডানে)। একরঙা লেয়ারটি একটি নমুনা অ্যান্ড্রয়েড লোগোর ১৬-পার্শ্বযুক্ত আইকন দেখায়, যা একটি ৬৬x৬৬ সেফ জোনের কেন্দ্রে অবস্থিত। সেফ জোনটি একটি ১০৮x১০৮ কন্টেইনারের ভিতরে কেন্দ্রে অবস্থিত। রঙিন প্রিভিউগুলো দেখায় যে এই লেয়ারটি বিভিন্ন রঙের ইউজার থিমে (কমলা, গোলাপী, হলুদ এবং সবুজ) প্রয়োগ করা হলে কেমন দেখায়।
    চিত্র ৬। একটি একরঙা আইকন লেয়ার (বামে) এবং এর রঙিন প্রিভিউয়ের উদাহরণ (ডানে)।

  • সমস্ত লেয়ারের সাইজ ১০৮x১০৮ ডিপি করুন।

  • পরিষ্কার প্রান্তযুক্ত আইকন ব্যবহার করুন। লেয়ারগুলোতে আইকনের রূপরেখার চারপাশে কোনো মাস্ক বা ব্যাকগ্রাউন্ড শ্যাডো থাকা যাবে না।

  • এমন একটি লোগো ব্যবহার করুন যার আকার কমপক্ষে ৪৮x৪৮ ডিপি। এর আকার অবশ্যই ৬৬x৬৬ ডিপি অতিক্রম করবে না, কারণ আইকনটির ভেতরের ৬৬x৬৬ ডিপি অংশটি মাস্কড ভিউপোর্টের মধ্যে প্রদর্শিত হয়।

লেয়ারগুলোর চার পাশের প্রতিটির বাইরের ১৮ ডিপি অংশ মাস্কিং এবং প্যারালাক্স বা পালসিং-এর মতো ভিজ্যুয়াল ইফেক্ট তৈরির জন্য সংরক্ষিত থাকে।

অ্যান্ড্রয়েড স্টুডিও ব্যবহার করে কীভাবে অ্যাডাপ্টিভ আইকন তৈরি করতে হয় তা জানতে, অ্যান্ড্রয়েড অ্যাপ আইকন ফিগমা টেমপ্লেট অথবা লঞ্চার আইকন তৈরির জন্য অ্যান্ড্রয়েড স্টুডিও ডকুমেন্টেশন দেখুন। এছাড়াও, 'ডিজাইনিং অ্যাডাপ্টিভ আইকনস' ব্লগ পোস্টটি পড়ুন।

আপনার অ্যাপে আপনার অভিযোজিত আইকন যোগ করুন

নন-অ্যাডাপ্টিভ আইকনের মতোই অ্যাডাপ্টিভ আইকনগুলোও অ্যাপ ম্যানিফেস্টে android:icon অ্যাট্রিবিউট ব্যবহার করে নির্দিষ্ট করা হয়।

android:roundIcon একটি ঐচ্ছিক অ্যাট্রিবিউট সেইসব লঞ্চার ব্যবহার করে, যেগুলো বৃত্তাকার আইকনযুক্ত অ্যাপ প্রদর্শন করে। আপনার অ্যাপের আইকনের ডিজাইনের মূল অংশ হিসেবে যদি একটি বৃত্তাকার ব্যাকগ্রাউন্ড থাকে, তবে এটি কার্যকর হতে পারে। এই ধরনের লঞ্চারগুলোকে android:roundIcon এ একটি বৃত্তাকার মাস্ক প্রয়োগ করে অ্যাপ আইকন তৈরি করতে হয়। এই নিশ্চয়তা আপনাকে আপনার অ্যাপ আইকনের চেহারা অপ্টিমাইজ করতে সাহায্য করতে পারে, যেমন—লোগোটিকে সামান্য বড় করা এবং ক্রপ করার পরেও বৃত্তাকার ব্যাকগ্রাউন্ডটি যেন ফুল ব্লিড থাকে তা নিশ্চিত করা।

নিম্নলিখিত কোড স্নিপেটটি এই উভয় অ্যাট্রিবিউটই প্রদর্শন করে, কিন্তু বেশিরভাগ অ্যাপ কেবল android:icon নির্দিষ্ট করে থাকে:

<application
    ...
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    ...>
</application>

এরপর, আপনার অ্যাডাপ্টিভ আইকনটি res/mipmap-anydpi-v26/ic_launcher.xml ফাইলে সেভ করুন। আপনার আইকনগুলোর জন্য ফোরগ্রাউন্ড, ব্যাকগ্রাউন্ড এবং মনোক্রোম্যাটিক লেয়ার রিসোর্স নির্ধারণ করতে <adaptive-icon> এলিমেন্টটি ব্যবহার করুন। <foreground> , <background> , এবং <monochrome> ভেতরের এলিমেন্টগুলো ভেক্টর এবং বিটম্যাপ উভয় ধরনের ইমেজ সাপোর্ট করে।

নিম্নলিখিত উদাহরণে দেখানো হয়েছে কিভাবে <adaptive-icon> ভিতরে <foreground> , <background> , এবং <monochrome> এলিমেন্টগুলো সংজ্ঞায়িত করতে হয়:

<?xml version="1.0" encoding="utf-8"?>
...
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@drawable/ic_launcher_foreground" />
    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>
...

ফোরগ্রাউন্ড এবং মনোক্রোম লেয়ারগুলো একই ড্রয়েবল ব্যবহার করছে। তবে, প্রয়োজনে আপনি প্রতিটি লেয়ারের জন্য আলাদা ড্রয়েবল তৈরি করতে পারেন।

আপনি <foreground> , <background> , এবং <monochrome> এলিমেন্টের মধ্যে ড্রয়েবলগুলোকে ইনলাইন করে এলিমেন্ট হিসেবেও সংজ্ঞায়িত করতে পারেন। নিচের কোড স্নিপেটটিতে ফোরগ্রাউন্ড ড্রয়েবল ব্যবহার করে এটি করার একটি উদাহরণ দেখানো হয়েছে।

<?xml version="1.0" encoding="utf-8"?>
...
<foreground>
   <inset
       android:insetBottom="18dp"
       android:insetLeft="18dp"
       android:insetRight="18dp"
       android:insetTop="18dp">
       <shape android:shape="oval">
           <solid android:color="#0000FF" />
       </shape>
   </inset>
</foreground>
...

আপনি যদি আপনার শর্টকাটগুলোতে সাধারণ অ্যাডাপ্টিভ আইকনের মতো একই মাস্ক এবং ভিজ্যুয়াল এফেক্ট প্রয়োগ করতে চান, তাহলে নিম্নলিখিত পদ্ধতিগুলোর মধ্যে একটি ব্যবহার করুন:

  • স্থির শর্টকাটের জন্য <adaptive-icon> এলিমেন্টটি ব্যবহার করুন।
  • ডাইনামিক শর্টকাট তৈরি করার সময় createWithAdaptiveBitmap() মেথডটি কল করুন।

অ্যাডাপ্টিভ আইকন প্রয়োগ করার বিষয়ে আরও তথ্যের জন্য, ‘অ্যাডাপ্টিভ আইকন প্রয়োগ’ দেখুন। শর্টকাট সম্পর্কে আরও তথ্যের জন্য, ‘অ্যাপ শর্টকাট ওভারভিউ’ দেখুন।

অতিরিক্ত সম্পদ

অভিযোজিত আইকন ডিজাইন ও বাস্তবায়ন সম্পর্কে অতিরিক্ত তথ্যের জন্য নিম্নলিখিত রিসোর্সগুলো দেখুন।

পূর্ববর্তী
ভবিষ্যদ্বাণীপূর্ণ ফিরে পরীক্ষা