This is the 24th day of my participation in the August Text Challenge.More challenges in August
Why use SVG
First, what is SVG? Scalable Vector Graphics (SHORT for Scalable Vector Graphics) is a Graphics format based on extensible Markup Language (XML) for describing two-dimensional Vector Graphics, defined by the W3C.
Compared to Bitmaps in Android, it takes up less space and can be scaled without distortion. This is a good choice for Android’s wide variety of models. VectorDrawable has been introduced since Android5.0 to support SVG.
SVG advantages: 1. SVG is smaller and more compressible than JPEG and GIF images. SVG describes the path of the graph, and there is no distortion after zooming in and out. SVG files are pure XML. SVG can dynamically modify its colors
Disadvantages: 1, the color gambit is not as good as raster image, SVG describes is the path, and raster image describes is the color value of each pixel 2, suitable for small ICONS, Android uses bitmap, SVG is ultimately used is also converted to bitmap, if the image is too large, SVG will also increase the time to transform bitmap. 3. It is suitable for simple graphics. The simple graphics here mainly refer to the graphics pieced together by simple geometric graphics, but complicated graphics such as head pictures are not suitable.
Two SVG library sites are recommended:
Ali’s iconfont: www.iconfont.cn/
Sfont: www.sfont.cn/
Second, the VectorDrawable
1. Inheritance
As shown below, VectorDrawable inherits Drawable and is introduced after API21 (Android5.0)
Create VectorDrawable in Android Studio
1) Create Vector Asset
2) Configure the Vector Asset property
Asset Type: Use the vector image Type, Clip Art is the provided inherent vector image, and Local file is the referenced Local vector image file
Name: Name of the
Size: set the width and height of the graph. Check Override to set it
Color: graphic Color (fill Color)
Opacity: Opacity
Enable Auto mirroring for RTL Layout: indicates whether RTL layout is filled from right to left
Select Next -> Finish to complete the creation. After the creation, an XML file will be added to the res/drawable directory, as shown below
3. VectorDrawable property
ic_arrow_download_black_24dp.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" Android: viewportWidth = "24.0" android: viewportHeight = "24.0" > < path android: fillColor = "# FF000000" Android :pathData="M16.5,3c-1.74, 0-3.41, 0.81-4.5, 2.09c10.91,3.81 9.24,3 7.5,3 4.42,3 2,5.42 2 8.5c0,3.78 3.4,6.86 8.55, 11.54 L12, l1.45, 21.35-1.32 C18.6, 22 22 22,5.42,8.5,12.28 15.36 19.58, 16.5, 3 3 zm12. 1,18.55 l - 0.1, 0.1 C7.14-0.1, 0.1, 14.24 4,11.39 4,8.5,6.5 5.5 4, 5, 7.5 5 c1. 54, 0, 3.04, 0.99, 3.57, 2.36 h1.87 C13.46, 5.99, 14.96, 16.5, 5 5 c2, 0 3.5, 1.5, 3.5, 3.5 0,2.89-3.14, 5.74-7.9, 10.05 z "> < / path > < / vector >Copy the codeTags:
The android: name – the name
Android :width — default width (used for wrap_content)
Android :height — default height (used for wrap_content)
Android :viewportWidth — Canvas width (the canvas area of the vector image, if the coordinates are drawn outside this area will not be displayed)
Android :viewportHeight — Canvas height (the canvas area of a vector image, if the coordinates are drawn outside this area will not be displayed)
Android: tint – tone
Android :tintMode: — See the tintMode Google documentation
Android :autoMirrored — Automatic image fill (from right to left)
Android :alpha — The opacity of the entire Drawable defaults to 1.0 and is completely opaque
The label
Android :name — The name of the path
Android :pathData — pathData
Android :fillColor — fillColor
Android :fillAlpha — Fill transparency
Android :strokeColor — strokeColor
Android :strokeWidth — strokeWidth
Android :strokeAlpha — Stroke transparency
Android :trimPathStart — Remove the percentage of paths that start (0-1, default 0)
Android :trimPathEnd — Remove the percentage of path ends (0-1, default 0)
Android :trimPathOffset — Shift trim area (allow to display areas including start and finish), range from 0 to 1. The default value is 0.
Android :strokeLineCap — Sets the line cap for the stroke path: butt, round, and square. The default is butt
Android :strokeLineJoin — Set the stroke path line connection mode: miter, round, bevel. The default for the miter
Android :fillType — Path force filling type, optional nonZero (non-zero filling) or evenOdd (parity filling), default nonZero, api24 new
4. VectorDrawable sets the color gradient
Without further ado, let’s go to the official document
The fillColor property allows you to set specific Settings, as well as gradients above api24.
From the above figure, we can see that there are three gradient modes officially provided after API24: LinearGradient, RadialGradient and SweepGradient. Next, let’s look at the specific usage.
LinearGradient
The first method sets the start and end colors and coordinates for the start and end
<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt" Android :height="24dp" Android :width="24dp" Android :viewportHeight="24.0" Android :viewportWidth="24.0"> <path Android: pathData = "M20, 12 l - 1.41, 1.41 L13, 16.17 V4h - 2 v12. 17 l - 5.58-5.59 L4, 12 l8, 8 8, 8 z" > < aapt: attr name="android:fillColor"> <gradient android:startColor="#0000CD" android:centerColor="#FFFF00" android:endColor="#FF3030" android:startX="0" android:endX="0" android:startY="0" android:endY="24" android:type="linear"> </gradient> </aapt:attr> </path> </vector>Copy the codeAlternatively, set the start and end coordinates, and then set the desired gradient color according to the scale
<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt" Android :height="24dp" Android :width="24dp" Android :viewportHeight="24.0" Android :viewportWidth="24.0"> <path Android: pathData = "M20, 12 l - 1.41, 1.41 L13, 16.17 V4h - 2 v12. 17 l - 5.58-5.59 L4, 12 l8, 8 8, 8 z" > < aapt: attr name="android:fillColor"> <gradient android:startX="0" android:endX="0" android:startY="0" android:endY="24" <item android:color="#FFFF00" /> <item android:color="#FFFF00" Android :offset="0.5" /> <item Android :color="#FF3030" Android :offset="1.0" /> </gradient> </aapt:attr> </path> </vector>Copy the code
RadialGradient
<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt" Android :width="24dp" Android :height=" 24DP "Android :viewportWidth="24.0" Android :viewportHeight="24.0"> <path Android :pathData="M19.35, 10.04c18.67,6.59 15.64,4 12,4 9.11,4 6.6,5.64 5.35,8.04 2.34,8.36 0,10.91 0,14c0,3.31 2.69,6 > <aapt:attr name=" Android :fillColor"> <gradient android:startColor="#0000CD" android:centerColor="#FFFF00" android:endColor="#FF3030" android:gradientRadius="12" android:centerX="12" android:centerY="12" android:type="radial"> </gradient> </aapt:attr> </path> </vector>Copy the code支那
<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt" Android :width="24dp" Android :height=" 24DP "Android :viewportWidth="24.0" Android :viewportHeight="24.0"> <path Android :pathData="M19.35, 10.04c18.67,6.59 15.64,4 12,4 9.11,4 6.6,5.64 5.35,8.04 2.34,8.36 0,10.91 0,14c0,3.31 2.69,6 > <aapt:attr name=" Android :fillColor"> <gradient android:gradientRadius="12" android:centerX="12" android:centerY="12" android:type="radial"> <item Android :color="#0000CD" Android :offset="0.0" /> <item Android :color="#FFFF00" Android :offset="0.5" /> <item > </gradient> </aapt:attr> </path> </vector>Copy the code
SweepGradient
<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt" Android :width="24dp" Android :height=" 24DP "Android :viewportWidth="24.0" Android :viewportHeight="24.0"> <path H4c android: pathData = "M10, 4-1.1, 0-1.99, 0.9-1.99, 2 l2, 18 c0, 1.1, 0.9, 2, 2, 2 h16c1. 1, 0, 2-0.9-2-2 v8c0, - 1.1-0.9-2 -2,-2h-8l-2,-2z"> <aapt:attr name="android:fillColor"> <gradient android:startColor="#0000CD" android:centerColor="#FFFF00" android:endColor="#FF3030" android:centerX="24" android:centerY="24" android:type="sweep"> </gradient> </aapt:attr> </path> </vector>Copy the code<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt" Android :width="24dp" Android :height=" 24DP "Android :viewportWidth="24.0" Android :viewportHeight="24.0"> <path H4c android: pathData = "M10, 4-1.1, 0-1.99, 0.9-1.99, 2 l2, 18 c0, 1.1, 0.9, 2, 2, 2 h16c1. 1, 0, 2-0.9-2-2 v8c0, - 1.1-0.9-2 -2,-2h-8l-2,-2z"> <aapt:attr name="android:fillColor"> <gradient android:centerX="24" android:centerY="24" android:type="sweep"> <item android:color="#0000CD" android:offset="0"/> <item android:color="#FFFF00" Android :offset="0.5"/> <item Android :offset=" #FF3030" /> </gradient> </aapt:attr> </path> </vector>Copy the code