Add vector drawable android

Использование класса VectorDrawable на Android

Введение

Хотя Android напрямую не поддерживает SVG (Scalable Vector Graphics), Lollipop представила новый класс VectorDrawable , который позволяет дизайнерам и разработчикам одинаково рисовать ассеты, используя только код.

В этой статье вы узнаете, как создать VectorDrawable с файлами XML и оживить их в ваших проектах. Это поддерживается только для устройств под управлением Android 5.0 или выше, и в настоящее время нет реализаций библиотек поддержки. Исходные файлы этого урока можно найти на GitHub.

1. Создание векторного чертежа

Основное сходство между VectorDrawable и стандартным SVG-изображением состоит в том, что оба они рисуются с использованием значения path. Хотя понимание путей SVG выходит за рамки этой статьи, официальную документацию можно найти на веб-сайте W3C. Для этого урока вам просто нужно знать, что тег пути — это то место, где происходит рисование. Давайте посмотрим на файл SVG, который отображает следующее изображение:

Для этого изображения есть пять основных частей:

• квадрат для тела процессора, состоящий из двух арок
• четыре группы из пяти строк, которые представляют провода ЦП

Следующий код рисует это изображение как SVG:

Хотя это может показаться немного сложным, вам фактически не нужно полностью понимать, как все делается для реализации VectorDrawable в вашем коде. Однако следует отметить, что для лучшей читабельности в коде я разделил каждый из пяти разделов на свой собственный уникальный блок.

Верхняя часть состоит из двух дуг, чтобы отрисовать закругленный квадрат, а последующие секции представляют собой нижние, верхние, правые и левые наборы линий соответственно. Чтобы превратить этот SVG-код в VectorDrawable , вам сначала нужно определить объект vector в XML. Следующий код берется из файла vector_drawable_cpu.xml в примере кода для этого урока.

Затем вы можете добавить данные пути. Следующий код разбивается на пять разных тегов пути, вместо одного большого.

Как вы можете видеть, каждый раздел пути просто использует атрибут pathData для рисования. Теперь вы можете включить вектор VectorDrawable XML в качестве чертежа в стандартном ImageView , и он будет масштабироваться до любого размера, необходимого вашему приложению, без необходимости использовать какой-либо Java-код.

2. Анимация векторных чертежей

Теперь, когда вы знаете, как создавать изображения, используя только код, пришло время немного повеселиться и оживить их. В следующей анимации вы заметите, что каждая из групп проводов пульсирует в направлении к CPU.

Чтобы добиться этого эффекта, вам нужно будет обернуть каждый раздел, который вы хотите оживить в тег . Обновленная версия vector_drawable_cpu.xml выглядит следующим образом:

Затем вам нужно создать animators для каждого типа анимации. В этом случае для каждой группы проводов есть по одному для четырех. Ниже приведен пример анимации верхней группы, и вам также понадобится один для нижнего, левого и правого. Каждый из XML-файлов аниматора можно найти в примере кода.

Как вы можете видеть, propertyName устанавливается в translateY , что означает, что анимация будет двигаться вдоль оси Y. valueFrom и valueTo управляют начальным и конечным местоположением. Установив repeatMode в reverse и repeatCount в infinite , анимация будет циклически навеки, пока будет видна VectorDrawable . duration анимации устанавливается равной 250 , т.е. времени в миллисекундах.

Чтобы применить анимации к вашему файлу, вам нужно будет создать новый XML-файл с animated-vector , чтобы связать аниматоры с группами VectorDrawable . Следующий код используется для создания файла animated_cpu.xml.

Когда все ваши XML готовы к работе, вы можете использовать animated_cpu.xml, который можно извлечь в ImageView , чтобы отобразить его.

Чтобы начать анимацию, вам нужно будет получить экземпляр Animatable из ImageView и вызвать start .

После вызова start , провода на изображении ЦП начнут двигаться с минимум Java-кода.

3. Преобразование векторных чертежей

Обычный вариант использования VectorDrawable преобразует одно изображение в другое, например значок панели действий, который изменяется от значка гамбургера в стрелку. Для этого как исходный, так и целевой маршруты должны соответствовать идентичному формату для количества элементов. В этом примере мы определяем левую и правую стрелки, показанные выше, как строки.

