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 aligned. Have a look:

The file:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">

    <path
        android:fillColor="@android:color/white"
        android:pathData="M7.144375,6.49965789 L13.196575,0.583973684 C13.333075,0.450552632 13.333075,0.233657895 13.196575,0.0995526316 C13.060075,-0.0331842105 12.838175,-0.0331842105 12.701675,0.0995526316 L6.649475,6.01592105 L0.596575,0.0995526316 C0.460775,-0.0331842105 0.238875,-0.0331842105 0.102375,0.0995526316 C-0.034125,0.233657895 -0.034125,0.450552632 0.102375,0.583973684 L6.154575,6.49965789 L0.102375,12.4153421 C-0.034125,12.5487632 -0.034125,12.7656579 0.102375,12.8997632 C0.170975,12.9661316 0.260575,12.9989737 0.350175,12.9989737 C0.439775,12.9989737 0.529375,12.9654474 0.597975,12.8997632 L6.650175,6.98339474 L12.702375,12.8997632 C12.770975,12.9661316 12.860575,12.9989737 12.950175,12.9989737 C13.039775,12.9989737 13.129375,12.9654474 13.197975,12.8997632 C13.334475,12.7656579 13.334475,12.5487632 13.197975,12.4153421 L7.145775,6.49965789 L7.144375,6.49965789 Z" />

</vector>

Now check how it actually looks when using as app:srcCompat for imageView.

Is there any way to resolve this as i don't have much experience with VectorDrawables?

Any kind of help would be appreciated.

EDIT: This is how i used the vector drawable.

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/close_button"/>

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

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="13.4"
    android:viewportWidth="13.1">

    <path
        android:fillColor="@android:color/white"
        android:pathData="M7.144375,6.49965789 L13.196575,0.583973684 C13.333075,0.450552632 13.333075,0.233657895 13.196575,0.0995526316 C13.060075,-0.0331842105 12.838175,-0.0331842105 12.701675,0.0995526316 L6.649475,6.01592105 L0.596575,0.0995526316 C0.460775,-0.0331842105 0.238875,-0.0331842105 0.102375,0.0995526316 C-0.034125,0.233657895 -0.034125,0.450552632 0.102375,0.583973684 L6.154575,6.49965789 L0.102375,12.4153421 C-0.034125,12.5487632 -0.034125,12.7656579 0.102375,12.8997632 C0.170975,12.9661316 0.260575,12.9989737 0.350175,12.9989737 C0.439775,12.9989737 0.529375,12.9654474 0.597975,12.8997632 L6.650175,6.98339474 L12.702375,12.8997632 C12.770975,12.9661316 12.860575,12.9989737 12.950175,12.9989737 C13.039775,12.9989737 13.129375,12.9654474 13.197975,12.8997632 C13.334475,12.7656579 13.334475,12.5487632 13.197975,12.4153421 L7.145775,6.49965789 L7.144375,6.49965789 Z" />

</vector>

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

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24"
    android:viewportWidth="24">

    <group translateX="5.349" translateY="5.517"> 
        <path
            android:fillColor="@android:color/white"
            android:pathData="M7.144375,6.49965789 L13.196575,0.583973684 C13.333075,0.450552632 13.333075,0.233657895 13.196575,0.0995526316 C13.060075,-0.0331842105 12.838175,-0.0331842105 12.701675,0.0995526316 L6.649475,6.01592105 L0.596575,0.0995526316 C0.460775,-0.0331842105 0.238875,-0.0331842105 0.102375,0.0995526316 C-0.034125,0.233657895 -0.034125,0.450552632 0.102375,0.583973684 L6.154575,6.49965789 L0.102375,12.4153421 C-0.034125,12.5487632 -0.034125,12.7656579 0.102375,12.8997632 C0.170975,12.9661316 0.260575,12.9989737 0.350175,12.9989737 C0.439775,12.9989737 0.529375,12.9654474 0.597975,12.8997632 L6.650175,6.98339474 L12.702375,12.8997632 C12.770975,12.9661316 12.860575,12.9989737 12.950175,12.9989737 C13.039775,12.9989737 13.129375,12.9654474 13.197975,12.8997632 C13.334475,12.7656579 13.334475,12.5487632 13.197975,12.4153421 L7.145775,6.49965789 L7.144375,6.49965789 Z" />
    </group>
</vector>

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.

Solution 2

<group
    android:pivotX="12"
    android:pivotY="12"
    android:scaleX="0.75"
    android:scaleY="0.75">

