Android Vector Asset Studio为一些矢量图像提供额外的填充

Question

I'm trying to import some icons from Material Vector package in Vector Asset Studio.

But they come with padding.

Why does this happen and how can I remove it?

This is inconvenient because this means if I want my icon to be 17dp x 17dp in XML, then I need to set it more than 17x17 to make up for the padding.

Answer 1

You are able to scale a vector that will remove additional space. This is possible using group tag. Just modify your vector xml file.

From

<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="#FF000000"
        android:pathData="M12,4l-1.41,1.41L16.17,11H4v2h12.17l-5.58,5.59L12,20l8,-8z" />
</vector>

to

<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:pivotX="12"
        android:pivotY="12"
        android:scaleX="1.5"
        android:scaleY="1.5">

        <path
            android:fillColor="#FF000000"
            android:pathData="M12,4l-1.41,1.41L16.17,11H4v2h12.17l-5.58,5.59L12,20l8,-8z" />
    </group>
</vector>

As result

Answer 2

You can adjust for any "implicit" padding that may be contained within a VectorDrawables source image ( .SVG , .PSD ) by setting your ImageViews android:scaleType to the appropriate value so it can handle the padding that is secretly contained in the VectorDrawables source image. You will also need to set android:adjustViewBounds="true" .

For example, lets say your VectorDrawable has some really annoying padding at the start of the image when you display it. You have no idea why it's there because you aren't setting any android:paddingStart on the ImageView ... what you need to do is set the ImageViews android:scaleType to fitStart and android:adjustViewBounds to true .

tl;dr

Adjust your ImageViews android:scaleType to handle any "implicit" padding that is contained in your VectorDrawable s source file ( .SVG , .PSD ). Also set android:adjustViewBounds="true" .

Quick Example:

<ImageView android:id="@+id/vectorDrawable_imageView"
           <!--Other ImageView settings-->
           android:adjustViewBounds="true"
           android:scaleType="fitStart"
           app:srcCompat="@drawable/vector_with_implicit_padding_at_start"
/>

This will remove that annoying "implicit" padding that was at the start of your VectorDrawable .

Note: Adjust the android:scaleType according to your rendering needs.

Answer 3

This padding is on some icons so that all of the icons can align properly. For example, if in that dialog, you pick ic_3d_rotation_24dp , you'll see the icon goes all the way to the edge of the bounds.

PS if you aim to have all your sizes be a multiple of 8dp , things will line up nicely and look great.

Answer 4

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="28"
    android:viewportHeight="28">
    <group
        android:translateX="2"
        android:translateY="2">
        <path
            android:fillColor="#8A333333"
            android:pathData="M13.12,2.06L7.58,7.6c-0.37,0.37 -0.58,0.88 -0.58,1.41V19c0,1.1 0.9,2 2,2h9c0.8,0 1.52,-0.48 1.84,-1.21l3.26,-7.61C23.94,10.2 22.49,8 20.34,8h-5.65l0.95,-4.58c0.1,-0.5 -0.05,-1.01 -0.41,-1.37 -0.59,-0.58 -1.53,-0.58 -2.11,0.01zM3,21c1.1,0 2,-0.9 2,-2v-8c0,-1.1 -0.9,-2 -2,-2s-2,0.9 -2,2v8c0,1.1 0.9,2 2,2z" />
    </group>
</vector>

android:viewportWidth += android:translateX * 2 (padding start / end)

android:viewportHeight += android:translateY * 2 (padding top / bottom)