অ্যাডাপ্টিভ আইকন

অ্যাডাপ্টিভ আইকন হেডার

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

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

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

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

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

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

  • ব্যবহারকারীর থিমিং: Android 13 (API লেভেল 33) থেকে শুরু করে, ব্যবহারকারীরা তাদের অ্যাডাপ্টিভ আইকন থিম করতে পারবেন। ব্যবহারকারী তার সিস্টেম সেটিংসে থিমযুক্ত অ্যাপ আইকন চালু করলে এবং লঞ্চার এই ফিচারকে সমর্থন করলে, সিস্টেম ব্যবহারকারীর বেছে নেওয়া ওয়ালপেপার এবং থিমের রঙ ব্যবহার করে অ্যাপ আইকনের টিন্ট রঙ নির্ধারণ করে। এটি সেইসব অ্যাপের জন্য প্রযোজ্য যেগুলির অ্যাডাপ্টিভ আইকনে monochrome লেয়ার রয়েছে। Android 16 QPR 2 থেকে শুরু করে, Android অটোমেটিক অ্যাপ আইকন থিম করে যেসব অ্যাপের নিজস্ব থিম নেই।

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

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

    • ব্যবহারকারী যদি থিমযুক্ত অ্যাপ আইকন চালু না করেন।
    • আপনার অ্যাপ যদি মনোক্রোম্যাটিক অ্যাপ আইকন প্রদান না করে এবং ব্যবহারকারীর ডিভাইস Android 16 QPR 2-এর আগের কোনও Android ভার্সনে চলে।
    • লঞ্চারে থিমযুক্ত অ্যাপ আইকন কাজ না করলে।

অ্যাডাপ্টিভ আইকন ডিজাইন করা

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

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

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

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

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

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

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

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

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

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

আপনার অ্যাপে অ্যাডাপ্টিভ আইকন যোগ করা

অ্যাডাপ্টিভ আইকন, নন-অ্যাডাপ্টিভ আইকনের মতোই, অ্যাপ ম্যানিফেস্টে 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() মেথড কল করুন।

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

অতিরিক্ত রিসোর্স

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

পূর্ববর্তী
শর্টকাটের জন্য পেশাদার পদ্ধতি প্রয়োগ করা
পরবর্তী
রিমোট কম্পোজ