<path
    android:fillColor="@android:color/white"
    android:pathData="M7.144375,6.49965789 L13.196575,0.583973684 C13.333075,0.450552632 13.333075,0.233657895 13.196575,0.0995526316 C13.060075,-0.0331842105 12.838175,-0.0331842105 12.701675,0.0995526316 L6.649475,6.01592105 L0.596575,0.0995526316 C0.460775,-0.0331842105 0.238875,-0.0331842105 0.102375,0.0995526316 C-0.034125,0.233657895 -0.034125,0.450552632 0.102375,0.583973684 L6.154575,6.49965789 L0.102375,12.4153421 C-0.034125,12.5487632 -0.034125,12.7656579 0.102375,12.8997632 C0.170975,12.9661316 0.260575,12.9989737 0.350175,12.9989737 C0.439775,12.9989737 0.529375,12.9654474 0.597975,12.8997632 L6.650175,6.98339474 L12.702375,12.8997632 C12.770975,12.9661316 12.860575,12.9989737 12.950175,12.9989737 C13.039775,12.9989737 13.129375,12.9654474 13.197975,12.8997632 C13.334475,12.7656579 13.334475,12.5487632 13.197975,12.4153421 L7.145775,6.49965789 L7.144375,6.49965789 Z" />
</group>

Focus on the Group tag, pivotX and pivotY will position the image, if viewportHeight and viewportWidth is 24 that means pivotX and pivotY 12 will place it in center because 24/2 is 12 :)

Another important tag, scaleX and scaleY will scale the size of your image.

Solution 3

Try this:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">

    <group
          android:name="randomname"
          android:pivotX="12.0"
          android:pivotY="12.0">

    <path
        android:fillColor="@android:color/white"
        android:pathData="M7.144375,6.49965789 L13.196575,0.583973684 C13.333075,0.450552632 13.333075,0.233657895 13.196575,0.0995526316 C13.060075,-0.0331842105 12.838175,-0.0331842105 12.701675,0.0995526316 L6.649475,6.01592105 L0.596575,0.0995526316 C0.460775,-0.0331842105 0.238875,-0.0331842105 0.102375,0.0995526316 C-0.034125,0.233657895 -0.034125,0.450552632 0.102375,0.583973684 L6.154575,6.49965789 L0.102375,12.4153421 C-0.034125,12.5487632 -0.034125,12.7656579 0.102375,12.8997632 C0.170975,12.9661316 0.260575,12.9989737 0.350175,12.9989737 C0.439775,12.9989737 0.529375,12.9654474 0.597975,12.8997632 L6.650175,6.98339474 L12.702375,12.8997632 C12.770975,12.9661316 12.860575,12.9989737 12.950175,12.9989737 C13.039775,12.9989737 13.129375,12.9654474 13.197975,12.8997632 C13.334475,12.7656579 13.334475,12.5487632 13.197975,12.4153421 L7.145775,6.49965789 L7.144375,6.49965789 Z" />
    </group>
</vector>

Or add layout_gravity="center" to your ImageView

Solution 4

I had the same issue. I just altered the width, height, viewportWidth, and viewportHeight to this:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24"
    android:viewportWidth="24">

<path
    android:fillColor="#FFFFFFFF"
    android:pathData="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z" />

</vector>

View more solutions

Comments

[Drilon Blakqori]

post your imageview code

[Phantômaxx]

I've created one SVG file NO. That's called a VectorDrawable, which is something else. Inspired by, but not equivalent to SVG files.

[KunalK]

Ok @Rotwang so eventually i've created VectorDrawable. What to do to make it center aligned?

[KunalK]

@DrilonBlakqori Please see the updated Question

[Phantômaxx]

Well.... what about setting android:gravity and/or android:layout_gravity in your ImageView?

[Drilon Blakqori]

actually my vector's do scale when putting in a bigger ImageView.. anyway try setting android:scaleType="fitCenter"

[Phantômaxx]

No, really, you don't want to edit the VectorDrawable itself. Just align its container View into the container layout.

[KunalK]

nop it's not working, i think it has something to do with the pathData.

[KunalK]

How to check the co-ordinates like you did, can you explain ?

[Paul LeBeau]

Just create a little SVG with the path. Then call getBBox() on the path element. jsfiddle.net/ckak2zr7/1

[Red M]

@PaulLeBeau Where did you get 13.369 and 13.032 from?

[Paul LeBeau]

@Red-M I already answered that question in the comments above yours.

[the_prole]

is translateX="5.349" in pixels or dp?

[Paul LeBeau]

@the_prole It's in the generic units that the VectorDrawable is using. If the VD is drawn at size 24 x 24dp, then it is effectively in dp. That's because it is being drawn at the same size as the viewport width/height. If it is drawn at, say double size (48 x 48dp), then the 5.349 will actually end up as 10.698dp.