ভেক্টর ড্রয়েবেল এক নজরে

Compose-এর মাধ্যমে চেষ্টা করুন
Jetpack Compose হল Android-এর জন্য সাজেস্ট করা UI টুলকিট। Compose-এ কীভাবে গ্রাফিক্স দেখাতে হয় তা জানুন।
ImageVector →

Key points

  • ভেক্টর ড্রয়েবেল হল একটি ভেক্টর গ্রাফিক যা XML ফাইলে পয়েন্ট, লাইন ও কার্ভের সেট হিসেবে সংজ্ঞায়িত করা হয় এবং এর সাথে রঙ সম্পর্কিত তথ্যও থাকে।
  • ভেক্টর ড্রয়েবেল স্কেল করা যায়, অর্থাৎ ডিসপ্লে কোয়ালিটি নষ্ট না করেই এগুলির সাইজ ছোট-বড় করা যায়। এর ফলে, Android অ্যাপে ব্যবহারের জন্য এগুলি আদর্শ হয়ে ওঠে, কারণ এটি আপনার APK ফাইলের সাইজ কমাতে এবং পারফর্ম্যান্স উন্নত করতে সাহায্য করতে পারে।
  • আপনার প্রোজেক্টে ড্রয়েবেল ফোল্ডারে ডানদিকের বোতামে ক্লিক করে এবং 'নতুন > ভেক্টর অ্যাসেট' বিকল্প বেছে নিয়ে আপনি Android Studio-তে ভেক্টর ড্রয়েবেল তৈরি করতে পারবেন। এছাড়াও, আপনি ভেক্টর ড্রয়েবেল হিসেবে Android Studio-তে SVG ফাইল ইম্পোর্ট করতে পারবেন।
Google Bard-এর মাধ্যমে ২৪ জুলাই, ২০২৩-এ তৈরি করা সারসংক্ষেপ

ভূমিকা

VectorDrawable হল একটি ভেক্টর গ্রাফিক যা XML ফাইলে বিন্দু, রেখা ও কার্ভের সেট হিসেবে এবং এর সাথে সম্পর্কিত রঙের তথ্য সহ সংজ্ঞায়িত করা হয়। ভেক্টর ড্রয়েবেল ব্যবহার করার প্রধান সুবিধা হল ছবির স্কেলেবিলিটি। ডিসপ্লে কোয়ালিটি নষ্ট না করেই এটি স্কেল করা যায়, যার অর্থ হল ছবির কোয়ালিটি নষ্ট না করেই বিভিন্ন স্ক্রিন ডেনসিটির জন্য একই ফাইলের সাইজ পরিবর্তন করা যায়। এর ফলে APK ফাইলের সাইজ ছোট হয় এবং ডেভেলপারকে কম রক্ষণাবেক্ষণ করতে হয়। এছাড়াও, আপনি প্রতিটি ডিসপ্লে রেজোলিউশনের জন্য একাধিক ছবি ব্যবহার করার পরিবর্তে একাধিক XML ফাইল ব্যবহার করে অ্যানিমেশনের জন্য ভেক্টর ইমেজ ব্যবহার করতে পারেন।

এই পৃষ্ঠা এবং নিচের ভিডিওতে XML-এ ভেক্টর ড্রয়েবেল কীভাবে তৈরি করতে হয় তার ওভারভিউ দেওয়া আছে। Android Studio, SVG ফাইলকে ভেক্টর ড্রয়েবেল ফর্ম্যাটে কনভার্ট করতে পারে, যেমনটি মাল্টি-ডেনসিটি ভেক্টর গ্রাফিক্স যোগ করুন ব্যবহার করে বর্ণনা করা হয়েছে।

Android 5.0 (API লেভেল ২১) হল প্রথম ভার্সন যা আনুষ্ঠানিকভাবে ভেক্টর ড্রয়েবেলকে VectorDrawable এবং AnimatedVectorDrawable-এর সাথে সাপোর্ট করে, কিন্তু আপনি Android সাপোর্ট লাইব্রেরির মাধ্যমে পুরনো ভার্সন সাপোর্ট করতে পারেন, যা VectorDrawableCompat এবং AnimatedVectorDrawableCompat ক্লাস প্রদান করে।

VectorDrawable ক্লাস সম্পর্কে

VectorDrawable স্ট্যাটিক ড্রয়েবল অবজেক্টকে সংজ্ঞায়িত করে। SVG ফর্ম্যাটের মতো, প্রতিটি ভেক্টর গ্রাফিককে ট্রি হায়ারার্কি হিসেবে সংজ্ঞায়িত করা হয়, যা path এবং group অবজেক্ট দিয়ে তৈরি। প্রতিটি path-এ অবজেক্টের আউটলাইনের জ্যামিতি এবং group-এ ট্রান্সফর্মেশনের বিবরণ থাকে। XML ফাইলে যেভাবে দেখানো হয়েছে, ঠিক সেই ক্রমেই সব পাথ আঁকা হয়েছে।

