Android studio logo svg

Векторная иконка приложения для Андроид — полное руководство.

Aug 15 · 4 min read

Однажды копаясь в Андроид документации я с большим удивлением заметил, что в SDK к версии 26 были до б авлены не только адаптивные иконки, но и возможность совсем отказаться от растровых иконок лаунчера на новейших версиях Андроид. Это значит, что вам вовсе не нужно создавать по растровому ассету к каждому разрешению экрана воспользоваться одним/двумя векторными файлами для всех возможных разрешений! Так как растровые иконки достаточно увесистые вы можете таким образом сэкономить много килобайтов в размере приложения. Тут как и везде есть свои моменты и к сожалению я не нашел в интернете полного описания всего процесса. Ну что же, значит пришла моя пора заполнить этот пробел! Ниже вы найдёте видео процесса изготовления единой векторной иконки для приложения, а руководство также доступно на английском и чешском языках.

Прежде чем мы начн ём

Избавится от растровых изображений в целой аппликации — мечта многих оптимизаторов. Особенно если приложения не большое а растровые иконки, при неправильном изготовлении весят почти четверть общего размера приложения. Но тут как и везде есть свои недостатки, давайте поговорим о них, возможно в вашем случае векторная икона — не вариант. Итак:

• Векторный формат в ОС Андроид был введен в версии 21, в качестве иконки приложения в лаунчере векторные изображения можно использовать только в версиях 26 и выше. Это значит, что если Ваше приложение должно поддерживать и более старые версии — Вам все равно придется иметь в наличии растровые иконки. Так что бонус тут не большой.
• Векторный формат который используется в ОС Андроид это не привычные нам SVG/EPS/AI и так далее, это формат XML, а это значит очень ограниченное использование. Этот формат не поддерживает атрибуты стилей, т.е. какие либо эффекты, блендинг, даже простейшие тени, блюр. Вы можете видеть начале видео, что происходит с тенями — они просто пропадают. Если у вас достаточно умелый график в команде, то в принципе это ограничение можно обойти переведя например тени в простые градиенты от полного цвета в абсолютно прозрачный итд. Если же у вас вовсе нет векторного оригинала или там слишком много эффектов — возможно игра не стоит свеч.

На этом минусы заканчиваются. Если ваше приложение должно запускаться лишь на устройствах которые ещё получают закладки безопасности (т.е. в момент написания статьи SDK версии 27+) или же использует какие то новшества современных Андроид систем/датчиков/устройств — векторная иконка отличный выбор. Вы можете сэкономить в несколько раз как на размере так и на файлах для иконки, имея лишь 1-2 файла изображения и пару файлов с их описанием! Звучит круто? Тогда ниже вы найдете рецепт того как это все приготовить.

Подготовка файлов

Я не буду вдаваться в подробности создания файлов иконки, так как они абсолютно идентичны остальным адаптивным иконкам. В интернете буквально тонны всевозможных шаблонов для адаптивных иконок и руководств для них. Можно использовать их все, с той лишь разницей, что в результате мы будем использовать файлы SVG а не PNG. Т.е. это будет один или два файла: первый с задним фоном, который должен иметь область для параллакс эффекта и файл переднего плана. В моем примере я использую вариант где задним фоном служит просто цвет, так что у меня будет один файл с описанием цвета и один файл с векторной графикой.

Итак если вы имеете файл(ы) SVG, то в следующем шаге нам понадобится Android Studio, впрочем если вы занимаетесь разработкой для ОС Андроид, вы и так знаете этот софт. Это бесплатное ПО можно скачать по адресу:

Важно! Векторные ассеты можно создавать лишь в версии 4.2.2 и выше.

Запустите студию, откройте свой проект, после загрузки выберете вкладку Project (первая вкладка слева сверху). В папке с ресурсами с помощью правого клика мыши выведите контекстное меню. В нем выберете первый элемент — New, затем Vector Asset. Откроется Asset Studio, в нем выберете тип: Локальный файл и путь через кнопку с папкой. Проверьте как иконка выглядит и нажмите кнопку Next. Тут вы увидите путь и название к вашему XML файлу с векторной иконкой. Повторите для второго файла если вы используете вектор как в переднем так и на заднем плане. Готово.

