Vectordrawable class free fill color _android of Android vector graphs

The June 26, 2014 I/O 2014 developers Conference Google officially launched the Android L, which brings a new design language material designs, the new API also provides this class vectordrawable. That is, Android supports SVG-type resources, which is vector graphics. Think of Vector map, natural will think of bitmap, what is vector map, what is a bitmap? Let's say the bitmap, we often use the png,jpg is a bitmap, he is a unit of a unit of pixels composed of. When the small icon encountered a large screen mobile phone, if the icon is stretched that is the mosaic of the same. This is not what we want. and the vector map is officially the opposite of it. The vector graph is composed of dots, lines, rectangles, circles, arcs, etc., it does not distort, and reduces the storage space of the file. Learned, some simple icon, our own to draw, and more beautiful, in line with material design, why not.

Concept

Say so much, or to see how the official website describes:

In the XML Definition <vector> label draw your own vector graph.

That's the simple word.

Usage

<vector> contains a lot of elements to help us draw our own vector graphs, and below we'll write two examples to use them. Here directly to take the official website example to learn.

1. Draw a triangle, as shown below.

Let's first define the following vectordrawable.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= "V" android:fillcolor= "#000000" Android:pathdata= "m300,70 l 0,-70 70,70 0,0 -70,70z "/> </group> </vector> 

The basic structure is this, and we can see that he has two wide height descriptions, android:height and android:height support all dimension units, generally we use DP, which refers to the width and height of the vector graph. Android:viewportwidth and Android:viewportheight can be understood to take 600 dots in 64DP as coordinates to draw the following graph. Then we can see the <group> tag, which is primarily for the overall part of path drawing below, such as the axis (300,300) counterclockwise offset It 45 degrees, or through the <group> Tag Name property to animate it, and so on. Android:pivotx and Android:pivoty refer to axis x,y axes. With the overall structure outside, the next step is to draw the whole command through the <path> tag. The first is the name of the path, where we can point to the path animation. Android:fillcolor refers to the specific color of a closed graphic block. Then android:pathdata refers to some drawing commands. Learn the drawing command in conjunction with the following figure:

Uppercase absolute Lowercase relative parameter plus comma, and canvas draw almost. Explain the last A, Rx and Ry refers to (x,y) as the axis of the x axis and y-axis radius, x-rotation refers to the x-axis rotation angle, Large-arc-flag 0 when the small radian, 1 o'clock to take large radian, Sweep-flag 0 to take counterclockwise direction, 1 take the clockwise direction. Combine the following figure to understand

Here, large-arc-flag=0,sweep-flag=0 to write a path to see the real effect: the code is as follows:

 <path
      android:name= "V"
      android:strokecolor= "#000000"
      android:strokewidth= "2"
      android: Pathdata= "A 0 0 0"
      />

The resulting effect chart:

It's the same as it says!

2. Draw a heart type, as shown below.

The code is as follows:

<?xml version= "1.0" encoding= "Utf-8"?> <vector xmlns:android=
"http://schemas.android.com/apk/res/" Android "
  android:height=" 256DP "
  android:width=" 256DP "
  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>

Similar to the above, mainly android:pathdata changed. Start with (20.5,9.5), and then just draw the Bezier curve back, The relative start level moves left 1.955, the vertical does not move to determine a point, and then relative to the beginning level left-3.83, vertical down 1.268 to determine a point, and then relative to the beginning level left 4.5, moving vertically down 3 to determine a point, through the three points of the Bezier curve, down the similar principle.

PS: Some simple commands we know, then SVG so many commands, Android inside so many icon, can't let oneself draw it, how do we learn these commands, to draw these icon. Fortunately learning command we can use Android:path rules, draw icon Pathdata data. So we can draw the data we want.

How do you use it on the ImageView background? Very simply, look at the following code:

Activity_main.xml

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android=
"http://schemas.android.com/apk/" Res/android "
  android:layout_width=" match_parent "
  android:layout_height=" match_parent "
  xmlns:app=" Http://schemas.android.com/apk/res-auto ">
  <imageview
    android:layout_width=" Wrap_content "
    android:layout_height= "Wrap_content"
    app:srccompat= "@drawable/vectordrawable"/>
</linearlayout >

This effect is not can see, run, the effect is like above heart type, and then try to change his size, in fact, he will not deformation.

Vector Graph Animation animatedvectordrawable

We still use the official website demo to test.

Create a new XML file Vector_drawable.xml, put it in the drawable, code as follows:

<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= "V"
      android:fillcolor= "#000000"
      android:pathdata= "m300,70 l 0,-70 70,70 0,0-70,70z "/>
  </group>
</vector>

Then create a new XML file Vector_drawable_anim.xml, as Animatedvectordrawable is support:appcompat-v7:23.3 compatible to Android L (5.0). So we put it under the Drawable-v21 folder and the code is as follows:

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

Here we need to specify a android:drawable, point to the Vector_drawable_anim.xml file, and then animate it based on the group's name or path's name. The specified animations are rotation and path_morph respectively

The new rotation and path_morph two animations are placed under the Anim folder with the following code:
Rotation.xml

<?xml version= "1.0" encoding= "Utf-8"?> <set xmlns:android=
"http://schemas.android.com/apk/res/" Android ">
  <objectanimator
    android:duration=" 6000 "
    android:propertyname=" Rotation
    " android:valuefrom= "0"
    android:valueto= "360"/>
</set>

Path_morph.xml

<?xml version= "1.0" encoding= "Utf-8"?> <set xmlns:android=
"http://schemas.android.com/apk/res/" Android ">
    <objectanimator
      android:duration=" 3000 "
      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>

Then it is below 5.0 activity_main.xml, placed under layout:

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android"
  android:layout_width= "Match_ Parent "
  android:layout_height=" match_parent "
  xmlns:app=" Http://schemas.android.com/apk/res-auto ">
  <imageview
    android:id= "@+id/image_view"
    android:layout_width= "400DP"
    android:layout_ height= "400DP"
    app:srccompat= "@drawable/vector_drawable"/>
</LinearLayout>

Then it is more than 5.0 activity_main.xml, placed under the Layout-v21 folder:

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android=
"http://schemas.android.com/apk/" Res/android "
  android:layout_width=" match_parent "
  android:layout_height=" match_parent "
  xmlns:app=" Http://schemas.android.com/apk/res-auto ">
  <imageview
    android:id=" @+id/image_view "
    android: Layout_width= "400DP"
    android:layout_height= "400DP"
    app:srccompat= "@drawable/vector_drawable_anim"/>
</LinearLayout>

Finally mainactivity Add code:

 ImageView ImageView = (imageview) Findviewbyid (R.id.image_view);
    drawable drawable = imageview.getdrawable ();
    Animatedvectordrawablecompat implements the Animatable interface
    if (drawable instanceof animatable) {
      ((animatable) drawable). Start ();
    }

Then we run under 5.0 without animation effect. The effect is the same as the above triangular effect chart, here we look at more than 5.0 effects:

This allows us to achieve a simple animation.

Reference article: How to play the Android vector map vectordrawable

The source of the hit: vectordrawable class free Fill Color

This is the entire content of this article, I hope to learn more about Android software programming help