Vector Drawable: এটি কী, XML ফরম্যাট এবং কীভাবে কাজ করে

Vector Drawable কী?

Vector Drawable হল একটি Android রিসোর্স যা SVG (Scalable Vector Graphics) স্পেসিফিকেশনের উপর ভিত্তি করে XML ফরম্যাটে একটি ভেক্টর ছবি উপস্থাপন করে। Google এই ফরম্যাটটি Android 5.0 (API 21)-এ আইকন, ইলাস্ট্রেশন এবং অন্যান্য গ্রাফিকাল UI এলিমেন্টের জন্য রাস্টার ছবির বিকল্প হিসেবে চালু করেছিল।

PNG-এর বিপরীতে, যেখানে ছবি একটি নির্দিষ্ট আকারের পিক্সেল অ্যারে হিসেবে সংরক্ষিত হয়, Vector Drawable গাণিতিকভাবে আকার বর্ণনা করে — পয়েন্ট কোঅর্ডিনেট, বেজিয়ার কার্ভ, ফিল এবং স্ট্রোকের মাধ্যমে। এর মানে হল যে একটি একক ভেক্টর ছবি বিভিন্ন স্ক্রিন ঘনত্বের (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi, nodpi) জন্য ছয়টি PNG ফাইল প্রতিস্থাপন করতে পারে, যা গ্রাফিক্স রিসোর্স রক্ষণাবেক্ষণকে নাটকীয়ভাবে সহজ করে।

ফরম্যাটটি শুধু স্থির ছবিই নয়, AnimatedVectorDrawable-এর মাধ্যমে অ্যানিমেশন, সেইসাথে থিম অ্যাট্রিবিউটের মাধ্যমে ডার্ক থিম অভিযোজন এবং কাস্টম রঙও সমর্থন করে। Android 7.0 (API 24) থেকে, Vector Drawable গ্রেডিয়েন্ট ফিল এবং জটিল ক্লিপ অপারেশন (clipPath)-ও সমর্থন করে, যা ডিজাইনের সম্ভাবনা বাড়ায়।

Vector Drawable-এর মূল উপাদান

প্রতিটি Vector Drawable-এ প্রস্থ, উচ্চতা এবং ভিউপোর্ট প্যারামিটার সহ একটি মূল vector এলিমেন্ট থাকে — একটি ভার্চুয়াল কোঅর্ডিনেট সিস্টেম যেখানে আকার আঁকা হয়। ভিতরে গ্রুপ (group) এবং পাথ (path) থাকে, যেখানে path কমান্ডের ক্রমের মাধ্যমে জ্যামিতি সংজ্ঞায়িত করে: M (moveTo), L (lineTo), C (cubicTo), Z (close) এবং অন্যান্য। প্রতিটি path-এর নিজস্ব fillColor এবং strokeColor থাকতে পারে, যা থিম রিসোর্সকে রেফারেন্স করতে পারে।

অতিরিক্ত উপাদানের মধ্যে রয়েছে ক্লিপিংয়ের জন্য clip-path, গ্রেডিয়েন্ট ট্রানজিশনের জন্য gradient এবং android:theme অ্যাট্রিবিউটের মাধ্যমে ডার্ক থিম অভিযোজন অ্যাট্রিবিউট। Vector Drawable-এর সব রঙ থিম অ্যাট্রিবিউটের রেফারেন্স হিসেবে নির্দিষ্ট করা যেতে পারে (যেমন ?attr/colorPrimary), যা রিসোর্স ডুপ্লিকেট না করেই থিম পরিবর্তন করার সময় আইকনের চেহারা পরিবর্তন করে।

Vector Drawable ফরম্যাট: XML গঠন

Vector Drawable XML ফাইলটি res/drawable/ ডিরেক্টরিতে রাখা হয় এবং এর একটি মূল এলিমেন্ট থাকে। ভিতরে শ্রেণিবিন্যাস সংগঠনের জন্য নেস্টেড এলিমেন্ট এবং কনট্যুর বর্ণনার জন্য এলিমেন্ট থাকতে পারে। প্রতিটি path-এ একটি pathData অ্যাট্রিবিউট থাকে — SVG পাথ ফরম্যাটে ড্রইং কমান্ডের একটি স্ট্রিং।

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <path
        android:fillColor="@color/ic_launcher_background"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"
        android:strokeWidth="1"
        android:strokeColor="#333333"/>