Настройка файлов конфигурации

И так изображения готовы, но ваш проект пока не знает пути к ним и как их отобразить. Вам нужно будет добавить/изменить несколько файлов:

• build.gradle — здесь необходимо включить поддержку векторных файлов, просто добавьте эти две строки в конфигурацию и зависимости:

• в папку с ресурсами добавьте папку “ mipmap-anydpi-v26”, т.е. как видно из названия это ассеты для любого DPI в версиях ОС выше 26. В нем будут два файла: ic_launcher_round.xml и ic_launcher.xml в которых необходимо описать что использовать как фон а что как передний план. В моем случае это цвет для фона и векторная графика для переднего плана.
• Ну и на конец то что мы описали в предыдущем пункте нужно добавить в папку drawable а также если вы использовали цвет в качестве фона — описать этот цвет в colors.xml.

Теперь система знает как, где и что, использовать в качестве иконки приложения в лаунчере. Запустите чистую инсталляцию и проверьте результаты своей работы. Как видите, техническая часть достаточно простая (если сравниватъ с PNG иконками).

В результате VCS должна показать вот такие изменения:

Как минимум две новые строки в файле:
./app/build.gradle

Новая папка “ mipmap-anydpi-v26” с двумя файлами:
./app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
./app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

Один XML файл с изображением переднего плана:
./app/src/main/res/drawable/ic_launcher_foreground.xml

И либо описание цвета в качестве фона:
./app/src/main/res/values/colors.xml
либо изображение:
./app/src/main/res/drawable/ic_launcher_background.xml (в данной конфигурации отсутствует).

В ссылке ниже вы найдете все необходимые файлы из примера показанного в видео. Можете использовать их как пример для своего приложения. Спасибо за внимание!

Источник

Как изменить логотип запуска приложения в Android Studio?

Мне было интересно, как изменить значок запуска в Android Studio. Я был бы очень благодарен за любой совет, который вы можете мне дать.

11 ответов:

посмотрите в приложении AndroidManifest.xml-файл для тег.

этот тег приложения

вот еще одно решение, которое я считаю более разумным для тех, кто работает на Android Studio:

1. разверните корневую папку проекта в представлении проекта
2. Щелкните Правой Кнопкой Мыши на app папку
3. на Контекстное Меню на New — > Image Asset
4. в появившемся всплывающем окне выберите новый логотип, который вы хотели бы иметь(изображение/клипарт/текст).

Это это! Теперь у вас есть новый логотип для вашего приложения.

вот мои шаги для выполнения задачи:

1. создать PNG файл изображения размером разрешением 512 х 512 пиксели
2. на Android Studio, в посмотреть проект,выделить a каталог mipmap
3. В меню перейти до File>New>Image Asset
4. кликИзображения на тип актива строки
5. клик on 3 Dot Box в праве Путь Box.
6. перетащить изображение source asset box
7. кликдалее (Примечание: существующие файлы лаунчер будет перезаписаны)
8. кликготово

чтобы быстро создать новый набор иконок и изменить значок запуска в Android Studio, вы можете:

использовать этот инструмент: https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html чтобы загрузить нужное изображение или значок (исходный файл). Этот инструмент автоматически создает набор иконок в различных разрешениях для ic_launcher.формат PNG.

скачать zip-файл, созданный инструментом, извлечь все (что создаст структуру папок для всех различных разрешений), а затем заменит все значки в папке res проекта: \app\src\main\res

перейти к AndroidManifest.xml и измените android: icon= «@mipmap / ic_launcher «на android:icon=» @mipmap/(ваше имя изображения)» предположим, у вас есть изображение с именем телугу, и вы хотите, чтобы оно было установлено в качестве значка вашего приложения, а затем измените android:icon=»@mipmap/telugu», и вам нужно скопировать и вставить изображение в папку mipmap, это так просто, как я сказал