ছবি ১. ভেক্টর ড্রয়েবেল অ্যাসেটের স্যাম্পেল হায়ারার্কি

ভেক্টর অ্যাসেট স্টুডিও টুলটি XML ফাইল হিসেবে প্রোজেক্টে ভেক্টর গ্রাফিক যোগ করার সহজ উপায় প্রদান করে।

XML-এর উদাহরণ

এখানে একটি স্যাম্পেল VectorDrawable XML ফাইল দেওয়া হল যা চার্জিং মোডে ব্যাটারির ছবি দেখায়। 

<!-- res/drawable/battery_charging.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="24dp"
    android:width="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
   <group
         android:name="rotationGroup"
         android:pivotX="10.0"
         android:pivotY="10.0"
         android:rotation="15.0" >
      <path
        android:name="vect"
        android:fillColor="#FF000000"
        android:pathData="M15.67,4H14V2h-4v2H8.33C7.6,4 7,4.6 7,5.33V9h4.93L13,7v2h4V5.33C17,4.6 16.4,4 15.67,4z"
        android:fillAlpha=".3"/>
      <path
        android:name="draw"
        android:fillColor="#FF000000"
        android:pathData="M13,12.5h2L11,20v-5.5H9L11.93,9H7v11.67C7,21.4 7.6,22 8.33,22h7.33c0.74,0 1.34,-0.6 1.34,-1.33V9h-4v3.5z"/>
   </group>
</vector>

এই XML নিম্নলিখিত ছবি রেন্ডার করে:

AnimatedVectorDrawable ক্লাস সম্পর্কে

AnimatedVectorDrawable ভেক্টর গ্রাফিকের প্রপার্টিতে অ্যানিমেশন যোগ করে। আপনি তিনটি আলাদা রিসোর্স ফাইল হিসেবে বা সম্পূর্ণ ড্রয়েবলকে সংজ্ঞায়িত করে এমন একটি XML ফাইল হিসেবে অ্যানিমেটেড ভেক্টর গ্রাফিক সংজ্ঞায়িত করতে পারেন। আরও ভালোভাবে বোঝার জন্য দুটি পদ্ধতিই দেখে নেওয়া যাক: একাধিক XML ফাইল এবং একটি XML ফাইল।

একাধিক XML ফাইল

এই পদ্ধতি ব্যবহার করে আপনি তিনটি আলাদা XML ফাইল নির্ধারণ করতে পারবেন:

  • একটি VectorDrawable XML ফাইল।
  • একটি AnimatedVectorDrawable XML ফাইল যা টার্গেট VectorDrawable, অ্যানিমেট করার জন্য টার্গেট পাথ ও গ্রুপ, প্রপার্টি এবং ObjectAnimator অবজেক্ট বা AnimatorSet অবজেক্ট হিসেবে সংজ্ঞায়িত অ্যানিমেশনকে সংজ্ঞায়িত করে।
  • একটি অ্যানিমেটর XML ফাইল।

একাধিক XML ফাইলের উদাহরণ

নিম্নলিখিত XML ফাইলগুলি ভেক্টর গ্রাফিকের অ্যানিমেশন দেখায়।

  • VectorDrawable-এর XML ফাইল: vd.xml 
  • <vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:height="64dp"
   android:width="64dp"
   android:viewportHeight="600"
   android:viewportWidth="600" >
   <group
      android:name="rotationGroup"
      android:pivotX="300.0"
      android:pivotY="300.0"
      android:rotation="45.0" >
      <path
         android:name="vectorPath"
         android:fillColor="#000000"
         android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
   </group>
</vector>
  • AnimatedVectorDrawable-এর XML ফাইল: avd.xml 
  • <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:drawable="@drawable/vd" >
     <target
         android:name="rotationGroup"
         android:animation="@anim/rotation" />
     <target
         android:name="vectorPath"
         android:animation="@anim/path_morph" />
</animated-vector>
  • AnimatedVectorDrawable-এর XML ফাইলে ব্যবহার করা অ্যানিমেটর XML ফাইল: rotation.xml এবং path_morph.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />
     
    <set xmlns:android="http://schemas.android.com/apk/res/android">
   <objectAnimator
      android:duration="3000"
      android:propertyName="pathData"
      android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
      android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
      android:valueType="pathType"/>
</set>

একটি XML ফাইল

