در دنیای توسعه اپلیکیشن‌های اندرویدی، رابط کاربری (UI) نقش کلیدی در جذب و حفظ کاربران ایفا می‌کند. یکی از اجزای اساسی UI، منابع SVG هستند که باید علاوه بر زیبایی، وضوح و مقیاس‌پذیری بالایی داشته باشند. فرمت SVG (Scalable Vector Graphics) به دلیل ماهیت وکتوری خود، بهترین گزینه برای آیکون‌هاست، چرا که کیفیت خود را در هر اندازه‌ای حفظ می‌کند.

اگرچه اندروید استودیو مجموعه‌ای از آیکون‌های پیش‌فرض (Material Icons) را ارائه می‌دهد، اما برای متمایز کردن محصول خود یا استفاده از آیکون‌های سفارشی، نیاز به وارد کردن منابع SVG خود داریم. در این مقاله جامع، ما سه روش اصلی و کاربردی برای ادغام فایل‌های SVG در پروژه‌های اندرویدی، چه به صورت تکی و چه دسته‌جمعی، را به تفصیل بررسی خواهیم کرد.

۱. چرا باید منابع SVG در اندروید استفاده کنیم؟

قبل از ورود به جزئیات فنی، لازم است بدانیم SVG چه مزایایی نسبت به فرمت‌های پیکسلی مانند PNG دارد:

• مقیاس‌پذیری نامحدود: SVGها بر اساس محاسبات ریاضی ساخته شده‌اند، نه پیکسل‌ها. این بدان معناست که بدون افت کیفیت، می‌توانند از ابعاد کوچک تا بزرگ تغییر اندازه دهند.
• حجم فایل کمتر: برای آیکون‌های ساده، فایل‌های SVG معمولاً حجم کمتری نسبت به معادل‌های خود در فرمت‌های پیکسلی دارند.
• قابلیت ویرایش آسان: به دلیل ماهیت متنی بودن (XML)، می‌توان کدهای SVG را به راحتی با ویرایشگرهای متنی یا ابزارهایی مانند Figma تغییر داد.

۲. اضافه کردن آیکون‌های پیش‌فرض اندروید استودیو در Jetpack Compose

اگر هدف شما استفاده از آیکون‌های استاندارد گوگل است، بهترین و ساده‌ترین روش استفاده مستقیم از کتابخانه `Material Icons` در محیط Compose است.

نحوه پیاده‌سازی:
اطمینان حاصل کنید که وابستگی (Dependency) لازم در فایل `build.gradle (Module: app)` اضافه شده است که ابتدا ، در فایل libs.version.toml اضافه میکنیم :

material-icons-extended = { group = "androidx.compose.material", name = "material-icons-extended" }

سپس در فایل گردل این خط رو اضافه کنید :

implementation(libs.material.icons.extended)

بعد از اضافه کردن ، پروژه رو sync کنید ، سپس میتونید به اینصورت در جاهای که نیاز دارید از این ایکون ها استفاده کنید :

تا به این جا ، ما از ایکون های های استفاده کردیم ، که به صورت پیش فرض هستند و حالا میخوایم ایکون های رو اضافه کنیم که به صورت پیش فرض نیستند

۳. روش تکی: اضافه کردن یک فایل SVG به صورت مستقیم

این روش زمانی مناسب است که فقط نیاز به اضافه کردن یک یا دو آیکون سفارشی دارید.

1. ایجاد پوشه `drawable`: در پوشه res پروژه، اگر پوشهdrawable وجود ندارد، آن را ایجاد کنید.( معمولا به صورت پیش فرض وجود دارد )
2. کپی و جای‌گذاری: فایل SVG مورد نظر خود را مستقیماً در پوشه res/drawable کپی کنید.(اما این روش رو پیشنهاد نمیکنم ، بهتر از روش زیر استفاده کنیم )
3. روش درست اضافه کردن منابع SVG:
   •  ابتدا روی فایل drawable راست کلیک کنید ،
   • مانند شکل زیر از داخل منو روی گزینه ای ،Vector asset کلیک کنید ،
   • از داخل قسمت باز شده ، فایل svg مورد نظر رو انتخاب کنید ، و بعد از انتخاب نام مناسب به پروژه خود اضافه کنید .

بعد از این که این فایل رو اضافه کردید میتونید ، به صورت زیر در پروژه ای خودتون استفاده کنید .

1. استفاده در xml:می‌توانید از این فایل درImageView یا کامپوننت‌های دیگر خود استفاده کنید:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/my_custom_icon" />

2. استفاده در compose :

Icon(  
    painter = painterResource(R.drawable.ic_done_add),  
    contentDescription = "افزودن",  
    tint = Black  
)

نکته : برای این که از ایکون خودتون استفاده کنید ، که در پوشه ای drawable هست باید painter = painterResource کنیم که دسترسی به ایکون داشته باشیم .

۴. روش گروهی: استفاده از ابزار رسمی Android Studio (Vector Asset Studio)

این روش استاندارد و توصیه شده برای وارد کردن تعداد زیادی آیکون یا تبدیل منابع SVG به فرمت بومی اندروید است.

ابتدا از مانند تصویر زیر از منوی tools به قسمت ResourceManager میریم :

بعد از این جا گزینه + کلیک کنید و گزینه ای import drwable رو بزنید

بعد پوشه folder ای که فایل های svg رو در اون دارید رو میتونید ، کامل و به صورت یک جا به پروژه ای خودتون اضافه کنید .

نتیجه‌گیری و هدیه ویژه

اضافه کردن منابع SVG به پروژه اندرویدی نه تنها کیفیت بصری برنامه شما را افزایش می‌دهد، بلکه انعطاف‌پذیری توسعه را نیز بالا می‌برد. با استفاده از روش‌های تکی یا تبدیل گروهی از طریق Vector Asset Studio، می‌توانید به راحتی کتابخانه‌ای غنی از آیکون‌های سفارشی بسازید.

همچنین برای مطالعه بیشتر پیشنهاد میکنم تقسیم بندی  ایکون ها در اندروید استودیو مطالبعه کنید

در پایان، برای شروع سریع کار، یک پک آیکون رایگان و باکیفیت SVGرا به شما معرفی می‌کنم که می‌توانید آن را دانلود کرده و مستقیماً در پروژه‌های اندرویدی خود استفاده کنید. همچنین، این فایل‌ها کاملاً سازگار با Figma هستند و می‌توانید در محیط طراحی خود نیز از آن‌ها بهره ببرید.

آیکون ها هدیه 

امیدوارم این مطلب بتونه بهتر و سریع تر کد بزنید

موفق باشید 🌸