Android vectordrawable with SVG

Vectordrawable

Android L is starting to provide a new API VectorDrawable that can use SVG types of resources, also known as vector graphs. The tags in the XML file are <vector> , below is an example

<!--res/drawable/heart.xml --<vector xmlns:android="Http://schemas.android.com/apk/res/android" <! -- intrinsic size  of  the drawable -->android:height= "256DP" android:width= "256DP"<!--size of the virtual canvas ---Android:viewportwidth= "android:viewportheight=" ><!--draw a path ---  <path android:fillcolor= "#8fff"android:pathdata="m20.5,9.5 c-1.955,0,-3.83,1.268,-4.5,3 c-0.67,-1.732,-2.547,-3,-4.5,-3 c8.957,9                        .5,7,11.432,7,14 c0,3.53,3.793,6.257,9,11.5 c5.207,-5.242,9,-7.97,9,-11.5 c25,11.432,23.043,9.5,20.5,9.5z " />      </vector>

This defines a static vector diagram, which can be used as a general image resource and set to a heart shape in the ImageView. Control display Heart is the above path label, a representative of path an element, the content is drawn pathData under a long string of characters, which is a series of SVG drawing commands, providing MoveTo, LineTo, close and other operations, can and graphics In the path operation, you can view the SVG path Ref, which is briefly explained later.
VectorDrawableDefines a static diagram, and a class AnimatedVectorDrawable that lets you animate a vector image. Typically three steps are required:

• Define Vectordrawable

<vector  xmlns:android      = "http://schemas.android.com/apk/res/android"  android:height  = "64DP"  android:width  =" 64DP "  Android:viewportheight  = "all"  android: Viewportwidth  =;      <groupandroid:name="Rotationgroup"android:pivotx="300.0" Android:pivoty="300.0"android:rotation="45.0" >                                             <pathandroid:name="V"android:fillcolor="#000000"  android:pathdata="m300,70 l 0,-70 70,70 0,0-70,70z" />                                            </Group> </vector>

• Define the animatedvectordrawable to animate the elements of the vector diagram above

<animated-vector xmlns:android="Http://schemas.android.com/apk/res/android" android:drawable="@drawable/vectordrawable" >        <targetandroid:name="Rotationgroup"android:animation=" @anim/rotation " />                       <targetandroid:name="V"android:animation="@anim/path_morph" />                   </animated-vector>

• Defining animation files

<animated-vector xmlns:android="Http://schemas.android.com/apk/res/android"  android:drawable="@drawable/vectordrawable" >        <targetandroid:name="Rotationgroup"android:animation="@anim/ Rotation " />                       <targetandroid:name="V"android:animation="@anim/path_morph" />                   </animated-vector>

<set  xmlns:android  =" http://schemas.android.com/apk/res/android " ;  <objectanimator  android:duration  ="  class= Hljs-attribute :p ropertyname  = "Pathdata"  android:valuefrom< /span>= "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" />  </< Span class= "Hljs-title" >set ;  

Due to the characteristics of the vector diagram, AnimatedVectorDawable you can achieve some very special effects, vectordrawable in the Pathdata animation, you can change from one shape to another graph, such as Material Design toolbar icon , the Trimpathstart, trimpathend do animation, you can get the plot trajectory.

SVG Path Data

There are some main commands

• M:move to move a drawing point
• L:line to Straight
• Z:close closure
• C:cubic Bezier three times Bezier curve
• Q:quatratic Bezier two times Bezier curve
• A:ellipse Arc

Each command is case-uppercase, which indicates that the following argument is an absolute coordinate, and lowercase is the relative coordinate. Separate parameters with spaces or commas

Detailed command:

• M (x y) moves to X, y
• L (x y) straight line to X, y, and simplified command h (x) Horizontal connection, V (y) Vertical connection
• Z, no parameters, connection start and end
• C (x1 y1 x2 y2 x y), Control point X1,y1 x2,y2, end point x, y
• Q (x1 y1 x y), Control point X1,y1, endpoint X, y
• A (Rx ry x-axis-rotation large-arc-flag sweep-flag x y)
  Rx Ry Oval Radius
  x-axis-rotation x Axis Rotation angle
  Large-arc-flag is 0 to take a small radian, 1 o'clock to take a large arc
  Sweep-flag 0 Take counterclockwise direction, 1 take clockwise direction
  There is an illustration:
  

Application

On GitHub, you see an example of a vectordrawable application that implements a dynamic effect of searchbar, which is animating the Vectordrawable Trimpathstart property. The original design is here, following the implementation:

Reference

• Https://developer.android.com/training/material/drawables.html
• Https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html
• Https://developer.android.com/reference/android/graphics/drawable/AnimatedVectorDrawable.html
• Http://www.w3.org/TR/SVG11/paths.html#PathData

Android vectordrawable with SVG