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

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

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

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

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

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

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

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

    • ব্যবহারকারী যদি থিমযুক্ত অ্যাপ আইকন সক্রিয় না করে।
    • যদি আপনার অ্যাপটি একরঙা অ্যাপ আইকন প্রদান না করে।
    • যদি লঞ্চার থিমযুক্ত অ্যাপ আইকন সমর্থন না করে।

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

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

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

    একটি চিত্র একটি ফোরগ্রাউন্ড স্তর (বাম চিত্র) এবং একটি পটভূমি স্তর (ডান চিত্র) এর উদাহরণ দেখাচ্ছে৷ অগ্রভাগে একটি 66x66 নিরাপদ অঞ্চলের মধ্যে কেন্দ্রীভূত একটি নমুনা Android লোগোর 16-পার্শ্বযুক্ত আইকন দেখায়৷ নিরাপদ অঞ্চলটি একটি 108x108 পাত্রের ভিতরে কেন্দ্রীভূত। পটভূমি নিরাপদ অঞ্চল এবং ধারক জন্য একই পরিমাপ মাত্রা দেখায়, কিন্তু শুধুমাত্র একটি নীল পটভূমি এবং কোন লোগো নেই।
    চিত্র 4. অগ্রভাগ এবং পটভূমি স্তর ব্যবহার করে অভিযোজিত আইকন সংজ্ঞায়িত করা হয়েছে। 66x66 নিরাপদ অঞ্চলটি চিত্রিত করা হয়েছে এমন একটি এলাকা যা কখনই একটি OEM দ্বারা সংজ্ঞায়িত আকারের মাস্ক দ্বারা ক্লিপ করা হয় না।
    একটি বৃত্তাকার মুখোশের উপর আচ্ছাদিত পূর্ববর্তী চিত্র থেকে আইকন দেখানো একটি চিত্র৷
    চিত্র 5. একটি বৃত্তাকার মুখোশ প্রয়োগের সাথে ফোরগ্রাউন্ড এবং ব্যাকগ্রাউন্ড স্তরগুলিকে কীভাবে একত্রে দেখায় তার একটি উদাহরণ।
  • আপনি যদি অ্যাপ আইকনগুলির ব্যবহারকারীর থিমিং সমর্থন করতে চান তবে আইকনের একরঙা সংস্করণের জন্য একটি একক স্তর প্রদান করুন৷

    একটি চিত্র একটি একরঙা আইকন স্তর (বাম চিত্র) এবং রঙের পূর্বরূপ (ডান চিত্র) এর উদাহরণ দেখাচ্ছে। একরঙা স্তরটি একটি 66x66 নিরাপদ অঞ্চলের মধ্যে কেন্দ্রীভূত একটি নমুনা Android লোগোর 16-পার্শ্বযুক্ত আইকন দেখায়৷ নিরাপদ অঞ্চলটি একটি 108x108 পাত্রের ভিতরে কেন্দ্রীভূত। ভিন্ন রঙের ব্যবহারকারী থিমগুলিতে (কমলা, গোলাপী, হলুদ এবং সবুজ) প্রয়োগ করা হলে রঙের পূর্বরূপগুলি এই স্তর প্রদর্শন দেখায়।
    চিত্র 6. একটি একরঙা আইকন স্তর (বামে) রঙের পূর্বরূপের উদাহরণ সহ (ডানদিকে)।
  • সমস্ত স্তরের আকার 108x108 dp করুন৷

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

  • কমপক্ষে 48x48 dp লোগো ব্যবহার করুন। এটি অবশ্যই 66x66 dp এর বেশি হবে না, কারণ আইকনের ভিতরের 66x66 dp মুখোশযুক্ত ভিউপোর্টের মধ্যে প্রদর্শিত হবে৷

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

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

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

অ্যাডাপটিভ আইকনগুলি, ঠিক নন-অ্যাডাপ্টিভ আইকনগুলির মতো, অ্যাপ ম্যানিফেস্টে 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" />

    // Starting with Android 13 (API level 33), you can opt-in to providing a
    // <monochrome> drawable.
    <monochrome android:drawable="@drawable/ic_launcher_monochrome" />
</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() পদ্ধতিতে কল করুন।

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

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

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