</vector>

উদাহরণে 24×24 ভিউপোর্টে 10 ইউনিট ব্যাসার্ধের একটি বৃত্ত বর্ণনা করা হয়েছে। প্যারামিটার fillColor একটি রঙের রিসোর্সকে রেফারেন্স করে, যখন strokeWidth এবং strokeColor স্ট্রোক সংজ্ঞায়িত করে। প্রস্থ এবং উচ্চতা dp-তে নির্দিষ্ট করা হয় — এটি অতিরিক্ত রূপান্তর ছাড়াই বিভিন্ন পিক্সেল ঘনত্বের স্ক্রিনে সঠিক স্কেলিং নিশ্চিত করে।

গ্রুপিং এবং রূপান্তর

group এলিমেন্ট একাধিক পাথকে গ্রুপ করতে এবং তাদের উপর সাধারণ রূপান্তর প্রয়োগ করতে দেয়: ঘূর্ণন (rotation), স্থানান্তর (translateX, translateY) এবং স্কেলিং (scaleX, scaleY)। গ্রুপগুলি নেস্টেড হতে পারে, যা পারফরম্যান্স ক্ষতি ছাড়াই শত শত এলিমেন্টের জটিল শ্রেণিবিন্যাস তৈরি করতে সক্ষম করে।

<vector ...>
    <group android:name="arrow_group"
        android:pivotX="12"
        android:pivotY="12"
        android:rotation="90">
        <path .../>
    </group>
</vector>

pivotX/pivotY অ্যাট্রিবিউটের সাথে গ্রুপিং অ্যানিমেশনের জন্য ব্যবহৃত হয়: আপনি অন্যান্য এলিমেন্ট থেকে স্বাধীনভাবে ছবির একটি অংশ ঘোরাতে বা স্কেল করতে পারেন, যা অ্যানিমেটেড স্টেট আইকন (যেমন লোডিং → সাফল্য) তৈরি করার জন্য বিশেষভাবে কার্যকর।

Vector Drawable বনাম রাস্টার গ্রাফিক্স

ভেক্টর এবং রাস্টার গ্রাফিক্সের মধ্যে পছন্দ ব্যবহারের ক্ষেত্রে নির্ভর করে। Vector Drawable আইকন, ইলাস্ট্রেশন এবং কম বিস্তারিত UI এলিমেন্টের জন্য আদর্শ, যখন হাজার হাজার রঙের ফটো এবং জটিল ছবি রাস্টার ফরম্যাটে থাকে।

Android Performance Patterns (Google I/O 2016) অনুসারে, PNG আইকনকে Vector Drawable দিয়ে প্রতিস্থাপন করা বড় সংখ্যক গ্রাফিকাল রিসোর্সযুক্ত অ্যাপ্লিকেশনের জন্য APKサイজ 40–60% কমিয়ে দেয়। তবে শত শত পাথযুক্ত জটিল ভেক্টর রেন্ডার করার সময় CPU লোড বেড়ে যায়, তাই অ্যানিমেশন এবং ঘন ঘন পুনরায় আঁকার জন্য প্রাক-ক্যাশেড রাস্টার ব্যবহার করার পরামর্শ দেওয়া হয়।

কখন Vector Drawable বেছে নেবেন

Vector Drawable ইন্টারফেস আইকন (টুলবার, নেভিগেশন, স্ট্যাটাস), লোগো, সরল ইলাস্ট্রেশন এবং অ্যানিমেটেড এলিমেন্টের জন্য সর্বোত্তম। ফরম্যাটটি একাধিক স্ক্রিন সমর্থন করার সময় বিশেষভাবে সুবিধাজনক: ছয়টি ঘনত্বের জন্য PNG জেনারেট করার পরিবর্তে, একটি একক XML ফাইলই যথেষ্ট। এটি ডিজাইন রক্ষণাবেক্ষণকে সহজ করে এবং আকারের অমিল ত্রুটি দূর করে। ফটো এবং ফটোরিয়ালিস্টিক গ্রেডিয়েন্ট ছবির জন্য, WebP কম্প্রেশন সহ রাস্টার ফরম্যাট এখনও ব্যবহৃত হয়।

Vector Drawable অ্যানিমেশন