в файле манифеста, под тегом, будет аналогичная строка:

поместите значок запуска, который вы хотите в папку drawable и оставить свой путь к ресурсу.

перейти к AndroidManifest.xml

в теге ищите android: значок тег.

скопируйте и вставьте значок в папку drawable (доступно в папке res вашего проекта).

установите значение android: значок тег

android: icon= «@drawable/youriconname»

вуаля! вы сделали. Сохраните изменения и проверьте.

перейти к манифесту и изменить

убедитесь, что значок логотипа присутствует в drawable.

мы можем заменить код в файле AndroidManifest в теге приложения

перейдите в папку проекта\app\src\main\res\mipmap-mdpi\ic_launcher.png

вы увидите 5 папок mipmap. Замените значок внутри каждой папки mipmap на нужный значок.

Я создал свои иконки с помощью этого инструмента:

после того, как я загрузил их (они уже были предварительно названы ic_launcher, очень полезно!) Я нашел

папка mipmap ic_launcher в папке res

и Я заменил предварительно иконки с теми, которые я создал. Переустановите приложение, и вы увидите новый значок!

Источник

Загрузка и отображение SVG-картинок в Android

О преимуществах использования SVG формата изображений написано, например, здесь. Но на данный момент в Android SDK нет стандартного функционала, чтобы можно было эти картинки динамически загрузить в приложение, имея просто путь к файлу на SD-карте или в памяти телефона. Но есть сторонние решения.

Встроенный механизм в Android Studio

В студии начиная с версии X можно загружать в проект SVG-картинки с помощью встроенного механизма в .xml ресурсы:

ПКМ на папке drawable => New => Vector Asset => Local SVG file.

android : src = «@drawable/btn_image»

AndroidSVG

В библиотеке AndroidSVG (исходники) есть возможность загрузки из assets, а также по Uri.

Также, с помощью библиотеки Glide (исходники) можно загружать картинки из удаленного репозитория по Uri из интернета.

Есть свой контрол SVGImageView:

Возможными значениями атрибута app:svg могут быть:

• a filename in your assets folder, as in the above example
• a resource reference such as @drawable/my_svg_file
• a resource URI such as android.resource://com.example.myapplication/raw/my_svg_file

svg-android

Библиотека svg-android (исходники) позволяет загрузить SVG из assets, InputStream (файла), ресурса, строки и вернуть его как Drawable или Picture.

Говорят, библиотека поддерживает только формат SVG basic 1.1, который не поддерживается Inkspace, а рождается только в Adobe Illustrator.

Подключение (создать папку app/libs и добавить туда svg-android.jar из репозитория):

implementation files ( ‘libs/svg-android.jar’ )

Пример загрузки из ресурса (должен быть загружен как Vector Asset) в Picture:

Источник

Using SVG Vector Drawables in Android

Icons are awesome. It conveys the message in a very simple and fast way. It is a good practice to have icons in your application because just by looking at the icons the user gets a rough idea about its purpose. More the pictorial representation, more efficiently you can convey your message.

You can use images also. But the main problem with images is the size. You need to have copies of the same image for different mobile sizes i.e. for mdpi, hdpi, xhdpi, xxhdi, and so on. This will increase your app size.

So, in order to avoid this situation, we can use vector drawables in our app. Vector Drawables are nothing but an XML file where we write the code for our icons and this is the reason why we don’t need to put different icons for different mobiles sizes while using vector drawables.

In order to add this functionality in a mobile application, Android Studio includes a tool called the Vector Asset Studio that is used to add some predefined material icons along with your own Scalable Vector Graphic (SVG) and Adobe Photoshop Document (PSD) as vector files in your android application. But this is not supported in Android 4.4 (API level 20) and lower.

So, in this blog, we will learn how to use SVG Vector Drawables in Android. So, let’s get started.

Adding Support Library

In order to use Vector Drawable in your application, you must add the below line to support vectorDrawables. Add the below code in your app-level build.gradle file:

