SVG and Android VectorDrawable
Sep 4, 2018 · 3 min read
SVG(Scalable Vector Graphics) is not Image. It is using pathData to draw anything. If you want to animate it, there are trimPathEnd, trimPathOffset, duration and etc method to help you. It is used for drawing simple icons and shapes.
You can use this website to easily create your vector item https://shapeshifter.design/
Please use srcCompat: to set vector drawable.
XML:
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/avd_anim"/>Implementation:
var drawable = imageView.drawable as Animatable2
drawable.registerAnimationCallback(@RequiresApi(Build.VERSION_CODES.M)
object : Animatable2.AnimationCallback() {
override fun onAnimationEnd(drawable2: Drawable) {
var drawable2 = imageView.drawable as Animatable2
drawable2.start()
}
})
drawable.start()Animated Vector sample:
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt">
<aapt:attr name="android:drawable">
<vector
android:name="vector"
android:width="472dp"
android:height="392dp"
android:viewportWidth="472"
android:viewportHeight="392">
<path
android:name="path"
android:pathData="M 288.7 187.7 C 235 155.1 168.9 188.7 168.9 188.7 C 168.9 188.7 180.5 281.3 180.3 310.1 C 179.5 312.1 179.3 314.2 179.9 316.4 C 179.7 317.6 179.3 318.1 178.9 318.1 L 180.6 318.1 C 181.7 321.1 183.5 322.4 186.4 323.4 C 197.3 327.4 207.9 330.2 219.5 331.1 C 223.1 331.4 226.6 331.3 230 330.9 C 231.6 332.4 234 333.3 237.1 333 C 250.3 331.8 265.1 331.1 275.7 322.7 C 277.4 321.3 278.4 320 278.8 318 L 279.6 318 L 288.7 187.7 Z"
android:fillColor="#FFB564"/>
<path
android:name="path_1"
android:pathData="M 173.2 146.4 L 180.5 184 L 206.6 177.2 L 200.1 144 Z"
android:fillColor="#52E2D7"/>
<path
android:name="path_2"
android:pathData="M 222.6 133.8 C 222.6 133.8 204.7 118.2 217.3 173.7 C 217.9 176.2 236.7 177.1 236.7 177.1 L 222.6 133.8 Z"
android:fillColor="#FFFBE8"/>
<path
android:name="path_3"
android:pathData="M 188.6 181.4 C 188.6 181.4 168 181.4 168 193.8 C 168.1 211 181.4 299.4 181.1 313.7 C 180.9 323 200.2 327.3 200.2 327.3"
android:fillColor="#F9A035"/>
<path
android:name="path_4"
android:pathData="M 200.2 93.3 C 200.2 93.3 209.9 143.5 211.8 141.7 C 213.8 139.9 222.6 133.8 222.6 133.8 L 209.1 93.3 L 200.2 93.3 Z"
android:fillColor="#FFB564"/>
<path
android:name="path_5"
android:pathData="M 184.1 123.6 C 184.1 123.6 171.2 148.2 173.2 146.4 C 175.2 144.6 200.2 144 200.2 144 L 184.1 123.6 Z"
android:fillColor="#FFFBE8"/>
<path
android:name="path_6"
android:pathData="M 257.9 92.8 C 256.4 94.8 254.9 96.9 253.5 99.1 C 252.3 101 250.6 101.4 248.9 101 C 247.2 104.4 245.4 107.7 243.2 110.8 C 237 133.2 242.5 152.5 234.5 174.6 C 233.2 178.1 234.8 174.9 236.7 177.1 C 242.3 174.1 267.8 180.6 275.4 181.3 C 277.1 179 266.3 178 265.1 174.7 C 266.5 178.6 265.3 169.5 265.3 168.6 C 265.6 166 265.3 163.1 265.6 160.5 C 266.3 155.9 264.2 154.1 264.8 149.5 C 266.7 135 268.2 120.1 267.8 105.4 C 265.6 101.5 263.7 97.5 262.2 93.3 C 261 92.9 259.4 92.7 257.9 92.8 Z"
android:fillColor="#F25F68"/>
<path
android:name="path_7"
android:pathData="M 238 171.1 L 245.2 109 L 260.4 86.9 L 267.7 110.8 L 265.1 174.8"
android:fillColor="#00000000"
android:strokeColor="#AF3A46"
android:strokeWidth="4.9763"
android:strokeLineCap="square"
android:strokeLineJoin="round"/>
<path
android:name="path_8"
android:pathData="M 180.2 182.4 L 173.8 144 L 184.1 123.6 L 200.1 139.2 L 206.6 176.2"
android:fillColor="#00000000"
android:strokeColor="#AF3A46"
android:strokeWidth="4.9763"
android:strokeLineCap="square"
android:strokeLineJoin="round"/>
<path
android:name="path_9"
android:pathData="M 218.2 174.8 C 218.2 174.8 213.7 158.3 209.2 138.4 C 204.4 117.1 199.5 94.6 200.2 93.3 C 201.5 90.7 205.6 88.5 209.1 93.3 C 211.1 96 217 114.9 222.6 133.8 C 228.9 154.9 234.8 176.1 234.5 174.6"
android:fillColor="#00000000"
android:strokeColor="#AF3A46"
android:strokeWidth="4.9763"
android:strokeLineCap="square"
android:strokeLineJoin="round"/>
<path
android:name="path_10"
android:pathData="M 200.2 93.3 C 188.6 81.1 189.8 74.1 193.6 70.3 C 200.2 63.7 190.8 53.7 192.7 53.5 C 199.3 52.9 221.3 63.1 210 90.4"
android:fillColor="#AF3A46"
android:strokeColor="#AF3A46"
android:strokeWidth="2.4882"/>
<path
android:name="path_11"
android:pathData="M 245.2 109 C 245.2 109 256.5 104.2 267.7 110.9"
android:fillColor="#00000000"
android:strokeColor="#AF3A46"
android:strokeWidth="4.9763"
android:strokeLineCap="round"
android:strokeLineJoin="round"/>
<path
android:name="path_12"
android:pathData="M 200.1 139.2 C 200.1 143.9 187.9 143.9 187.9 143.9 C 184.7 149.2 173.8 143.9 173.8 143.9"
android:fillColor="#FFFBE8"
android:strokeColor="#AF3A46"
android:strokeWidth="4.9763"
android:strokeLineCap="round"
android:strokeLineJoin="round"/>
<path
android:name="path_13"
android:pathData="M 190.9 130.3 C 194.3 133.6 178.9 133.8 178.9 133.8 L 184 123.6 L 190.9 130.3 Z"
android:fillColor="#AF3A46"/>
<path
android:name="path_14"
android:pathData="M 211.8 141.6 C 219.5 141.6 223.2 135.6 223.2 135.6"
android:fillColor="#00000000"
android:strokeColor="#AF3A46"
android:strokeWidth="4.9763"
android:strokeLineCap="round"
android:strokeLineJoin="round"/>
<path
android:name="path_15"
android:pathData="M 169 188.8 L 169 188.8 C 212.9 167.3 263.3 172.2 288.8 187.7 L 277 321.9 C 277 321.9 237.1 345.1 181.8 320.8 L 169 188.8 Z"
android:fillColor="#00000000"
android:strokeColor="#AF3A46"
android:strokeWidth="4.9763"
android:strokeLineCap="round"
android:strokeLineJoin="round"/>
<path
android:name="path_16"
android:pathData="M 255.7 270.4 L 253.5 237.8 L 229.1 218.9 L 205 236.6 C 205.3 248.4 206.4 259.4 206.7 271.2 C 206.6 271.2 236 275.9 255.7 270.4 Z"
android:fillColor="#00000000"
android:strokeColor="#AF3A46"
android:strokeWidth="4.8228"
android:strokeLineCap="round"
android:strokeLineJoin="round"/>
<path
android:name="path_17"
android:pathData="M 229.5 219 L 229.5 246"
android:fillColor="#00000000"
android:strokeColor="#AF3A46"
android:strokeWidth="5"
android:strokeLineCap="round"
android:strokeLineJoin="round"/>
<path
android:name="path_18"
android:pathData="M 233.2 240.8 C 231.7 240.8 230.3 241.1 226.4 241.2 C 226.4 241.2 225.4 240.3 226.3 247.1 C 229.2 247.2 230.3 247.3 233.2 247.3 L 233.2 240.8 Z"
android:fillColor="#00000000"
android:strokeColor="#AF3A46"
android:strokeWidth="3.8582"
android:strokeLineCap="round"
android:strokeLineJoin="round"/>
</vector>
</aapt:attr>
<target android:name="path_7">
<aapt:attr name="android:animation">
<objectAnimator
android:propertyName="trimPathEnd"
android:duration="256"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
<target android:name="path_15">
<aapt:attr name="android:animation">
<set>
<objectAnimator
android:propertyName="trimPathOffset"
android:duration="1000"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
<objectAnimator
android:propertyName="trimPathEnd"
android:duration="1000"
android:valueFrom="0"
android:valueTo="0.2"
android:valueType="floatType"
android:interpolator="@android:interpolator/fast_out_slow_in"/>
</set>
</aapt:attr>
</target>
</animated-vector>