Android UI: Vector illustration using

introduction of vector diagram
Recently, I learned about the concept of vector graph (vectordrawable) when I was "slimming" in the Android App.
Starting with Android5.0 (API level 21), there are two classes that support vector diagrams: vectordrawable and Animatedvectordrawable. Vectordrawable is a vector graph that defines points, lines, and curves in an XML file, and a collection of information about their associated colors. Animatedvectordrawable is a vector graphics animation that uses multiple XML files instead of multiple images for different resolutions for animation.
There are two main advantages of using vector diagram:
Image extensibility: It can be scaled without losing the quality of the image, which means that using the same file to resize different screen densities does not lose the quality of the image;
Small picture size: compared to the same size and content picture, vector images are smaller than PNG images, which allows for smaller apk files and less maintenance work;
However, it takes more time for the system to render vectordrawable. Because the initialization load of a vector graph consumes more CPU cycles than the corresponding raster picture, the memory consumption and performance are close to each other. Therefore, we can only consider the use of vector graphics when displaying small images (it is recommended that you limit vectors in 200*200DP), the larger the picture on the screen will consume longer to draw;

Second, vectordrawable
1.VectorDrawable Introduction
Vectordrawable defines a static drawable object. Very similar to the SVG format, each vector graphic is defined as a tree structure that consists of path and group objects. Each path contains the geometry of the object's outline, and each group contains detailed information about the changes. All paths are drawn in the same order as they appear in XML;

2.VectorDrawable XML file Generation
Android Studio includes a tool called Vector Asset Studio, which provides an easy way to add vector images to your project as an XML file. The following two ways are supported:
Add Meterial Icon;
Import extensible Vector Graph (SVG) and Adobe Photoshop Document (PSD) files;
start vector Asset Studio
Android studio-> Project window->android view, select Res directory->new->vector Asset (Android Plugin for Gradle 1.5.0 or higher);

use meter ial Icon
google meterial The design specification provides the meterial icons that you can use in your Android app. Vector Asset Studio helps you select, import and set meterial icon size, define transparency and right-to-left (RTL) mirroring settings;

select meterial icon-> Click the icon button->select Icon dialog box (right), select Import Picture- >ok, change the resource name, size, transparency and right-to-left image settings according to your needs, click the Next button:

Change the module and resource directory according to your needs, click the Finish button:

in App/src/main /res/drawable directory, Vector Asset Studio adds an XML file ic_assignment_ind_black_24dp.xml that defines an appropriate amount of images;

Using local files (SVG,PSD)
Vector Asset Studio can also let you import your own SVG and PSD files. SVG is an open source XML-based standard, and the PSD file format supports Adobe Photoshop. It supports basic standards, but does not support all SVG and PSD features. When you select an SVG or PSD file, it immediately gives feedback on whether to support graphics encoding. Although the vector graph supports one or more colors, the black icon (android:fillcolor= "#FF000000") is used in many scenarios. Using this method, you can add a tint to the vector image you fill in the layout, and then the color of the icon becomes tint. If the color of the icon is not black, the color of the icon may be mixed with the tint color;
Select Local file (SVG,PSD), click the Path More button, select the picture you want to import, click OK, and modify the resource name as you want , size, and transparency properties, click the Next button (if SVG or PSD file has unsupported features, the error message will be displayed at the bottom of vector Asset Studio errors);

, Click the Finish button to change the module and directory of the resource output according to your needs;

3.VectorDrawable use
Here we will simply use a demo demo, showing two pictures and an animation, the directory is as follows:

Building a compatibility configuration
Prior to Android 5.0 (API level), the support Library 23.2 or higher version provides full supports for vector images and vector image animations. Android5.0 the previous version does not support the vector diagram, if you support the minimum API level is these versions, you have the following two options:
Generate PNG files;
Use the support library;
In order to run Android5.0 (API level 21) before the version of the device does not support vector picture and vector picture animation, Vectordrawablecompat and Animatedvectordrawablecompat through two new supports Libraries:support-vector-drawable and animated-vector-drawable respectively to support;
Add vectordrawables elements to your app module's Build.gradle file to enable your app to use vector support library;
Flight/build.gradle file

Apply plugin: ' Com.android.library ' android {    ...    Defaultconfig {        ...        Vectordrawables.usesupportlibrary = True    }    ...} dependencies {    ...    Compile ' com.android.support:appcompat-v7:25.0.1 '}