Android দুটি মেকানিজমের মাধ্যমে Vector Drawable অ্যানিমেশন সমর্থন করে: AnimatedVectorDrawable (API 21 থেকে উপলব্ধ) এবং AnimatedStateListDrawable। প্রথমটি পাথ অ্যাট্রিবিউট — ঘূর্ণন, স্থানান্তর, রঙ পরিবর্তন এবং আকার রূপান্তর অ্যানিমেট করতে দেয়। দ্বিতীয়টি মসৃণ ট্রানজিশনের সাথে বিভিন্ন অবস্থার (প্রেস, হাইলাইট) মধ্যে স্যুইচ করে।

AnimatedVectorDrawable তিনটি XML ফাইল ব্যবহার করে: নিজে Vector Drawable, অ্যানিমেশন বর্ণনাকারী ObjectAnimator এবং একটি বাইন্ডিং AnimatedVectorDrawable যা টার্গেট (গ্রুপ বা পাথের নাম) অ্যানিমেটরের সাথে সংযুক্ত করে। অ্যানিমেশন fillColor, strokeColor, rotation, translateX/Y, scaleX/Y এবং এমনকি pathData — একটি আকারকে অন্যটিতে মসৃণভাবে রূপান্তরিত করা (morphing) — পরিবর্তন করতে পারে।

মরফিং অ্যানিমেশন উদাহরণ

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

<!-- res/drawable/anim_plus_to_close.xml -->
<animated-vector xmlns:android="...">
    <target
        android:name="plus_path"
        android:animation="@anim/plus_to_close"/>
</animated-vector>

ObjectAnimator plus_to_close 300 মিলিসেকেন্ডে pathData প্রপার্টি মূল প্লাস আকৃতি থেকে ক্লোজ আকৃতিতে পরিবর্তন করে। সিস্টেম স্বয়ংক্রিয়ভাবে SVG পাথ কমান্ডের দুটি সেটের মধ্যে কোঅর্ডিনেট ইন্টারপোলেট করে। Material Design-এ বোতাম এবং আইকন অবস্থার মসৃণ ট্রানজিশনের জন্য এই ধরনের অ্যানিমেশন ব্যাপকভাবে ব্যবহৃত হয়।

Vector Drawable কোড উদাহরণ

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

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="?attr/colorControlNormal">

    <group android:name="arrow">
        <path
            android:fillColor="@android:color/white"
            android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
    </group>

</vector>

android:tint প্যারামিটার মান ?attr/colorControlNormal সহ স্বয়ংক্রিয়ভাবে সিস্টেম কন্ট্রোল রঙ প্রয়োগ করে — লাইট থিমে গাঢ় ধূসর, ডার্ক থিমে সাদা। অ্যারো নামের গ্রুপটি AnimatedVectorDrawable-এর মাধ্যমে এই আইকনটি অ্যানিমেট করার অনুমতি দেয়।

কোড থেকে Vector Drawable লোড করা

Android-এ প্রোগ্রামেটিকভাবে Vector Drawable লোড করতে AppCompatResources.getDrawable() ক্লাস বা ContextCompat.getDrawable() পদ্ধতি ব্যবহার করা হয়। আধুনিক Jetpack Compose প্রকল্পে, রাস্টার এবং ভেক্টর Drawable painterResource-এর মাধ্যমে লোড করা হয়, যা স্বয়ংক্রিয়ভাবে রিসোর্স ফরম্যাট নির্ধারণ করে।

import androidx.appcompat.content.res.AppCompatResources

val vectorDrawable = AppCompatResources.getDrawable(
    context,
    R.drawable.ic_arrow_back
)

// Jetpack Compose
Icon(
    painter = painterResource(R.drawable.ic_arrow_back),
    contentDescription = "Back",
    tint = MaterialTheme.colorScheme.onSurface
)

AppCompatResources.getDrawable() ব্যবহার করার সময়, AppCompat লাইব্রেরি API লেভেলের ভিত্তিতে স্বয়ংক্রিয়ভাবে সঠিক drawable সংস্করণ নির্বাচন করে: Android 5.0 (API 21)-এর আগের ডিভাইসে রাস্টার ফলব্যাক ব্যবহার করা যেতে পারে; নতুন ডিভাইসে Vector Drawable ব্যবহার করা হয়। Jetpack Compose-এ, painterResource এই সামঞ্জস্যতা স্বয়ংক্রিয়ভাবে পরিচালনা করে।