Playing with Vector Asset Studio

To start Vector Asset Studio in your application, follow the below steps:

Step 1: In your android studio project, locate your res directory

Step 2: Then move to drawable folder.

Step 3: After that right-click on the drawable folder and then click on New > Vector Asset. Below screen will be shown:

In the window available to us, there are two options to include vector files in our app:

1. Select Asset type as Clip Art — to use Material icons in our project
2. Select Asset type as Local file(SVG, PSD) — to use your own SVG and PSD file stored in your local system

Apart from choosing Asset type, other options that are present in the Asset Studio window are:

• Name: Here you can type the name of the vector file and by this name, you will access the vector file in the project. The file name can contain lowercase characters, underscores, and digits only.
• Clip Art: You can select any of the vector assets from the available choices by clicking on the Clip Art.

Note: The Clip Art option is available only when your Asset Type is Clip Art, otherwise instead of Clip Art, an option for Path will be there.

• Path: This option is present when your Asset Type is Local File(SVG, PSD). Here you can choose the path to your SVG and PSD file.
• Size: This option tells you about the current size of your asset file. By default, it is 24dp * 24dp.
• Override: If you don’t want the default size of the asset file, then you can select this option to have your own dimensions for the file.
• Color: This option is only available when your Asset Type is Clip Art. Here you can select the color that you want to fill in the vector asset.
• Opacity: You can set the opacity of your Vector Asset by sliding the opacity bar.
• Enable auto mirroring for RTL layout: In general, the layout that we make are from Left to Right (LTR) but there are certain cases where you have to make an application using the Right to Left(RTL) layout. For example, in many countries, people write from Right to Left(RTL). So, in those situations, you have to mirror your image. In order to do so, you can check this option i.e. the “Enable auto mirroring for RTL layout” option.

So, these were the options that were available in the Asset Studio. Now, let’s use the Asset Type feature to import the material icon and our local SVG and PSD icon.

Using Material Icon

There are a number of predefined material icons present in the Asset Studio. You can use them in your application. To do so, just click on the Clip Art option and select the icon that you want to use.

After selecting the icon, click on Ok > Next > Finish.

Now your icon will be added to your res/drawable folder.

Using SVG/PSD Icon

If you want to use some icons that are not present in the list of predefined icons, then you can add your own icon by selecting the Asset Type as Local File(SVG, PSD) and then select the path of your file by clicking on Path.

After that click on Next > Finish.

Now your icon will be added to your res/drawable folder.

Using Vector Drawable in your project

After adding the Vector Drawable in your project, you can use the Vector Drawable in any of the icon-related widgets such as ImageView or ImageButton.

For example, you can add a layout of your choice and add an ImageView like this:

Here, ic_tick is the name of the file of Vector Asset present in the res/drawable folder. This is as simple as adding an image file in the ImageView.

The best part about Vector Asset is that you can change it’s color in the XML also, by adding the below line:

This will change the color to the primary color.

If you want to refer to some vector drawable in your code i.e. in you Kotlin code, then you can do this in the same manner as used to access the files present in the res/drawable folder:

Editing XML code of Vector Asset

Whenever you add some Vector Asset in your project then a corresponding XML file is created in the res/drawable folder and this file contains all the properties of the asset file that you have created i.e. all the XML code for your vector image will be present in this file and you can modify this file according to your need.

Following is an example of XML code of Vector Asset created by Asset Studio:

You can change the width, height, viewportWidth, viewportHeight, fillColor, etc in the XML file. In-fact, for Android 5.0 and higher, Vector Asset Studio supports all the elements of the Drawable and VectorDrawable. So, you can use all those elements in your XML file that was generated by the Asset Studio.

Conclusion

In this blog, we learned how to use the same image or icon with different sizes of devices without losing the quality of the image. We can do so by using the SVG Vector Drawable in our project. We saw how to add the Vector Assets in our application. In the last, we saw how to change the properties of Vector Asset by altering the XML file generated by the Vector Asset Studio. That’s it for this blog.

Источник