Затем вам нужно будет создать начальный чертеж для стрелки, используя путь для left_arrow. В примере кода он называется vector_drawable_left_arrow.xml.

Основное различие между анимацией процессора и преобразованием заключается в файле animator_left_right_arrow.xml.

Вы заметите, что свойства valueFrom и valueTo ссылаются на данные о пути для стрелок влево и вправо, для параметра valueType установлено значение pathType , а для свойства propertyName установлено значение pathData . Когда они установлены, аниматор будет знать, чтобы изменить один набор данных пути на другой. Когда аниматор закончен, вам необходимо связать VectorDrawable с objectAnimator , используя новый объект animated-vector .

Наконец, вам просто нужно связать анимацию с помощью ImageView и запустить анимацию в вашем Java-коде.

Заключение

Как вы видели, класс VectorDrawable довольно прост в использовании и позволяет много всего настраивать для добавления простых анимаций. Хотя класс VectorDrawable в настоящее время доступен только для устройств под управлением Android 5.0 и выше, но это не страшно, поскольку всё больше устройств поддерживает Lollipop и будущие версии Android.

Источник

VectorDrawable — часть первая

Предлагаю вашему вниманию перевод статьи «VectorDrawables – Part 1» с сайта blog.stylingandroid.com.

По долгу службы потребовалось мне как-то разобраться с векторной графикой. Во время поиска наткнулся я на серию статей под названием “VectorDrawable” в блоге https://blog.stylingandroid.com/. Ответов на все интересующие меня вопросы я, конечно, не нашел, но статьи очень понравились своей последовательностью и четко выверенным объемом необходимого материала. Решил поделиться переводом этих статей с обитателями хабра.

Я не переводил названия, activity, bitmap и тому подобное, потому что считаю, что так легче воспринимать информацию, ведь разработчики, в силу профессии, эти слова в русском варианте практически никогда не у потребляют. Далее следует перевод:

Одна из действительно интересных новых фишек в Lollipop – это включение VectorDrawable и связанных с ним классов, которые обеспечивают чрезвычайно мощные новые возможности для добавления сложной векторной графики (позволяет гораздо удобнее масштабировать изображения не зависимо от размеров экрана и плотности, чем растровые изображения), а также предоставляет несколько мощных инструментов для анимации оных. В этой серии статей мы рассмотрим некоторые из преимуществ, которые они нам дают. Так же рассмотрим, как можно получить действительно впечатляющие результаты из относительно небольшого количества кода.

Векторная графика – способ описания графических элементов используя геометрические фигуры. Они особенно хорошо подходят для графических элементов, созданных в приложениях, таких как Adobe Illustrator или Inkscape, где простые геометрические формы могут быть объединены в гораздо более сложные элементы. Работа с растровой графикой, с другой стороны, определяет значение цвета для каждого пикселя и особенно хорошо подходит для фото. Большим преимуществом использования векторной графики (в соответствующих случаях) является то, что изображения рендерятся в рантайме и размеры автоматически высчитываются в зависимости от плотности пикселей. Таким образом получается четкая картинка с плавными линиями, независимо от возможностей устройства. Векторные картинки, как правило, занимают значительно меньший объем памяти, чем их растровый аналог. Однако, векторные изображения требуют больше вычислительных мощностей для отрисовки, что может быть проблемой при большом количестве сложных графических элементах.

Векторная графика в андроиде была реализована с использованием нового класса – VectorDrawable, который был введен в Lollipop. Это означает, что для графических элементов, которые хорошо подходят для векторного представления мы можем заменить растровые изображения в папках mdpi, hdpi, xhdpi, xxhdpi, и xxxhdpi на один VectorDrawable в папке Drawable, который, с большой вероятностью, займет даже меньше пространства на диске, чем растровое изображение для mdpi.