এই পদ্ধতি ব্যবহার করে, আপনি XML বান্ডেল ফর্ম্যাটের মাধ্যমে সম্পর্কিত XML ফাইলগুলিকে একটি একক XML ফাইলে মার্জ করতে পারেন। অ্যাপ তৈরি করার সময়, aapt ট্যাগ আলাদা রিসোর্স তৈরি করে এবং অ্যানিমেটেড ভেক্টরে সেগুলিকে রেফারেন্স করে। এই পদ্ধতির জন্য Build Tools 24 বা তার পরবর্তী যেকোনও ভার্সন প্রয়োজন এবং আউটপুট ব্যাকওয়ার্ড কম্প্যাটিবল।

একটি XML ফাইলের উদাহরণ 

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:width="24dp"
            android:height="24dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <path
                android:name="root"
                android:strokeWidth="2"
                android:strokeLineCap="square"
                android:strokeColor="?android:colorControlNormal"
                android:pathData="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" />
        </vector>
    </aapt:attr>
    <target android:name="root">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="pathData"
                android:valueFrom="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7"
                android:valueTo="M6.4,6.4 L17.6,17.6 M6.4,17.6 L17.6,6.4"
                android:duration="300"
                android:interpolator="@android:interpolator/fast_out_slow_in"
                android:valueType="pathType" />
        </aapt:attr>
    </target>
</animated-vector>

ভেক্টর ড্রয়েবেল ব্যাকওয়ার্ড কম্প্যাটিবিলিটি সমাধান

Android 5.0 (API লেভেল ২১)-এর চেয়ে পুরনো প্ল্যাটফর্ম ভার্সন চলছে এমন ডিভাইসে ভেক্টর ড্রয়েবেল ও অ্যানিমেটেড ভেক্টর ড্রয়েবেল সাপোর্ট করতে অথবা Android 7.0 (API লেভেল ২৪)-এর চেয়ে পুরনো ভার্সনে fillColor, fillType ও strokeColor কার্যকারিতা ব্যবহার করতে, VectorDrawableCompat ও AnimatedVectorDrawableCompat দুটি সাপোর্ট লাইব্রেরির মাধ্যমে উপলভ্য: যথাক্রমে support-vector-drawable ও animated-vector-drawable।

Android Studio 1.4-এ ভেক্টর ড্রয়েবেলের জন্য সীমিত কম্প্যাটিবিলিটি সাপোর্ট চালু করা হয়েছে। এটি বিল্ড টাইমে PNG ফাইল তৈরি করে। তবে, ভেক্টর ড্রয়েবেল এবং অ্যানিমেটেড ভেক্টর ড্রয়েবেল সাপোর্ট লাইব্রেরি নমনীয়তা এবং ব্যাপক সামঞ্জস্যতা অফার করে — এটি একটি সাপোর্ট লাইব্রেরি, তাই আপনি এটি Android 2.1 (API লেভেল 7+) পর্যন্ত সমস্ত Android প্ল্যাটফর্ম ভার্সনের সাথে ব্যবহার করতে পারবেন। ভেক্টর সাপোর্ট লাইব্রেরি ব্যবহার করার জন্য আপনার অ্যাপ কনফিগার করতে, অ্যাপ মডিউলে আপনার build.gradle ফাইলে vectorDrawables এলিমেন্ট যোগ করুন।

vectorDrawables এলিমেন্ট কনফিগার করতে নিম্নলিখিত কোড স্নিপেট ব্যবহার করুন:

গ্ৰুভি

// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

Kotlin

// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

গ্ৰুভি

// For Gradle Plugin 1.5 or below
android {
    defaultConfig {
        // Stops the Gradle plugin’s automatic rasterization of vectors
        generatedDensities = []
    }
    // Flag notifies aapt to keep the attribute IDs around
    aaptOptions {
        additionalParameters "--no-version-vectors"
    }
}

Kotlin

// For Gradle Plugin 1.5 or below
android {
    defaultConfig {
        // Stops the Gradle plugin’s automatic rasterization of vectors
        generatedDensities()
    }
    // Flag notifies aapt to keep the attribute IDs around
    aaptOptions {
        additionalParameters("--no-version-vectors")
    }
}

আপনি Android 4.0 (API লেভেল 14) এবং তার পরবর্তী যেকোনও ভার্সনে চলা ডিভাইসে VectorDrawableCompat এবং AnimatedVectorDrawableCompat ব্যবহার করতে পারবেন। Android যেভাবে ড্রয়েবেল লোড করে, তার ফলে XML ফাইলের মতো ড্রয়েবেল আইডি গ্রহণ করে এমন সব জায়গায় ভেক্টর ড্রয়েবেল লোড করা যায় না। ভেক্টর ড্রয়েবেল ব্যবহার করা সহজ করার জন্য android.support.v7.appcompat প্যাকেজে বেশ কিছু ফিচার যোগ করা হয়েছে। প্রথমত, আপনি যখন ImageView বা ImageButton এবং FloatingActionButton-এর মতো সাবক্লাসের সাথে android.support.v7.appcompat প্যাকেজ ব্যবহার করেন, তখন আপনি ভেক্টর ড্রয়েবেল এবং android:src-এর জন্য উপলভ্য অন্য যেকোনও ড্রয়েবেল রেফারেন্স করতে নতুন app:srcCompat অ্যাট্রিবিউট ব্যবহার করতে পারবেন: 

