How to create a vector drawable with inner path transparent? - android
I am trying to create a favourite icon something like the following icon.
While creating it i need the inner path (the area in blue color)to be transparent in the result.But while giving the transparent color it is showing the color that is filled in the outer path.i.e complete shape in orange color. How i can i make a vector drawable with transparent inner path
My vector drawable is
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="72dp"
android:height="66dp"
android:viewportHeight="66"
android:viewportWidth="72">
<path
android:fillColor="#android:color/transparent"
android:pathData="M 0.00 0.00 L 72.00 0.00 L 72.00 66.00 L 0.00 66.00 L 0.00 0.00 Z" />
<path
android:fillColor="#F7592B"
android:pathData="M 20.99 1.04 C 26.30 1.45 30.97 4.88 36.04 5.70 C 40.02 5.23 43.79 2.79 47.70
1.80 C 56.08 -0.90 65.46 4.21 69.03 11.97 C 71.67 17.65 71.59 24.74 70.62 30.81
C 68.57 41.48 60.32 50.55 51.81 56.81 C 47.69 59.73 43.11 62.72 38.21 64.12 C
34.80 65.13 31.23 63.34 28.24 61.86 C 19.69 57.27 11.77 50.76 6.25 42.72 C 0.82
34.78 -0.33 24.87 1.66 15.60 C 3.69 7.15 12.14 0.18 20.99 1.04 Z" />
<path
android:fillColor="#1721dc"
android:pathData="M 19.98 7.14 C 25.68 7.39 30.87 12.07 36.10 12.99 C 41.30 12.15 46.97 7.14 52.84
7.35 C 58.72 7.85 63.41 12.52 64.67 18.17 C 65.71 23.40 65.21 29.32 63.25 34.30
C 59.83 42.88 52.20 49.81 44.38 54.43 C 40.52 56.53 36.81 58.58 32.37 56.70 C
24.56 53.51 17.02 47.75 12.20 40.77 C 7.31 33.87 5.58 24.79 7.64 16.59 C 9.15
11.09 14.21 6.98 19.98 7.14 Z" />
</vector>
You have two ways to go:
1) create another vector drawable, which will draw only the outer line, instead of overlapping two hearts
or
2) remove the orange heart and add an orange stroke to the blue heart. Just copy the code below and try it. Be aware: half of the stroke width will go inside the image and half will go outside, so your image will differ a bit (stoke will be closer to the center of the image)
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="72dp"
android:height="66dp"
android:viewportHeight="66"
android:viewportWidth="72">
<path
android:fillColor="#00000000"
android:strokeColor="#F7592B"
android:strokeWidth="6"
android:pathData="M 19.98 7.14 C 25.68 7.39 30.87 12.07 36.10 12.99 C 41.30 12.15 46.97 7.14 52.84
7.35 C 58.72 7.85 63.41 12.52 64.67 18.17 C 65.71 23.40 65.21 29.32 63.25 34.30
C 59.83 42.88 52.20 49.81 44.38 54.43 C 40.52 56.53 36.81 58.58 32.37 56.70 C
24.56 53.51 17.02 47.75 12.20 40.77 C 7.31 33.87 5.58 24.79 7.64 16.59 C 9.15
11.09 14.21 6.98 19.98 7.14 Z" />
</vector>
Result:click to see the resulting image
Please use StrokeColor and strokeWidth like this
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="72dp"
android:height="66dp"
android:viewportHeight="66"
android:viewportWidth="72">
<path
android:fillColor="#android:color/transparent"
android:pathData="M 0.00 0.00 L 72.00 0.00 L 72.00 66.00 L 0.00 66.00 L 0.00 0.00 Z" />
<path
android:fillColor="#000000000"
android:pathData="M 19.98 7.14 C 25.68 7.39 30.87 12.07 36.10 12.99 C 41.30 12.15 46.97 7.14 52.84
7.35 C 58.72 7.85 63.41 12.52 64.67 18.17 C 65.71 23.40 65.21 29.32 63.25 34.30
C 59.83 42.88 52.20 49.81 44.38 54.43 C 40.52 56.53 36.81 58.58 32.37 56.70 C
24.56 53.51 17.02 47.75 12.20 40.77 C 7.31 33.87 5.58 24.79 7.64 16.59 C 9.15
11.09 14.21 6.98 19.98 7.14 Z"
android:strokeColor="#F7592B"
android:strokeWidth="5"/>
Related
Start Animated Vector Drawable in Jetpack Compose
I have an animated vector drawable R.drawable.my_anim, which I would like to show and start in Jetpack Compose.
The drawable is shown/rendered correct, but the animation does not start
Here's the compose view:
#Composable
fun SplashView() {
Surface(modifier = Modifier.fillMaxSize()) {
val image = animatedVectorResource(id = R.drawable.my_anim)
val atEnd by remember { mutableStateOf(false) }
Image(
modifier = Modifier.wrapContentSize(align = Alignment.Center)
painter = image.painterFor(atEnd = atEnd),
contentDescription = null,
)
// start the animation?
atEnd.not() // doesn't trigger a recomposition?
}
}
I read that updating the atEnd should trigger the animation, but I don't even know how to do that.
I'm probably missing a fundamental concept but a simple atEnd.not() doesn't do anything.
Currently using Compose Version = "1.0.0-beta04" with Android Studio Arctic Fox 2020.3.1
Here's the drawable for reference:
<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="446dp"
android:height="122dp"
android:tint="#color/white"
android:viewportWidth="2232"
android:viewportHeight="612">
<group android:name="wrapper">
<clip-path
android:name="clippath2184"
android:pathData="M 0 0 L 337 0 L 337 610 L 0 610 Z"/>
<group android:name="group_1">
<path
android:name="path"
android:pathData="M 669.96 585.36 L 625.7 585.36 L 469.75 217.95 L 469.75 570.58 C 469.75 578.74 463.13 585.36 454.97 585.36 L 401.33 585.36 L 401.33 24.36 L 452.11 24.36 C 458.04 24.36 463.4 27.9 465.71 33.36 L 616.32 388.18 L 616.32 24.36 L 669.96 24.36 C 678.12 24.36 684.74 30.98 684.74 39.14 L 684.74 570.59 C 684.74 578.74 678.12 585.36 669.96 585.36 Z M 2019.03 585.36 L 1897.02 585.36 L 1897.02 24.36 L 2019.03 24.36 C 2097.17 24.36 2160.74 87.93 2160.74 166.07 L 2160.74 443.64 C 2160.74 521.79 2097.17 585.36 2019.03 585.36 Z M 1965.43 516.94 L 2019.03 516.94 C 2059.44 516.94 2092.33 484.06 2092.33 443.64 L 2092.33 166.07 C 2092.33 125.66 2059.45 92.77 2019.03 92.77 L 1965.43 92.77 Z M 1235.99 576.35 L 1388.12 217.96 L 1388.12 585.36 L 1441.76 585.36 C 1449.92 585.36 1456.54 578.74 1456.54 570.58 L 1456.54 39.14 C 1456.54 30.98 1449.92 24.36 1441.76 24.36 L 1395.98 24.36 L 1157.85 585.36 L 1222.39 585.36 C 1228.32 585.36 1233.67 581.81 1235.99 576.35 Z M 1218.36 24.36 L 1063.93 388.18 L 1063.93 39.14 C 1063.93 30.98 1057.31 24.36 1049.15 24.36 L 1003.37 24.36 L 848.94 388.18 L 848.94 39.14 C 848.94 30.98 842.32 24.36 834.16 24.36 L 780.52 24.36 L 780.52 585.36 L 829.78 585.36 C 835.71 585.36 841.07 581.82 843.38 576.36 L 995.51 217.97 L 995.51 585.37 L 1044.77 585.37 C 1050.7 585.37 1056.06 581.83 1058.37 576.37 L 1286.86 38.07 C 1289.62 31.57 1284.85 24.37 1277.79 24.37 L 1218.36 24.37 Z M 1752.1 352.36 C 1791.12 333.22 1816.04 293.66 1816.04 249.81 L 1816.04 166.07 C 1816.04 87.8 1752.59 24.36 1674.33 24.36 L 1552.32 24.36 L 1552.32 585.36 L 1610.88 585.36 C 1616.32 585.36 1620.73 580.95 1620.73 575.51 L 1620.73 92.77 L 1674.33 92.77 C 1714.81 92.77 1747.63 125.59 1747.63 166.07 L 1747.63 249.81 C 1747.63 268.23 1736.62 284.87 1719.66 292.07 L 1704.16 298.65 C 1695.06 302.51 1689.15 311.44 1689.15 321.32 L 1689.15 379.15 L 1776.68 585.36 L 1836.12 585.36 C 1843.18 585.36 1847.95 578.16 1845.19 571.66 Z M 168.79 18 C 246.93 18 310.5 81.57 310.5 159.71 L 310.5 452.28 C 310.5 530.42 246.93 593.99 168.79 593.99 C 90.65 593.99 27.07 530.43 27.07 452.29 L 27.07 159.71 C 27.07 81.57 90.65 18 168.79 18 Z M 242.11 274.88 L 242.11 147.81 C 242.11 121.46 220.66 97.25 194.32 96.46 C 166.4 95.62 143.49 118.01 143.49 145.75 L 143.49 300.44 C 143.49 310.32 137.58 319.25 128.48 323.11 L 95.51 337.11 L 95.51 464.19 C 95.51 490.54 116.96 514.75 143.3 515.54 C 171.22 516.38 194.13 493.99 194.13 466.25 L 194.13 311.55 C 194.13 301.67 200.04 292.74 209.14 288.88 Z"
android:fillColor="#000"
android:strokeWidth="1"/>
<group android:name="group">
<path
android:name="path_1"
android:pathData="M 2201.13 23.99 L 2191.62 46.39 L 2191.62 24.89 C 2191.62 24.39 2191.22 23.99 2190.72 23.99 L 2188.02 23.99 L 2173.5 58.2 L 2177.24 58.2 C 2177.72 58.2 2178.16 57.91 2178.35 57.47 L 2187.46 36.02 L 2187.46 58.2 L 2190.36 58.2 C 2190.84 58.2 2191.28 57.91 2191.47 57.47 L 2200.58 36.02 L 2200.58 58.2 L 2203.85 58.2 C 2204.35 58.2 2204.75 57.8 2204.75 57.3 L 2204.75 24.89 C 2204.75 24.39 2204.35 23.99 2203.85 23.99 L 2201.13 23.99 Z M 2176.94 24.89 C 2176.94 24.39 2176.54 23.99 2176.04 23.99 L 2159.66 23.99 L 2159.66 28.16 L 2166.22 28.16 L 2166.22 58.2 L 2169.49 58.2 C 2169.99 58.2 2170.39 57.8 2170.39 57.3 L 2170.39 28.16 L 2176.94 28.16 Z"
android:fillColor="#000"
android:strokeWidth="1"/>
</group>
</group>
</group>
</vector>
</aapt:attr>
<target android:name="clippath2184">
<aapt:attr name="android:animation">
<set>
<objectAnimator
android:propertyName="pathData"
android:duration="1508"
android:valueFrom="M 0 0 L 0 0 L 0 610 L 0 610 Z"
android:valueTo="M 0 0 L 337 0 L 337 610 L 0 610 Z"
android:valueType="pathType"
android:interpolator="#android:anim/overshoot_interpolator"/>
<objectAnimator
android:propertyName="pathData"
android:startOffset="1768"
android:duration="1229"
android:valueFrom="M 0 0 L 337 0 L 337 610 L 0 610 Z"
android:valueTo="M 0 0 L 2240 0 L 2240 610 L 0 610 Z"
android:valueType="pathType"
android:interpolator="#android:anim/accelerate_interpolator"/>
<objectAnimator
android:propertyName="pathData"
android:startOffset="1508"
android:duration="260"
android:valueFrom="M 0 0 L 337 0 L 337 610 L 0 610 Z"
android:valueTo="M 0 0 L 337 0 L 337 610 L 0 610 Z"
android:valueType="pathType"
android:interpolator="#android:interpolator/fast_out_slow_in"/>
</set>
</aapt:attr>
</target>
</animated-vector>
You should use an Effect API like DisposableEffect or LaunchedEffect.
You can use something like:
Surface(modifier = Modifier.fillMaxSize()) {
//.. your code
DisposableEffect(Unit) {
atEnd = !atEnd
onDispose { }
}
}
SVG to VectorDrawable - black areas
When converting my SVG file to XML in Android Studio, some areas lose their colour and turn black. I generate the images with matplotlib.
I would like to know what is the reason, has anyone had a similar experience?
Part of the SVG code:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Created with matplotlib (https://matplotlib.org/) -->
<svg height="325.44pt" version="1.1" viewBox="0 0 169.766662 325.44" width="169.766662pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
*{stroke-linecap:butt;stroke-linejoin:round;}
</style>
</defs>
<g id="figure_1">
<g id="patch_1">
<path d="M 0 325.44
L 169.766662 325.44
L 169.766662 0
L 0 0
z
" style="fill:#ffffff;"/>
</g>
<g id="axes_1">
<g id="patch_2">
<path d="M 7.2 318.24
L 7.2 7.2
L 162.566662 7.2
L 162.566662 318.24
L 7.2 318.24
" style="fill:#ffffff;"/>
</g>
<g id="PathCollection_1">
<path clip-path="url(#p754b03d407)" d="M 78716.596016 -27474.520089
L 77942.322246 -27221.279456
L 78050.518304 -27028.327541
L 78716.596016 -27059.341745
L 78716.596016 -25924.398002
L 77866.272281 -26189.452266
L 76119.356759 -26479.331987
L 74855.808906 -26442.999703
... Path continues ...
M -22910.24931 -17813.121791
L -23104.077101 -18117.690382
L -23995.151323 -17916.360593
L -23910.337932 -17664.227519
L -23274.708335 -17321.128788
z
" style="fill:#ffffff;stroke:#ffffff;"/>
</g>
<g id="PathCollection_2">
<defs>
<path d="M 87.509701 -270.95066
L 113.70849 -250.33765
L 119.863663 -259.100553
L 128.991691 -265.620573
L 132.903703 -256.492545
L 136.815715 -242.1485
L 144.639739 -241.496498
L 138.472461 -234.591775
L 138.119719 -223.240442
L 125.868684 -220.480916
L 129.427765 -185.137266
L 128.093109 -131.553327
L 119.047112 -64.622833
L 113.560196 -51.350428
L 95.913086 -25.225786
L 95.814223 -25.126923
L 91.760825 -43.490791
L 84.84039 -63.6342
L 75.250644 -83.258577
L 63.090452 -100.139495
L 36.595072 -127.203339
L 32.146221 -144.034825
L 44.009824 -164.425393
L 47.321746 -173.273663
L 50.633669 -182.121934
L 47.173451 -204.984085
L 37.929727 -227.450783
L 27.598506 -243.812669
L 25.126923 -251.128557
L 25.522376 -261.064324
L 32.591106 -289.78413
L 37.039957 -296.85286
L 44.899594 -300.313077
L 44.998457 -300.288362
L 45.591637 -300.288362
L 58.542737 -299.967055
L 66.105784 -298.558253
L 75.843825 -294.554287
L 83.752893 -291.291796
L 83.802325 -291.316512
L 108.814755 -300.263646
L 112.818721 -297.890925
L 115.339736 -289.957141
L 119.788587 -284.470224
L 121.123243 -281.973925
L 122.457898 -279.502341
L 119.047112 -273.026791
L 113.313037 -271.593272
L 96.01195 -273.768266
z
" id="mae49ba8945" style="stroke:#ffffff;stroke-width:0.25;"/>
</defs>
<g clip-path="url(#p754b03d407)">
<use style="fill:#000098;stroke:#ffffff;stroke-width:0.25;" x="0" xlink:href="#mae49ba8945" y="325.44"/>
</g>
</g>
<g id="patch_3">
<path d="M 7.2 318.24
L 7.2 7.2
L 162.566662 7.2
L 162.566662 318.24
L 7.2 318.24
" style="fill:none;stroke:#000000;stroke-linejoin:miter;"/>
</g>
</g>
</g>
<defs>
<clipPath id="p754b03d407">
<rect height="311.04" width="155.366662" x="7.2" y="7.2"/>
</clipPath>
</defs>
</svg>
Android Studio complains the document contains very long lines, could that be the issue?
The svg to xml thing is not perfect. You can probably fix the problem by manually coloring the object. The structure of a simple image is something like <vector ...> <path android:fillColor="this attribute you want to add" android:pathData="..." /> </vector> P.S. As for the long path, you can use avocado to optimize the image.
Imported SVG from Inkscape isn't rendering
A SVG imported from Inkscape doesn't render in Android Studio. I'm not sure how to begin to trouble shoot this. Is there any in the xml code that gives a hint as to why? <?xml version="1.0" encoding="utf-8"?> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="10dp" android:viewportWidth="188.56328" android:viewportHeight="80.877213"> <path android:strokeColor="#2cb71a" android:strokeWidth="2.05815887" android:strokeLineJoin="round" android:pathData="M-185.37,134.151 L-0.63217,134.151 L-0.63217,213.584 L-185.37,213.584 L-185.37,134.151 Z" /> <path android:fillColor="#2cb71a" android:strokeWidth="2.41540718" android:strokeLineJoin="round" android:pathData="M-34.9949,145.281 C-32.1268,145.281,-29.8018,147.606,-29.8018,150.475 C-29.8018,153.343,-32.1268,155.668,-34.9949,155.668 C-37.863,155.668,-40.188,153.343,-40.188,150.475 C-40.188,147.606,-37.863,145.281,-34.9949,145.281 Z" /> <path android:fillColor="#2cb71a" android:strokeWidth="2.42433667" android:strokeLineJoin="round" android:pathData="M-35.1156,156.996 L-34.8741,156.996 Q-26.7825,156.996,-26.7825,165.088 L-26.7825,177.889 Q-26.7825,185.981,-34.8741,185.981 L-35.1156,185.981 Q-43.2073,185.981,-43.2073,177.889 L-43.2073,165.088 Q-43.2073,156.996,-35.1156,156.996 Z" /> <path android:fillColor="#2cb71a" android:strokeWidth="2.41540718" android:strokeLineJoin="round" android:pathData="M-104.59,121.139 L-104.59,121.139 Q-102.235,121.139,-102.235,123.494 L-102.235,133.155 Q-102.235,135.51,-104.59,135.51 L-104.59,135.51 Q-106.945,135.51,-106.945,133.155 L-106.945,123.494 Q-106.945,121.139,-104.59,121.139 Z" /> <path android:fillColor="#2cb71a" android:strokeWidth="2.41540718" android:strokeLineJoin="round" android:pathData="M128.593,104.735 L128.593,104.735 Q130.948,104.735,130.948,107.09 L130.948,116.752 Q130.948,119.107,128.593,119.107 L128.593,119.107 Q126.238,119.107,126.238,116.752 L126.238,107.09 Q126.238,104.735,128.593,104.735 Z" /> <path android:fillColor="#2cb71a" android:strokeWidth="2.41540718" android:strokeLineJoin="round" android:pathData="M-169.218,-6.47664 L-169.218,-6.47664 Q-166.863,-6.47664,-166.863,-4.12162 L-166.863,5.54001 Q-166.863,7.89503,-169.218,7.89503 L-169.218,7.89503 Q-171.573,7.89503,-171.573,5.54001 L-171.573,-4.12162 Q-171.573,-6.47664,-169.218,-6.47664 Z" /> <path android:fillColor="#2cb71a" android:fillAlpha="0.48387098" android:strokeAlpha="0.48387098" android:strokeWidth="2.41540718" android:strokeLineJoin="round" android:pathData="M-173.866,-7.92172 L-173.866,-7.92172 Q-171.511,-7.92172,-171.511,-5.5667 L-171.511,4.09493 Q-171.511,6.44995,-173.866,6.44995 L-173.866,6.44995 Q-176.221,6.44995,-176.221,4.09493 L-176.221,-5.5667 Q-176.221,-7.92172,-173.866,-7.92172 Z" /> <path android:fillColor="#2cb71a" android:fillAlpha="0.98999999" android:strokeAlpha="0.98999999" android:strokeWidth="2.41540718" android:strokeLineJoin="round" android:pathData="M-107.292,124.489 L-107.292,124.489 Q-104.937,124.489,-104.937,126.844 L-104.937,136.505 Q-104.937,138.86,-107.292,138.86 L-107.292,138.86 Q-109.647,138.86,-109.647,136.505 L-109.647,126.844 Q-109.647,124.489,-107.292,124.489 Z" /> <path android:fillColor="#2cb71a" android:strokeWidth="2.52457666" android:strokeLineJoin="round" android:pathData="M-70.6076,172.683 L-71.0429,172.683 Q-68.4702,172.683,-68.4702,175.256 L-68.4702,185.811 Q-68.4702,188.383,-71.0429,188.383 L-70.6076,188.383 Q-73.1803,188.383,-73.1803,185.811 L-73.1803,175.256 Q-73.1803,172.683,-70.6076,172.683 Z" /> <path android:fillColor="#2cb71a" android:strokeWidth="2.52457666" android:strokeLineJoin="round" android:pathData="M19.419,-211.623 L18.9836,-211.623 Q21.5563,-211.623,21.5563,-209.051 L21.5563,-198.496 Q21.5563,-195.923,18.9836,-195.923 L19.419,-195.923 Q16.8462,-195.923,16.8462,-198.496 L16.8462,-209.051 Q16.8462,-211.623,19.419,-211.623 Z" /> <path android:fillColor="#2cb71a" android:strokeWidth="2.52457666" android:strokeLineJoin="round" android:pathData="M-83.4017,169.639 L-83.8371,169.639 Q-81.2644,169.639,-81.2644,172.212 L-81.2644,182.766 Q-81.2644,185.339,-83.8371,185.339 L-83.4017,185.339 Q-85.9744,185.339,-85.9744,182.766 L-85.9744,172.212 Q-85.9744,169.639,-83.4017,169.639 Z" /> <path android:fillColor="#2cb71a" android:strokeWidth="2.52457666" android:strokeLineJoin="round" android:pathData="M-133.339,-163.758 L-133.774,-163.758 Q-131.202,-163.758,-131.202,-161.186 L-131.202,-150.631 Q-131.202,-148.058,-133.774,-148.058 L-133.339,-148.058 Q-135.912,-148.058,-135.912,-150.631 L-135.912,-161.186 Q-135.912,-163.758,-133.339,-163.758 Z" /> <path android:fillType="evenOdd" android:strokeColor="#000000" android:strokeWidth="0.12077035" android:pathData="M-71.2256,158.659 C-68.039,153.392,-64.1607,154.191,-64.0522,154.218" /> <path android:fillType="evenOdd" android:strokeColor="#000000" android:strokeWidth="0.12077035" android:pathData="M-68.8345,158.232 C-67.756,156.715,-66.4003,155.521,-63.9668,155.585" /> <path android:fillColor="#2cb71a" android:strokeWidth="2.42433643" android:strokeLineJoin="round" android:pathData="M-179.123,159.942 C-181.165,159.946,-183.173,160.725,-184.698,162.189 L-184.578,162.189 C-184.411,162.189,-184.276,162.324,-184.276,162.491 L-184.276,186.524 C-184.276,186.598,-184.304,186.665,-184.347,186.717 C-182.371,186.293,-180.55,185.131,-179.329,183.313 L-172.19,172.687 C-169.69,168.966,-170.673,163.958,-174.394,161.458 L-174.595,161.323 C-175.99,160.386,-177.567,159.938,-179.124,159.941 Z M-187.12,186.827 C-186.402,186.924,-185.678,186.922,-184.968,186.827 Z" /> <path android:fillColor="#2cb71a" android:strokeWidth="2.41540718" android:strokeLineJoin="round" android:pathData="M-168.567,153.011 C-165.699,153.011,-163.374,155.336,-163.374,158.204 C-163.374,161.072,-165.699,163.397,-168.567,163.397 C-171.435,163.397,-173.76,161.072,-173.76,158.204 C-173.76,155.336,-171.435,153.011,-168.567,153.011 Z" /> <path android:fillColor="#ff0000" android:strokeColor="#ffcc00" android:strokeWidth="0.26458332" android:pathData="M-228.855,129 L-227.806,129 L-227.806,130.313 L-228.855,130.313 Z M-228.855,122.597 L-227.806,122.597 L-227.806,125.982 L-227.909,127.827 L-228.746,127.827 L-228.855,125.982 Z" /> <path android:fillColor="#ff0000" android:strokeColor="#ffcc00" android:strokeWidth="0.26458332" android:pathData="M-228.855,129 L-227.806,129 L-227.806,130.313 L-228.855,130.313 Z M-228.855,122.597 L-227.806,122.597 L-227.806,125.982 L-227.909,127.827 L-228.746,127.827 L-228.855,125.982 Z" /> <path android:fillColor="#ff0000" android:strokeColor="#ffcc00" android:strokeWidth="0.26458332" android:pathData="M-228.855,129 L-227.806,129 L-227.806,130.313 L-228.855,130.313 Z M-228.855,122.597 L-227.806,122.597 L-227.806,125.982 L-227.909,127.827 L-228.746,127.827 L-228.855,125.982 Z" /> </vector> Are there any tips one would be willing to give to help with trouble shooting? Is there anything I could do in inkcape to ensure the file renders in Android Studio?
Looks like it is not well formed, there are lots of negative coords. Check it out without negative coordinates and bigger dimens: <?xml version="1.0" encoding="utf-8"?> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="240dp" android:height="100dp" android:viewportWidth="400" android:viewportHeight="200"> <path android:pathData="M185.37,134.151 L0.63217,134.151 L0.63217,213.584 L185.37,213.584 L185.37,134.151 Z" android:strokeWidth="2.05815887" android:strokeColor="#2cb71a" android:strokeLineJoin="round" /> <path android:fillColor="#2cb71a" android:pathData="M34.9949,145.281 C32.1268,145.281,29.8018,147.606,29.8018,150.475 C29.8018,153.343,32.1268,155.668,34.9949,155.668 C37.863,155.668,40.188,153.343,40.188,150.475 C40.188,147.606,37.863,145.281,34.9949,145.281 Z" android:strokeWidth="2.41540718" android:strokeLineJoin="round" /> <path android:fillColor="#2cb71a" android:pathData="M35.1156,156.996 L34.8741,156.996 Q26.7825,156.996,26.7825,165.088 L26.7825,177.889 Q26.7825,185.981,34.8741,185.981 L 35.1156,185.981 Q 43.2073,185.981, 43.2073,177.889 L 43.2073,165.088 Q43.2073,156.996,35.1156,156.996 Z" android:strokeWidth="2.42433667" android:strokeLineJoin="round" /> <path android:fillColor="#2cb71a" android:pathData="M104.59,121.139 L104.59,121.139 Q102.235,121.139,102.235,123.494 L102.235,133.155 Q102.235,135.51,104.59,135.51 L104.59,135.51 Q 106.945,135.51,106.945,133.155 L106.945,123.494 Q106.945,121.139,104.59,121.139 Z" android:strokeWidth="2.41540718" android:strokeLineJoin="round" /> <path android:fillColor="#2cb71a" android:pathData="M128.593,104.735 L128.593,104.735 Q130.948,104.735,130.948,107.09 L130.948,116.752 Q130.948,119.107,128.593,119.107 L128.593,119.107 Q126.238,119.107,126.238,116.752 L126.238,107.09 Q126.238,104.735,128.593,104.735 Z" android:strokeWidth="2.41540718" android:strokeLineJoin="round" /> <path android:fillColor="#2cb71a" android:pathData="M169.218,6.47664 L169.218,6.47664 Q166.863,6.47664,166.863,4.12162 L166.863,5.54001 Q166.863,7.89503,169.218,7.89503 L169.218,7.89503 Q171.573,7.89503,171.573,5.54001 L171.573,4.12162 Q171.573,6.47664,169.218,6.47664 Z" android:strokeWidth="2.41540718" android:strokeLineJoin="round" /> <path android:fillAlpha="0.48387098" android:fillColor="#2cb71a" android:pathData="M173.866, 7.92172 L 173.866, 7.92172 Q 171.511, 7.92172, 171.511, 5.5667 L 171.511,4.09493 Q 171.511,6.44995, 173.866,6.44995 L 173.866,6.44995 Q 176.221,6.44995, 176.221,4.09493 L 176.221, 5.5667 Q 176.221, 7.92172, 173.866, 7.92172 Z" android:strokeWidth="2.41540718" android:strokeAlpha="0.48387098" android:strokeLineJoin="round" /> <path android:fillAlpha="0.98999999" android:fillColor="#2cb71a" android:pathData="M107.292,124.489 L 107.292,124.489 Q 104.937,124.489, 104.937,126.844 L 104.937,136.505 Q 104.937,138.86, 107.292,138.86 L 107.292,138.86 Q 109.647,138.86, 109.647,136.505 L 109.647,126.844 Q 109.647,124.489, 107.292,124.489 Z" android:strokeWidth="2.41540718" android:strokeAlpha="0.98999999" android:strokeLineJoin="round" /> <path android:fillColor="#2cb71a" android:pathData="M70.6076,172.683 L 71.0429,172.683 Q 68.4702,172.683, 68.4702,175.256 L 68.4702,185.811 Q 68.4702,188.383, 71.0429,188.383 L 70.6076,188.383 Q 73.1803,188.383, 73.1803,185.811 L 73.1803,175.256 Q 73.1803,172.683, 70.6076,172.683 Z" android:strokeWidth="2.52457666" android:strokeLineJoin="round" /> <path android:fillColor="#2cb71a" android:pathData="M19.419, 211.623 L18.9836, 211.623 Q21.5563, 211.623,21.5563, 209.051 L21.5563, 198.496 Q21.5563, 195.923,18.9836, 195.923 L19.419, 195.923 Q16.8462, 195.923,16.8462, 198.496 L16.8462, 209.051 Q16.8462, 211.623,19.419, 211.623 Z" android:strokeWidth="2.52457666" android:strokeLineJoin="round" /> <path android:fillColor="#2cb71a" android:pathData="M83.4017,169.639 L 83.8371,169.639 Q 81.2644,169.639, 81.2644,172.212 L 81.2644,182.766 Q 81.2644,185.339, 83.8371,185.339 L 83.4017,185.339 Q 85.9744,185.339, 85.9744,182.766 L 85.9744,172.212 Q 85.9744,169.639, 83.4017,169.639 Z" android:strokeWidth="2.52457666" android:strokeLineJoin="round" /> <path android:fillColor="#2cb71a" android:pathData="M133.339, 163.758 L 133.774, 163.758 Q 131.202, 163.758, 131.202, 161.186 L 131.202, 150.631 Q 131.202, 148.058, 133.774, 148.058 L 133.339, 148.058 Q 135.912, 148.058, 135.912, 150.631 L 135.912, 161.186 Q 135.912, 163.758, 133.339, 163.758 Z" android:strokeWidth="2.52457666" android:strokeLineJoin="round" /> <path android:fillType="evenOdd" android:pathData="M71.2256,158.659 C 68.039,153.392, 64.1607,154.191, 64.0522,154.218" android:strokeWidth="0.12077035" android:strokeColor="#000000" /> <path android:fillType="evenOdd" android:pathData="M68.8345,158.232 C 67.756,156.715, 66.4003,155.521, 63.9668,155.585" android:strokeWidth="0.12077035" android:strokeColor="#000000" /> <path android:fillColor="#2cb71a" android:pathData="M179.123,159.942 C 181.165,159.946, 183.173,160.725, 184.698,162.189 L 184.578,162.189 C 184.411,162.189, 184.276,162.324, 184.276,162.491 L 184.276,186.524 C 184.276,186.598, 184.304,186.665, 184.347,186.717 C 182.371,186.293, 180.55,185.131, 179.329,183.313 L 172.19,172.687 C 169.69,168.966, 170.673,163.958, 174.394,161.458 L 174.595,161.323 C 175.99,160.386, 177.567,159.938, 179.124,159.941 Z M 187.12,186.827 C 186.402,186.924, 185.678,186.922, 184.968,186.827 Z" android:strokeWidth="2.42433643" android:strokeLineJoin="round" /> <path android:fillColor="#2cb71a" android:pathData="M168.567,153.011 C 165.699,153.011, 163.374,155.336, 163.374,158.204 C 163.374,161.072, 165.699,163.397, 168.567,163.397 C 171.435,163.397, 173.76,161.072, 173.76,158.204 C 173.76,155.336, 171.435,153.011, 168.567,153.011 Z" android:strokeWidth="2.41540718" android:strokeLineJoin="round" /> <path android:fillColor="#ff0000" android:pathData="M228.855,129 L 227.806,129 L 227.806,130.313 L 228.855,130.313 Z M 228.855,122.597 L 227.806,122.597 L 227.806,125.982 L 227.909,127.827 L 228.746,127.827 L 228.855,125.982 Z" android:strokeWidth="0.26458332" android:strokeColor="#ffcc00" /> <path android:fillColor="#ff0000" android:pathData="M228.855,129 L227.806,129 L 227.806,130.313 L 228.855,130.313 Z M 228.855,122.597 L 227.806,122.597 L 227.806,125.982 L 227.909,127.827 L 228.746,127.827 L 228.855,125.982 Z" android:strokeWidth="0.26458332" android:strokeColor="#ffcc00" /> <path android:fillColor="#ff0000" android:pathData="M228.855,129 L227.806,129 L227.806,130.313 L228.855,130.313 Z M228.855,122.597 L227.806,122.597 L227.806,125.982 L227.909,127.827 L228.746,127.827 L228.855,125.982 Z" android:strokeWidth="0.26458332" android:strokeColor="#ffcc00" /> </vector> This is what I can see now: img
Vector drawable InflateException
I have the vector drawable file(start on emulator API version 25): <?xml version="1.0" encoding="utf-8"?> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="500dp" android:height="500dp" android:viewportWidth="500" android:viewportHeight="500"> <path android:fillColor="#FFFFFF" android:strokeColor="#000000" android:strokeWidth="6" android:strokeMiterLimit="10" android:pathData="M 254.9 162.9 C 293.836074863 162.9 325.4 194.463925137 325.4 233.4 C 325.4 272.336074863 293.836074863 303.9 254.9 303.9 C 215.963925137 303.9 184.4 272.336074863 184.4 233.4 C 184.4 194.463925137 215.963925137 162.9 254.9 162.9 Z" /> <path android:fillColor="#000000" android:pathData="M 231 204.3 C 240.223155322 204.3 247.7 211.776844678 247.7 221 C 247.7 230.223155322 240.223155322 237.7 231 237.7 C 221.776844678 237.7 214.3 230.223155322 214.3 221 C 214.3 211.776844678 221.776844678 204.3 231 204.3 Z" /> <path android:fillColor="#000000" android:pathData="M 279 204.3 C 288.223155322 204.3 295.7 211.776844678 295.7 221 C 295.7 230.223155322 288.223155322 237.7 279 237.7 C 269.776844678 237.7 262.3 230.223155322 262.3 221 C 262.3 211.776844678 269.776844678 204.3 279 204.3 Z" /> <path android:fillColor="#FFFFFF" android:pathData="M 279 207.2 C 283.694420374 207.2 287.5 213.691871127 287.5 221.7 C 287.5 229.708128873 283.694420374 236.2 279 236.2 C 274.305579626 236.2 270.5 229.708128873 270.5 221.7 C 270.5 213.691871127 274.305579626 207.2 279 207.2 Z" /> <path android:fillColor="#FFFFFF" android:pathData="M 231 213.2 C 239.008128873 213.2 245.5 217.005579626 245.5 221.7 C 245.5 226.394420374 239.008128873 230.2 231 230.2 C 222.991871127 230.2 216.5 226.394420374 216.5 221.7 C 216.5 217.005579626 222.991871127 213.2 231 213.2 Z" /> <path android:fillColor="#000000" android:pathData="M 231.3 221.1 C 235.552592574 221.1 239 224.547407426 239 228.8 C 239 233.052592574 235.552592574 236.5 231.3 236.5 C 227.047407426 236.5 223.6 233.052592574 223.6 228.8 C 223.6 224.547407426 227.047407426 221.1 231.3 221.1 Z" /> <path android:fillColor="#000000" android:pathData="M 277.2 221.7 C 281.452592574 221.7 284.9 225.147407426 284.9 229.4 C 284.9 233.652592574 281.452592574 237.1 277.2 237.1 C 272.947407426 237.1 269.5 233.652592574 269.5 229.4 C 269.5 225.147407426 272.947407426 221.7 277.2 221.7 Z" /> <path android:fillColor="#000000" android:pathData="M 254.9 237.7 C 263.073814297 237.7 269.7 249.564454129 269.7 264.2 C 269.7 278.835545871 263.073814297 290.7 254.9 290.7 C 246.726185703 290.7 240.1 278.835545871 240.1 264.2 C 240.1 249.564454129 246.726185703 237.7 254.9 237.7 Z" /> </vector> I added the file to ImageView <ImageView android:id="#+id/authorization_icon" android:layout_width="120dp" android:layout_height="120dp" android:layout_gravity="center_horizontal" android:layout_marginTop="#dimen/authorization_icon_margin" android:layout_marginBottom="#dimen/authorization_icon_margin" app:srcCompat="#drawable/rocketv"/> And when I tried to inflate layout setContentView(R.layout.activity_auth); I caught the error: android.view.InflateException: Binary XML file line #0: Error inflating class ImageView But Android studio defines my picture without any problems. I can see it in activity_auth layout.
Solution 1:
For using VectorDrawable from java or to use it as background (in xml also) you need to intimate AppCompatDelegate to enable compat vector from resource. Below is the code for that.
static
{
AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
}
So define it this way
public class MainActivity extends AppCompatActivity {
static {
AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
}
upper side of OnCreate Method.
Solution 2 :
Whenever you are going to use VectorDrawable from java or to use it as background (in xml also) remember to use AppCompatView instead of normal view, here I have used AppCompatImageView
try like below. replace app:srcCompat="#drawable/rocketv" with android:src="#drawable/rocketv" <ImageView android:id="#+id/authorization_icon" android:layout_width="120dp" android:layout_height="120dp" android:layout_gravity="center_horizontal" android:layout_marginTop="#dimen/authorization_icon_margin" android:layout_marginBottom="#dimen/authorization_icon_margin" android:src="#drawable/rocketv"/>
SVG looks strange on mobile browsers
Here's a PNG version of my logo image: Here's a screenshot of an SVG version of my logo as seen on a PC: Here's a screenshot of how that same SVG logo looks on an iPhone and an android phone: What's going on? Why does the mobile version look so blurred and the gradient not work on the pink petal? Here's the actual SVG code. (For some reason, the font doesn't load in the snippet code but it loads just fine from my website: http://www.cafenocturne.com/testpage/images/svg/CafeLogoFontSVG.svg <?xml version="1.0" encoding="UTF-8" ?> <?xml-stylesheet type="text/css" href="http://www.cafenocturne.com/fonts/FontPorcelain.css" ?> <svg width="300px" height="300px" viewBox="-50 0 447 466" preserveAspectRatio="xMinYMin meet" style="overflow: visible" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g id="logo"> <g id="petal"> <defs> <radialGradient id="gradpetal" gradientUnits="userSpaceOnUse" cx="8rem" cy="14.5rem"> <stop stop-color="#ffdcfd" offset=".01" /> <stop stop-color="#ff94dd" offset="0.15" /> <stop stop-color="#ff92dd" offset="0.17" /> <stop stop-color="#feadef" offset=".32" /> <stop stop-color="#fec3ff" offset=".49" /> <stop stop-color="#fec3ff" offset=".55" /> <stop stop-color="#ff94dd" offset=".85" /> <stop stop-color="#ff94dd" offset="1" /> </radialGradient> </defs> <path id="svgpetal" fill="url(#gradpetal)" stroke="url(#gradpetal)" stroke-width="2px" filter="url(#dropshadow)" d=" M 238.54 53.89 C 246.99 52.67 255.63 52.63 264.04 54.18 C 266.61 54.66 269.01 56.33 269.99 58.80 C 273.60 68.31 270.50 78.82 273.54 88.44 C 274.39 91.28 276.62 93.61 279.36 94.71 C 288.28 98.60 298.56 96.58 307.45 100.58 C 310.41 101.97 312.32 105.01 312.36 108.28 C 314.10 131.28 305.41 153.92 292.57 172.66 C 283.39 185.84 272.24 197.87 258.68 206.66 C 236.86 220.77 210.61 226.11 184.96 227.17 C 174.33 227.35 163.68 228.06 153.07 227.17 C 146.99 226.56 140.17 224.70 136.60 219.33 C 131.70 210.74 131.82 200.46 132.27 190.89 C 133.16 171.85 134.93 152.54 141.46 134.50 C 147.98 115.64 159.29 98.46 174.28 85.27 C 192.18 69.14 214.50 57.22 238.54 53.89 Z" /> <defs> <radialGradient id="gradspine" gradientUnits="userSpaceOnUse" cx="8rem" cy="14.5rem"> <stop stop-color="#fe9bee" offset=".15" /> <stop stop-color="#fec3ff" offset=".20" /> <stop stop-color="#fec3ff" offset=".32" /> <stop stop-color="#feadef" offset=".39" /> <stop stop-color="#ff92dd" offset="0.45" /> <stop stop-color="#ff94dd" offset="0.5" /> <stop stop-color="#ffdcfd" offset="1" /> </radialGradient> </defs> <path id="svgspine" fill="url(#gradspine)" d=" M 273.33 92.20 C 273.84 92.35 274.88 92.65 275.39 92.80 C 271.04 106.15 262.39 117.73 252.21 127.23 C 245.23 134.25 238.16 141.26 230.01 146.95 C 220.43 154.24 209.84 159.99 199.02 165.20 C 191.88 168.52 186.16 174.09 180.76 179.69 C 173.54 187.94 168.46 197.87 160.80 205.75 C 154.38 212.01 146.82 216.96 139.02 221.31 C 137.69 220.37 137.65 219.57 138.90 218.94 C 143.54 216.35 148.01 213.49 152.21 210.23 C 163.70 202.21 170.01 189.31 178.67 178.68 C 184.55 172.81 190.49 166.69 198.11 163.10 C 213.73 155.96 228.45 146.73 241.11 135.10 C 245.70 130.69 250.19 126.18 254.78 121.78 C 262.78 113.26 269.72 103.41 273.33 92.20 Z" /> </g> <path id="svgmoon" fill="#FFFFFF" stroke="#000000" filter="url(#dropshadow)" d=" M 125.71 4.83 C 132.21 2.77 139.01 1.97 145.66 0.59 C 133.00 9.73 120.78 19.62 110.14 31.11 C 95.76 46.55 84.01 64.51 76.14 84.11 C 58.65 127.32 60.32 176.94 76.88 220.16 C 82.95 234.74 89.81 249.48 101.01 260.89 C 110.02 269.31 119.13 277.77 129.66 284.30 C 148.41 296.68 169.88 304.84 192.02 308.51 C 216.22 312.44 241.09 311.13 265.04 306.14 C 286.12 301.57 306.41 293.94 325.81 284.60 C 332.75 280.95 339.69 277.31 346.63 273.65 C 338.54 285.17 330.90 297.05 321.77 307.80 C 309.52 322.73 294.55 335.51 277.40 344.48 C 247.85 359.93 213.98 364.68 181.02 365.43 C 146.84 365.46 112.77 355.39 83.93 337.08 C 54.54 318.15 30.44 290.79 16.33 258.74 C 7.91 239.92 2.64 219.67 0.89 199.12 C 0.42 190.44 0.54 181.74 0.82 173.06 C 3.04 133.90 17.63 95.66 41.68 64.69 C 63.28 37.42 92.09 14.92 125.71 4.83 Z" /> <g id="text"> <text style="font-family: PorcelainRegular; font-size: 65px; stroke: #000000; fill: #ffffff; overflow: visible; filter: url(#dropshadow);"> <tspan x="0" y="0">`</tspan> <tspan x="70" y="120">Cafe</tspan> <tspan x="-30" y="290">Nocturne</tspan> </text> </g> <defs> <filter id="dropshadow" width="250px" height="250px"> <feOffset result="offOut" in="SourceAlpha" dx="3" dy="3" /> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> </defs> </g> </svg>