Чтобы продемонстрировать это, давайте рассмотрим следующий файл svg (найти его можно по ссылке https://code.google.com/archive/p/svg-android/downloads):

Этот svg-файл занимает 2265 байт, если мы отрисуем его в bitmap с размерами 500 х 500 пикселей, и сохраним как png, тогда он займет уже 13272 байта, плюс к этому, мы должны будем использовать несколько таких картинок для разный плотностей экрана. Но SVG – это не то же самое, что VectorDrawable, поэтому мы не можем использовать его непосредственно. Тем не менее, VectorDrawable поддерживает некоторые элементы SVG. Основные компоненты, которые мы будем использовать из нашего SVG – это path. Давайте посмотрим на исходный код SVG:

Немного разберемся. Есть некоторые атрибуты родительского элемента , которые определяют размер 500х500, Есть элемент (group), который определяет границы – его мы будем игнорировать. Есть еще один элемент с Это и есть изображение логотипа, которое нам нужно. Он состоит из шести элементов , которые определяют голову, правый глаз, левый глаз, левая рука, тело и ноги, правая рука. Атрибут “fill” определяет цвет заливки (и мы можем видеть, что все они зеленые, за исключением глаз, которые залиты белым цветом), а атрибут “d” содержит маршрут линий, из которых состоит элемент. Для тех, кто хочет разобраться более детально в элементе , следует изучить SVG Path Specification, но для данной статьи это не важно, потому что мы можем просто взять их, как они есть, и использовать в наших VectorDrawables.

Итак, давайте создадим наш VectorDrawable:

Мы создали родительский элемент , который содержит информацию о размерах изображения, внутрь которого поместили элемент с шестью элементами , которые были немного модифицированы, по сравнению с svg – файлом. В данной статье поле “name” служит только для облегчения понимая того, где какой элемент. В следующих статьях они буду использоваться. Получившийся файл по-прежнему может похвастаться скромным размером в 2412 байт.

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

… и если мы запустим это, то увидим красивую отрисовку:

Так что теперь мы можем существенно уменьшить размер APK, если мы используем VectorDrawable, где это уместно. Так же это позволяет упростить разработку приложения, особенно, если нужно добавлять поддержку новых плотностей экрана. Тем не менее, это не все, на что способен VectorDrawable. В следующей части статьи мы рассмотрим, как его анимировать.

Исходники к этой части статьи можно найти здесь.

Источник

Android working with SVG / vector drawables

While developing Android Applications, supporting multiple resolutions are sometime nightmare to developers. Including multiple images for different resolutions also increases the project size. The solution is to use Vector Graphics such as SVG images. While Android does not support SVGs (Scalable Vector Graphics) directly, with the launch of Lollipop a new class was introduced called VectorDrawable, which allows designers and developers to draw assets in a similar fashion using only code.

Simply explained, vector graphics are a way of describing graphical elements using geometric shapes. They are particularly well suited to graphical elements created in packages such as Adobe Illustrator or Inkscape where simple geometric shapes may be combined in to much more complex elements.

1. What is VectorDrawable?

As the name implies, vector drawables are based on vector graphics, as opposed to raster graphics, vector graphics are a way of describing graphical elements using geometric shapes. It is similar to a SVG file. In Android Vector Drawable are created as XML files. Now there is no need to create different size image for mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi etc. We need only one vector file for multiple screen size devices. Also for older versions of Android that don’t support vector drawables, Vector Asset Studio can turn your vector drawables into different bitmap sizes for each screen density at runtime.

Here is the detailed information Vector Asset Studio.

Note: For this project I’m using gradle version 2.2, my suggession is to use 2.0+. However if you’re using gradle version below 2.0 then you’ll need to add some more code to the app level build.gradle file which I’ve mentioned below.

2. Creating Android Project

1. Create a new project in Android Studio from File ⇒ New Project and fill the project details.

2. Open build.gradle in app module, add the below line inside defaultConfig block.

So the complete build.gradle looks like

If you are using gradle version below 2.0 then use following

2.1 Creating VectorDrawable from Material Icons.

So let us start by creating VectorDrawables from Material Icons (Material Icons are the official icon set from Google that are designed under the material design guidelines, these icons are open source and are beautifully crafted, delightful, and easy to use in your web, Android, and iOS projects).

3. In the project Right click on the drawable directory

4. Go to New ⇒ Vector Asset

5. Click on the launcher icon to browse Material Icons

6. Select an icon and click on ok

7. Review the name of the file then click on next.

8. Now Vector Asset Studio will show the location about where the file is being saved, review it and click on finish.

9. The drawable folder will now consist of a newly created file (In my case ic_flight_takeoff)

below is the file code –

You can modify the width and height of the vector as per your requirement (by default it stays as 24dp), a vector may consist of one or more paths. A path may have many attributes among which fillColor and pathData are the most important. fillColor attribute defines the color of the path, it must be a color attribute (hash code in #aarrggbb, or may also point to a color resource). pathData defines the path shape. In this case I’ve modified the vector width, height and path fillColor.

2.2 Creating VectorDrawable from SVG or PSD

Now we have created vectorDrawable from Material Icon, what if we want a separate icon? We can create it from SVG or PSD, below are the procedure, but it also has some restrictions you can check out here – https://developer.android.com/studio/write/vector-asset-studio.html#PSD (though the restriction listed here for PSD, it applies to SVG also).

10. In the project Right click on the drawable directory

11. Go to New ⇒ Vector Asset

12. Click on the radio button saying “Local File (SVG, PSD)”

13. Click on the browse icon and navigate to your SVG or PSD file to select it

14. After selecting click ok

15. Verify the image in preview and click Next ⇒ Finish.

below is the file code generated from svg

3. Using VectorDrawable

We have successfully added VectorDrawables to the project, now it’s time to use them.

16. Open the layout file of main activity (activity_main.xml) and add the below xml. This layout contains shows how to use VectorDrawable with ImageView and other Views (as background) which is explained later in this tutorial.

The above layout generates a screen something like this.

3.1 Using VectorDrawable with ImageView from xml

So let us start with a simple ImageView, and even simpler by assigning the VectorDrawable to the ImageView through xml layout.

As you can see, we used app:srcCompat instead of android:src, so that the support library can do the rest to display the image seamlessly on all versions of android. (The support library converts VectorDrawables to raster graphics automatically on android versions below 5.0 – API 21, details are here). So it was that easy.

3.2 Using VectorDrawable with ImageView from Java

Now Let us do the same thing with Java code, i.e. assigning VectorDrawable to ImageView through Java Code.

17. Add another Vector Drawable (name it ic_android.xml) with the steps mention in section 2.1 or 2.2, you can also create a file with that name and paste the below code.

18. Open MainActivity.java and paste the below code.

Now, let me explain the code line by line.

19. For using VectorDrawable from java or to use it as background (in xml also) you need to intimate AppCompatDelegate to enable compat vector from resource. Below is the code for that.

20. Whenever you are going to use VectorDrawable from java or to use it as background (in xml also) remember to use AppCompatView instead of normal view, here I have used AppCompatImageView, please also refer to the layout we created before.

21. Now assign the VectorDrawable as src or background as you do it normally, AppCompat will take care of the rest.

22. We have added some flavors to it, We implemented OnClickListener on the ImageView to set random color filter on it, upon click.

3.3 Using VectorDrawable as Drawable with TextView

You may want to use VectorDrawable as background or as compound drawable with TextView, so below is an example.

As you can see from above code we have used a VectorDrawable in the drawableLeft attribute of android.support.v7.widget.AppCompatTextView, we can also do it from the java code using AppCompatTextView#setCompoundDrawables .

3.4 Using VectorDrawable to Customise RadioButton

So far the use was straightforward, what if you want to customise a RadioButton or CheckBox while using VectorDrawable? Now lets see that. If you go through the layout we created, once again then you can find that a RadioGroup which contains a series of AppCompatRadioButton, all the AppCompatRadioButtons there uses @drawable/radio_selector as background, below is the code for that.

As you can see this is a selector drawable as usual, the only difference is that it refers to VectorDrawables (vector image resources) instead of raster image resources. The remaining is taken care by android.support.v7.widget.AppCompatRadioButton itself as mentioned earlier (remember to use AppCompatDelegate.setCompatVectorFromResourcesEnabled(true) for that also, even if you don’t consider backward compatibility).

The final output looks something like this.

I hope this article gave you a very good overview about Using Vector Drawables in Android. Feel free to ask any queries / doubts in comments section below.

Rivu Chakraborty is a Sr. Tech. Member of Institution of Engineers(India), Diploma holder Engineer in Computer Science. He is presently at MaxMobility Pvt. Ltd. as a Sr. Software Engineer (Android)

Источник