I want to fill this Vector in Android:
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="118.05486dp"
android:height="315.81244dp"
android:viewportWidth="118.05486"
android:viewportHeight="315.81244">
<group
android:translateX="59.027433"
android:translateY="-747.84646">
<path
android:fillColor="@color/colorPrimary"
android:strokeColor="#000000"
android:strokeWidth="1"
android:pathData="M 9.400849,1063.1651 58.533589,752.95315 M -9.400849,1063.1651
-58.533589,752.95315 m 117.067178,0 a 374.17323,374.17323 0 0 0 -117.067178,0 M
9.400849,1063.1651 a 60.094488,60.094488 0 0 0 -18.801698,0" />
</group>
</vector>
The Vector looks like this: Vector (The top- and bottom-side is rounded) The android:fillColor attribute is not working. Or is this only doable with a bitmap?
edit: To clarify my problem, here another picture: Vector The left side vector uses android:fillColor, which fills only a little bit on the top. The right side uses android:tint, which only colors the lines. What I want is to fill the whole vector.
The issue here is that the path describing the shape is a bit confusing, possibly due to the original graphics software used, the order things were drawn or some conversion process.
VectorDrawable
pathData is in the same format as SVG, detailed information about pathData can be found here.
If I break the pathData
into separate lines it will look a bit clearer (and is still totally valid, things will still run fine and it's easier to read)
android:pathData="M 9.400849,1063.1651 58.533589,752.95315
M -9.400849,1063.1651 -58.533589,752.95315
m 117.067178,0
a 374.17323,374.17323 0 0 0 -117.067178,0
M 9.400849,1063.1651
a 60.094488,60.094488 0 0 0 -18.801698,0"
The lines beginning 'M' or 'm' are moveto
commands; moving the pen to a different place on the screen.
The lines beginning 'a' are eliptical arcs, the curved lines.
So from this a couple of things stand out. There are no straight lines explicitly drawn in this path (straight line commands use 'L' or 'l').
There are a number of moveto
commands before any command to start drawing(basically saying "start here"..."actually no over here"..."no here!").
Ideally what we want is a shape which is a bit clearer and more deliberate, that starts at one point and draws all the way around until it gets to the end; the area we want to fill should be clearly defined.
android:pathData="M 58.533589,752.95315
a 374.17323,374.17323 0 0 0 -117.067178,0
L -9.400849,1063.1651
a -60.094488,60.094488 0 0 0 18.801698,0
L 58.533589,752.95315"
Comparing the two, you'll see mostly the same numbers. The same coordinates cleaned up and rearranged. Now describing moving to a starting point, then drawing an arc, a line, the other arc, then the other line. Using fillColor
should now be fine, the shape is just a simple, defined outline.