VectorDrawable ব্যবহার করে বৃত্তাকার ব্যাকগ্রাউন্ডসহ টিক মার্ক (✓) বানানো
এই উদাহরণটি দেখাবে কিভাবে একটি ভেক্টর ড্রেয়েবলে একসাথে একটি বৃত্ত (Circle) এবং তার ভেতরে একটি টিক মার্ক (Checkmark) আঁকা যায়। এটি "Complete", "Verified", "Success" স্টেটস দেখানোর জন্য ιδিয়াল।
ধাপ ১: নতুন প্রজেক্ট তৈরি করুন
Android Studio-তে File → New Project দিয়ে প্রজেক্ট তৈরি করুন।
ধাপ ২: লেয়াউট ফাইল (res/layout/activity_main.xml)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
android:layout_marginTop="30dp"
tools:context=".MainActivity">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@drawable/background" />
</LinearLayout>
ধাপ ৩: ভেক্টর ড্রেয়েবল (drawable/background.xml)
একই <vector>-এ দুটি <path> থাকতে পারে, কিন্তু এখানে একটি পাথে বৃত্ত এবং টিক দুটোই আঁকা হয়েছে (fillColor সবুজ)।
<vector xmlns:android="https://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:autoMirrored="true"
android:viewportWidth="426.667"
android:viewportHeight="426.667">
<path
android:fillColor="#6AC259"
android:pathData="M213.333,0C95.518,0 0,95.514 0,213.333s95.518,213.333 213.333,213.333c117.828,0 213.333,-95.514 213.333,-213.333S331.157,0 213.333,0zM174.199,322.918l-93.935,-93.931l31.309,-31.309l62.626,62.622l140.894,-140.898l31.309,31.309L174.199,322.918z" />
</vector>
Path Data বিশ্লেষণ:
- প্রথম অংশ (
M213.333,0C...z): একটি বৃত্ত (Circle) আঁকে। zপাথ ক্লোজ করে।- দ্বিতীয় অংশ (
M174.199,322.918l...z): টিক মার্ক (Checkmark) আঁকে। - ভিউপোর্ট ৪২৬.৬৬৭x৪২৬.৬৬৭, তাই কোঅর্ডিনেট বড়।
অ্যাপ্লিকেশনটি রান করুন
ডিভাইস সংযুক্ত করে Run করুন। একটি সবুজ বৃত্তের ভেতরে সাদা টিক মার্ক দেখাবে।
উন্নত পদ্ধতি: Layer List বা দুটি পাথ
রঙ আলাদা করতে (বৃত্ত নীল, টিক সাদা) দুটি আলাদা <path> বা <group> ব্যবহার করুন:
<vector ...>
<!-- বৃত্ত -->
<path android:fillColor="#2196F3" android:pathData="M213.333,0C95.518,0 0,95.514 0,213.333s95.518,213.333 213.333,213.333 213.333,-95.514 213.333,-213.333S331.157,0 213.333,0z" />
<!-- টিক (সাদা) -->
<path android:fillColor="#FFFFFF" android:pathData="M174.199,322.918l-93.935,-93.931l31.309,-31.309l62.626,62.622l140.894,-140.898l31.309,31.309L174.199,322.918z" />
</vector>