<ImageView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:srcCompat="@drawable/ic_add" />

রানটাইমে ড্রয়েবল পরিবর্তন করতে, আপনি আগের মতো setImageResource() পদ্ধতি ব্যবহার করতে পারেন। AppCompat এবং app:srcCompat ব্যবহার করা হল আপনার অ্যাপে ভেক্টর ড্রয়েবেল ইন্টিগ্রেট করার সবচেয়ে ফুলপ্রুফ পদ্ধতি।

Support Library 25.4.0 এবং তার পরবর্তী ভার্সনে নিম্নলিখিত ফিচার কাজ করে:

  • পাথ মর্ফিং (PathType evaluator) একটি পাথকে অন্য পাথে মর্ফ করতে ব্যবহার করা হয়।
  • পাথ ইন্টারপোলেশন LinearInterpolator-এর মতো সিস্টেম-নির্ধারিত ইন্টারপোলেটরের পরিবর্তে একটি ফ্লেক্সিবল ইন্টারপোলেটর (পাথ হিসেবে দেখানো) নির্ধারণ করতে ব্যবহৃত হয়।

Support Library 26.0.0-beta1 এবং তার পরবর্তী যেকোনও ভার্সনে নিম্নলিখিত ফিচার কাজ করে:

  • পাথ বরাবর সরানো অ্যানিমেশনের অংশ হিসেবে, জ্যামিতিক অবজেক্টকে ইচ্ছামতো পাথ বরাবর সরানো যেতে পারে।

সাপোর্ট লাইব্রেরি ব্যবহার করে একাধিক XML ফাইলের উদাহরণ

নিম্নলিখিত XML ফাইলগুলি ভেক্টর গ্রাফিক অ্যানিমেট করার জন্য একাধিক XML ফাইল ব্যবহার করার পদ্ধতি প্রদর্শন করে।

  • VectorDrawable-এর XML ফাইল: vd.xml 
  • <vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:height="64dp"
   android:width="64dp"
   android:viewportHeight="600"
   android:viewportWidth="600" >
   <group
      android:name="rotationGroup"
      android:pivotX="300.0"
      android:pivotY="300.0"
      android:rotation="45.0" >
      <path
         android:name="vectorPath"
         android:fillColor="#000000"
         android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
   </group>
</vector>
  • AnimatedVectorDrawable-এর XML ফাইল: avd.xml 
  • <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:drawable="@drawable/vd" >
     <target
         android:name="rotationGroup"
         android:animation="@anim/rotation" />
</animated-vector>
  • AnimatedVectorDrawable-এর XML ফাইলে ব্যবহার করা অ্যানিমেটর XML ফাইল: rotation.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />

একটি XML ফাইল

নিম্নলিখিত XML ফাইলটি একটি ভেক্টর গ্রাফিক অ্যানিমেট করার জন্য একটি একক XML ফাইল ব্যবহার করার পদ্ধতি প্রদর্শন করে। অ্যাপ তৈরি করার সময়, aapt ট্যাগ আলাদা রিসোর্স তৈরি করে এবং অ্যানিমেটেড ভেক্টরে সেগুলিকে রেফারেন্স করে। এই পদ্ধতির জন্য Build Tools 24 বা তার পরবর্তী যেকোনও ভার্সন প্রয়োজন এবং আউটপুট ব্যাকওয়ার্ড কম্প্যাটিবল।

সাপোর্ট লাইব্রেরি ব্যবহার করে একটি XML ফাইলের উদাহরণ 

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="64dp"
            android:height="64dp"
            android:viewportWidth="600"
            android:viewportHeight="600">
            <group
                android:name="rotationGroup"
                android:pivotX="300"
                android:pivotY="300"
                android:rotation="45.0" >
                <path
                    android:name="vectorPath"
                    android:fillColor="#000000"
                    android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
            </group>
        </vector>
    </aapt:attr>
    <target android:name="rotationGroup">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="rotation"
                android:valueFrom="0"
                android:valueTo="360"
                android:duration="6000"
                android:interpolator="@android:interpolator/fast_out_slow_in" />
        </aapt:attr>
    </target>
</animated-vector>