VectorDrawable is not center aligned

Question

I\'ve created a VectorDrawable file with the path data i had. But the issue is that image is not aligning at the centre of the total area and instead it\'s created as top-left a

Answer 1

You are specifying that your vector is 24x24, but the path is not that big. If we actually check its dimensions, its bounding box coords are:

     x: -0.034
     y: -0.033
 width: 13.369
height: 13.032

So it's only occuping a roughly 13x13 area at the top left.

You have several options to fix this depending on what your desired outcome is.

Solution 1

If you want the icon to be scaled up to occupy the whole of your 24x24 icon area, then changing the viewportWidth and viewportHeight to something more appropriate should work.

What I've done here by altering the viewport is to tell Android that the actual content of the VectorDrawable is in the area from (0,0) to (13.4,13.1). That's not exact, but it is probably close enough. Android should scale everything in that area up to fill the 24x24 icon area.

Solution 2

The other solution is to shift the path into the centre of the 24x24 viewport. You can do that with the VectorDrawable tag.

We need to apply a translation to the path that moves that path so it is centred.

The centre of the path now is at:

x = -0.034 + 13.369/2
  = 6.651
y = -0.033 + 13.032/2
  = 6.483

We want that to be moved to 12,12. So we wrap the path in a group that with translateX and translateY values of the appropriate amount.

We need to shift right along the X axis by (12 - 6.651) = 5.349, and we need to shift down by (12 - 6.483) = 5.517.

Of course you also have the option of combining these two approaches. Or adding a scale to the group as well if you need the cross not only be shifted, but enlarged a bit as well.