Search code examples
androidxmlandroid-vectordrawable

Android Vector fillColor not working


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.


Solution

  • 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.