Zoltan Szilagyi
Reputation: 292
Android Vector Drawable issue
I made a vector drawable in Adobe Illustrator animated with Android Asset Studio, placed in the application then I run it.
I got the following result with
Android Marshmallow (6.0.1 - real device)
Android Nougat (7.1 - emulator)
As you can see in Marshmallow (and Lollipop) the image not appearing correctly. Also in Lollipop the image is blured, and the animations not working correctly.
Can anyone explain why and how to fix it?
Here my vector drawable:
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt">
<aapt:attr name="android:drawable">
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="100dp"
android:height="30dp"
android:alpha="1"
android:viewportHeight="30"
android:viewportWidth="100">
<group android:name="group">
<path
android:name="path"
android:pathData="M 10.64 4.95 A 4.11,4.11,0,0,0,8.64,0.9500000000000002 A 4.21,4.21,0,0,0,3.6400000000000006,1.9500000000000002 A 4,4,0,0,0,2.6400000000000006,5.95 C 3.64 8.29 7.42 7.1 9.64 9.95 A 5.66,5.66,0,0,1,10.64,14.95 A 5.78,5.78,0,0,1,4.640000000000001,18.95 C 4.42 18.95 1.37 18.49 0.64 15.95 A 4.64,4.64,0,0,1,1.6400000000000006,11.95"
android:strokeColor="#FFFFFF"
android:strokeWidth="1"
android:trimPathEnd="0" />
<path
android:name="path_1"
android:pathData="M 45.55 15.64 C 46.83 18.05 49.27 19.16 51.17 18.54 A 3.75,3.75,0,0,0,53.60999999999999,15.879999999999999 A 4.09,4.09,0,0,0,51.25999999999999,11.469999999999999 A 4.92,4.92,0,0,0,47.14999999999999,11.839999999999998 A 7.94,7.94,0,0,0,43.56999999999999,15.329999999999998 A 11.4,11.4,0,0,0,42.24999999999999,20.86 A 10.7,10.7,0,0,0,43.019999999999996,25.36 C 43.12 25.36 42.85 23.77 42.64 20.94 C 42.23 15.41 42.64 12.14 42.06 12.05 C 41.48 11.96 41.2 17.14 38.06 18.5 A 4.89,4.89,0,0,1,33.12,17.729999999999997 A 4.88,4.88,0,0,1,31.609999999999996,14.459999999999997 C 31.36 11.85 33.04 9.57 33.37 9.67 C 33.7 9.77 33.63 10.88 33.06 11.67 C 32.2 12.84 30.61 11.93 28.8 13.03 A 4.87,4.87,0,0,0,26.689999999999998,15.959999999999997 A 4.7,4.7,0,0,0,26.889999999999997,18.81 A 23.27,23.27,0,0,1,26.689999999999998,15.959999999999999 A 9.3,9.3,0,0,0,26.689999999999998,13.709999999999999 A 3.44,3.44,0,0,0,25,11.42 A 3.67,3.67,0,0,0,21.88,11.95 C 19.41 13.45 20.22 15.88 17.99 17.42 C 16.63 18.36 14.36 18.79 12.9 17.64 A 3.78,3.78,0,0,1,11.689999999999998,13.959999999999997 C 11.95 12.7 12.98 11.02 14.69 10.96 A 3.33,3.33,0,0,1,17.689999999999998,12.959999999999997"
android:strokeColor="#FFFFFF"
android:strokeWidth="1"
android:trimPathStart="1" />
<path
android:name="path_2"
android:pathData="M 55.64 1.95 C 55.4 2.69 51.69 14.14 55.88 17.2 A 3.59,3.59,0,0,0,58.64,17.95 C 61.34 17.29 62.09 11.83 62.64 11.95 C 63.19 12.07 61.77 16.41 63.64 17.95 A 3.74,3.74,0,0,0,67.64,17.95 C 70.24 16.39 70.07 11.95 70.64 11.95 C 71.21 11.95 70.43 16.24 72.64 17.95 A 4.46,4.46,0,0,0,77.64,17.95 C 79.96 16.26 79.51 11.95 79.64 11.95 C 79.77 11.95 79.59 17.95 79.64 17.95 A 6.78,6.78,0,0,1,80.64,13.95 C 81.84 12.27 84.36 11.16 85.64 11.95 C 87.46 13.08 86.5 17.95 86.64 17.95 A 7.65,7.65,0,0,1,87.64,13.95 C 88.8 12.28 91.33 11.16 92.64 11.95 C 94.43 13.03 93.01 17.15 94.64 17.95 C 95.53 18.39 96.82 17.58 97.64 16.95"
android:strokeColor="#FFFFFF"
android:strokeWidth="1"
android:trimPathEnd="0" />
<path
android:name="path_3"
android:pathData="M 33 3.6 L 33.85 4.73"
android:strokeColor="#FFFFFF"
android:strokeWidth="1"
android:trimPathEnd="0" />
<path
android:name="path_4"
android:pathData="M 51.15 5.4 A 20.29,20.29,0,0,0,56.05,6.08 A 19.57,19.57,0,0,0,58.65,5.95"
android:strokeColor="#FFFFFF"
android:strokeWidth="1"
android:trimPathEnd="0" />
</group>
</vector>
</aapt:attr>
<target android:name="path">
<aapt:attr name="android:animation">
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:name="path"
android:duration="2000"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:propertyName="trimPathEnd"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType" />
</aapt:attr>
</target>
<target android:name="path_1">
<aapt:attr name="android:animation">
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:name="path_1"
android:duration="2000"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:propertyName="trimPathStart"
android:startOffset="2000"
android:valueFrom="1"
android:valueTo="0"
android:valueType="floatType" />
</aapt:attr>
</target>
<target android:name="path_2">
<aapt:attr name="android:animation">
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:name="path_2"
android:duration="2000"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:propertyName="trimPathEnd"
android:startOffset="4000"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType" />
</aapt:attr>
</target>
<target android:name="path_3">
<aapt:attr name="android:animation">
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:name="path_3"
android:duration="500"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:propertyName="trimPathEnd"
android:startOffset="6000"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType" />
</aapt:attr>
</target>
<target android:name="path_4">
<aapt:attr name="android:animation">
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:name="path_4"
android:duration="500"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:propertyName="trimPathEnd"
android:startOffset="6500"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType" />
</aapt:attr>
</target>
</animated-vector>
Upvotes: 2
Views: 2097
Answers (3)
Zoltan Szilagyi
Reputation: 292
If I convert SVG with Android Studio the problem solved. It seems that Android Asset Studio not converting correctly.
Here some tips:
1) In Android Lollipop use android.support.v7.widget.AppCompatImageView instead of ImageView. If you want to set vector programmatically use setImageResource(); instead of setImageDrawable();
2) If the vector blured, here is the solution: link
Upvotes: 2
Mushahid Khatri
Reputation: 728
This may due to you have put static dp in the vector drawable height width
You can use below library for defining your dimentions
and the android:width and android:height set by sdp will resolve this problem. Just like below
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt">
<aapt:attr name="android:drawable">
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="@dimen/_100sdp"
android:height="@dimen/_30sdp"
android:viewportWidth="100"
android:viewportHeight="30"
android:alpha="1">
<group android:name="group">
<path
android:name="path"
android:pathData="M 10.64 4.95 A 4.11,4.11,0,0,0,8.64,0.9500000000000002 A 4.21,4.21,0,0,0,3.6400000000000006,1.9500000000000002 A 4,4,0,0,0,2.6400000000000006,5.95 C 3.64 8.29 7.42 7.1 9.64 9.95 A 5.66,5.66,0,0,1,10.64,14.95 A 5.78,5.78,0,0,1,4.640000000000001,18.95 C 4.42 18.95 1.37 18.49 0.64 15.95 A 4.64,4.64,0,0,1,1.6400000000000006,11.95"
android:strokeColor="#000000"
android:strokeWidth="1"/>
<path
android:name="path_1"
android:pathData="M 45.55 15.64 C 46.83 18.05 49.27 19.16 51.17 18.54 A 3.75,3.75,0,0,0,53.60999999999999,15.879999999999999 A 4.09,4.09,0,0,0,51.25999999999999,11.469999999999999 A 4.92,4.92,0,0,0,47.14999999999999,11.839999999999998 A 7.94,7.94,0,0,0,43.56999999999999,15.329999999999998 A 11.4,11.4,0,0,0,42.24999999999999,20.86 A 10.7,10.7,0,0,0,43.019999999999996,25.36 C 43.12 25.36 42.85 23.77 42.64 20.94 C 42.23 15.41 42.64 12.14 42.06 12.05 C 41.48 11.96 41.2 17.14 38.06 18.5 A 4.89,4.89,0,0,1,33.12,17.729999999999997 A 4.88,4.88,0,0,1,31.609999999999996,14.459999999999997 C 31.36 11.85 33.04 9.57 33.37 9.67 C 33.7 9.77 33.63 10.88 33.06 11.67 C 32.2 12.84 30.61 11.93 28.8 13.03 A 4.87,4.87,0,0,0,26.689999999999998,15.959999999999997 A 4.7,4.7,0,0,0,26.889999999999997,18.81 A 23.27,23.27,0,0,1,26.689999999999998,15.959999999999999 A 9.3,9.3,0,0,0,26.689999999999998,13.709999999999999 A 3.44,3.44,0,0,0,25,11.42 A 3.67,3.67,0,0,0,21.88,11.95 C 19.41 13.45 20.22 15.88 17.99 17.42 C 16.63 18.36 14.36 18.79 12.9 17.64 A 3.78,3.78,0,0,1,11.689999999999998,13.959999999999997 C 11.95 12.7 12.98 11.02 14.69 10.96 A 3.33,3.33,0,0,1,17.689999999999998,12.959999999999997"
android:strokeColor="#000000"
android:strokeWidth="1"/>
<path
android:name="path_2"
android:pathData="M 55.64 1.95 C 55.4 2.69 51.69 14.14 55.88 17.2 A 3.59,3.59,0,0,0,58.64,17.95 C 61.34 17.29 62.09 11.83 62.64 11.95 C 63.19 12.07 61.77 16.41 63.64 17.95 A 3.74,3.74,0,0,0,67.64,17.95 C 70.24 16.39 70.07 11.95 70.64 11.95 C 71.21 11.95 70.43 16.24 72.64 17.95 A 4.46,4.46,0,0,0,77.64,17.95 C 79.96 16.26 79.51 11.95 79.64 11.95 C 79.77 11.95 79.59 17.95 79.64 17.95 A 6.78,6.78,0,0,1,80.64,13.95 C 81.84 12.27 84.36 11.16 85.64 11.95 C 87.46 13.08 86.5 17.95 86.64 17.95 A 7.65,7.65,0,0,1,87.64,13.95 C 88.8 12.28 91.33 11.16 92.64 11.95 C 94.43 13.03 93.01 17.15 94.64 17.95 C 95.53 18.39 96.82 17.58 97.64 16.95"
android:strokeColor="#000000"
android:strokeWidth="1"/>
<path
android:name="path_3"
android:pathData="M 33 3.6 L 33.85 4.73"
android:strokeColor="#000000"
android:strokeWidth="1"/>
<path
android:name="path_4"
android:pathData="M 51.15 5.4 A 20.29,20.29,0,0,0,56.05,6.08 A 19.57,19.57,0,0,0,58.65,5.95"
android:strokeColor="#000000"
android:strokeWidth="1"/>
</group>
</vector>
</aapt:attr>
<target android:name="path">
<aapt:attr name="android:animation">
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:name="path"
android:propertyName="trimPathEnd"
android:duration="100"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
</aapt:attr>
</target>
<target android:name="path_1">
<aapt:attr name="android:animation">
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:name="path_1"
android:propertyName="trimPathStart"
android:startOffset="100"
android:duration="100"
android:valueFrom="1"
android:valueTo="0"
android:valueType="floatType"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
</aapt:attr>
</target>
<target android:name="path_2">
<aapt:attr name="android:animation">
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:name="path_2"
android:propertyName="trimPathEnd"
android:startOffset="200"
android:duration="100"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
</aapt:attr>
</target>
<target android:name="path_3">
<aapt:attr name="android:animation">
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:name="path_3"
android:propertyName="trimPathEnd"
android:startOffset="335"
android:duration="100"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
</aapt:attr>
</target>
<target android:name="path_4">
<aapt:attr name="android:animation">
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:name="path_4"
android:propertyName="trimPathEnd"
android:startOffset="435"
android:duration="100"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
</aapt:attr>
</target>
</animated-vector>
Upvotes: 0
Matthew Shearer
Reputation: 2795
have you added the following to your build.gradle
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}
Upvotes: 0
Related Questions
- Invalid drawable tag vector
- Android vector compatibility
- Using Vector Drawable Compat
- VectorDrawable not showing or drawed wrong
- unable to set vector drawable on KITKAT
- Android Vector Drawable crash
- Vector drawable not drawn correctly in Android Studio
- Android Invalid drawable tag vector on drawableStart
- Vector drawable distorted
- Weird problem about an android drawable