After the package is complete, we analyze the XML file of the APK package vector image;

We can also use the low version to build a compatible way to generate PNG images;
flight/build.gradle File

Apply plugin: ' Com.android.library ' android {    ...    aaptoptions {        additionalparameters "--no-version-vectors"    }    ...}

After the package is complete, we analyze the following apk found XML file corresponding to the corresponding PNG image generated;

vectordrawable Definition
A vector picture can be created with just one resource file (such as on using Vector Asset Studio), and a bitmap picture needs to provide a file for each screen density. If you want to create a vector picture, define the following in the <vector>xml element:
flight/src/main/res/drawable/heart.xml File

<vector xmlns:android= "http://schemas.android.com/apk/res/android"    android:width= "100DP"    android: height= "100DP"    android:viewportheight= "android:viewportwidth="    >    <path        android: Fillcolor= "#8000"        android:pathdata= "m20.5,9.5c-1.955,0,-3.83,1.268,-4.5,3c-0.67,-1.732,-2.547,-3,-4.5,- 3c8.957,9.5,7,11.432,7,14                        C0,3.53,3.793,6.257,9,11.5c5.207,-5.242,9,-7.97,9,-11.5c25, 11.432,23.043,9.5,20.5,9.5z "/></vector>

flight/src/main/res/drawable/battery.xml File

<vector Xmlns:android= "Http://schemas.android.com/apk/res/android" android:width= "100DP" android:height= "100DP" android:v iewportheight= "24.0" android:viewportwidth= "24.0" > <group android:name= "Rotationgroup" android:p ivotx= "10.0" android:pivoty= "10.0" android:rotation= "15.0" > <path android:name= "vect "Android:fillalpha=". 3 "android:fillcolor=" #FF000000 "Android:pathdata=" m15.67,4h14v2h-4 v2h8.33c7.6,4 7,4.6 7,5.33v9h4.93l13,7v2h4v5.33c17,4.6 16.4,4 15.67,4z "/> <path android:name=" dra W "android:fillcolor=" #FF000000 "Android:pathdata=" m13,12.5h2l11,20v-5.5h9l11.93,9h7v11.67c7,21.4 7. 6,22 8.33,22h7.33c0.74,0 1.34,-0.6 1.34,-1.33v9h-4v3.5z "/> </group></vector> 

Vectordrawable references
Flight/src/main/res/layout/activity_flight.xml

<?xml version= "1.0" encoding= "Utf-8"? ><linearlayout xmlns:android= "http://schemas.android.com/apk/res/ Android "    xmlns:app=" Http://schemas.android.com/apk/res-auto    xmlns:tools= "http://schemas.android.com/ Tools "...     tools:context= "Com.qunar.flight.FlightActivity" >    <textview        android:layout_width= "Wrap_content"        android:layout_height= "wrap_content"        android:text= "Flight"/>    <imageview        android:layout _width= "Wrap_content"        android:layout_height= "wrap_content"        app:srccompat= "@drawable/heart"/>    <imageview        android:layout_width= "wrap_content"        android:layout_height= "Wrap_content        " app:srccompat= "@drawable/battery"/></linearlayout>

Note: If you do not use support library compatibility, using the generated PNG image, then do not add namespaces, the ANDROID:SRC attribute can be used;
Run Results


Iii. Practice of animatedvectordrawable
1.AnimatedVectorDrawable Introduction
Animatedvectordrawable add animated properties to the vector graph. You can define vector graphics animations in three files or a drawable XML file. For a better understanding, let's look at both of these ways: multiple XML files and a single XML file;
2. Multiple XML files
Using this method, you need to define three separate XML files:
a vectordrawable XML file;
A animatedvectordrawable XML file defines the target vectordrawable, which is used for the target path and group, and attributes and animations are defined as Objectanimator objects or Animatorset objects;
An animated XML file;
animatedvectordrawable Multi-XML file Definition
First we want to move which vector picture (vd.xml), the picture to run what kind of animation (Rotation.xml and Path_morph.xml), the vector graphics and animation (avd.xml);
Flight/src/main/drawable/vd.xml

<vector xmlns:android= "http://schemas.android.com/apk/res/android"    android:height= "64DP"    android: Width= "64DP"    android:viewportheight= "android:viewportwidth="    >    <group        android: Name= "Rotationgroup"        android:pivotx= "300.0"        android:pivoty= "300.0"        android:rotation= "45.0" >        <path            android:name= "Vectorpath"            android:fillcolor= "#000000"            android:pathdata= "m300,70 l 0,-70 70,70 0,0-70,70z "/>    </group></vector>

