Загрузка векторных ассетов в Android Studio

Загрузка векторных ассетов в Android Studio

Загрузка векторных ассетов в Android Studio

Здравствуйте! В сегодняшней статье мы поговорим о загрузке векторных ассетов в Android Studio. Вы узнаете, как добавлять SVG-файлы в проект, превращать их в VectorDrawable и использовать в интерфейсе вашего Android-приложения.

Что такое векторные ассеты?

VectorDrawable — это векторное изображение, которое можно использовать в Android вместо растровых PNG. Оно масштабируется без потери качества, что особенно удобно при разработке под разные экраны.

Android Studio предоставляет встроенный инструмент Vector Asset Studio, который позволяет импортировать SVG-файлы и автоматически конвертировать их в XML-представление — .xml файлы в папке res/drawable.

Шаг 1: Подготовьте SVG-файл

Перед началом убедитесь, что у вас есть SVG-файл, который вы хотите добавить в проект. Их можно скачать с сайтов вроде Flaticon, Undraw или создать самостоятельно в Illustrator или Figma.

Рекомендуется проверить корректность SVG перед импортом, так как некоторые элементы (например, фильтры, градиенты) могут некорректно отображаться в Android.

Шаг 2: Откройте папку res/drawable

В Android Studio:

  1. Перейдите в дерево проекта
  2. Найдите папку:
    app → src → main → res → drawable
  3. Кликните по ней правой кнопкой мыши

Шаг 3: Запустите Vector Asset Studio

Выберите в контекстном меню:


New → Vector Asset

Откроется мастер импорта.

Шаг 4: Импорт SVG-файла

В открывшемся окне:

  1. Нажмите на иконку плюса справа от поля «Path»
  2. Выберите опцию «Local SVG file»
  3. Укажите ваш SVG-файл на компьютере
  4. Android Studio отобразит превью иконки
  5. Нажмите Next, затем Finish

Формат имени файла будет автоматически преобразован в нижний регистр без пробелов и спецсимволов, например: my_icon.xml.

Шаг 5: Как использовать векторный ассет в коде

После того как файл добавлен в папку drawable, вы можете использовать его в коде следующим образом:

В Jetpack Compose:


@Composable

fun MyIcon() {

    Image(

        painter = painterResource(id = R.drawable.my_icon),

        contentDescription = null

    )

}

В XML разметке:


<ImageView

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    app:srcCompat="@drawable/my_icon" />

Полезные советы

  • Если вы используете Figma, экспортируйте изображения в формате SVG и убедитесь, что они не содержат сложных эффектов.
  • Имена файлов должны быть в нижнем регистре, без пробелов и специальных символов.
  • Проверьте, чтобы в манифесте было включено использование векторной графики:

  • android {

        defaultConfig {

            vectorDrawables.useSupportLibrary = true

        }

    }

    Заключение

    Добавление векторных ассетов в Android Studio — простой и важный шаг в современной разработке. VectorDrawable экономит место в APK и обеспечивает высокое качество отображения на всех экранах, что делает его предпочтительным вариантом по сравнению с PNG.

    Теперь вы умеете добавлять SVG-файлы в проект и использовать их в интерфейсе через Jetpack Compose и XML.

    Хотите научиться профессиональной разработке Android-приложений? Тогда рекомендуем видеокурс Создание приложений для Android с нуля. Там вы найдёте всё необходимое — от основ до создания реальных приложений!

    Источник

    НЕТ КОММЕНТАРИЕВ

    Оставить комментарий