Flight/src/main/res/anim/rotation.xml

<set xmlns:android= "Http://schemas.android.com/apk/res/android" >    <objectanimator        android: duration= "6000"        android:propertyname= "rotation"        android:valuefrom= "0"        android:valueto= "/>" </set>

Flight/src/main/res/anim/path_morph.xml

<set xmlns:android= "Http://schemas.android.com/apk/res/android" >    <objectanimator        android: duration= "Android:propertyname="        pathdata "        android:valuefrom=" m300,70 l 0,-70 70,70 0,0 -70,70z   "        android:valueto= "m300,70 l 0,-70 70,0  0,140-70,0 z"        android:valuetype= "PathType"/></set>

Flight/src/main/drawable/avd.xml

<animated-vector xmlns:android= "http://schemas.android.com/apk/res/android"    android:drawable= "@drawable/ VD ">    <target        android:name=" Rotationgroup "        android:animation=" @anim/rotation "/>    < Target        android:name= "Vectorpath"        android:animation= "@anim/path_morph"/></animated-vector>

animatedvectordrawable References
Next, we can apply the right amount of image animation in the view, run the animation;
Flight/src/main/layout/activity_flight.xml

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android"    xmlns:tools= "http// Schemas.android.com/tools "    ...     tools:context= "Com.qunar.flight.FlightActivity" >    <textview        android:layout_width= "Wrap_content"        android:layout_height= "wrap_content"        android:text= "Flight"/>    ...     <imageview        android:id= "@+id/imageview1"        android:layout_width= "wrap_content"        android:layout_ height= "Wrap_content"        android:src= "@drawable/avd"/></linearlayout>

Flight/src/main/java/com/qunar/flight/flightactivity.java

public class Flightactivity extends Appcompatactivity {    @Override    protected void OnCreate (Bundle Savedinstancestate) {        super.oncreate (savedinstancestate);        Setcontentview (r.layout.activity_flight);        ImageView ImageView = (ImageView) Findviewbyid (r.id.imageview1);        drawable drawable = imageview.getdrawable ();        if (drawable instanceof animatable) {            ((animatable) drawable). Start ();}}    

Run effect

3. Single XML file
In this way, you can merge the associated XML file into an XML file that uses the XML bundle format. When building the app, AAPT tag creates separate resources and references them in vector animations. This approach requires build Tools 24 or higher, and the output is backwards compatible;
animatedvectordrawable Single File definition
Flight/src/main/drawable/single_avd.xml

<animated-vector xmlns:android= "Http://schemas.android.com/apk/res/android" > <aapt:attr name= "android: Drawable "> <vector android:height=" 64DP "android:width=" 64DP "Android:vi ewportheight= "Android:viewportwidth=" > <group android:name= "Rotati Ongroup "android:pivotx=" 300.0 "android:pivoty=" 300.0 "android:rotation=" 4                     5.0 "> <path android:name=" V "android:fillcolor=" #000000 " Android:pathdata= "m300,70 l 0,-70 70,70 0,0-70,70z"/> </group> </vecto r> </aapt:attr> <target android:name= "Rotationgroup" > * <aapt:attr name= "Android:animati             On "> <objectanimator android:duration=" 6000 "android:propertyname=" Rotation " android:valuefrom= "0"             Android:valueto= "/> </aapt:attr> </target> <target android:name=" V "&G         T                     <aapt:attr name= "Android:animation" > <set> <objectanimator  android:duration= "Android:propertyname=" Pathdata "android:valuefrom=" m300,70                     L 0,-70 70,70 0,0-70,70z "android:valueto=" m300,70 l 0,-70 70,0 0,140-70,0 z " Android:valuetype= "PathType"/> </set> </aapt:attr> </target> </animated-v Ector>

Note: In order to optimize redraw performance, each Vectordrawable object creates a bitmap cache. Therefore, referencing the same vectordrawable means sharing the same btimap cache. If these reference sizes are inconsistent, the bitmap will be rebuilt and redrawn at each change in size. In other words, if the vectordrawable uses a different size, creating vectordrawable for each size will be more efficient;

Iv. code Base

Qproject:https://github.com/pengchengxiang/qproject Branch: ui/vectordrawable

Android UI: Vector illustration using