How to format/size VectorDrawable for adaptive icon in android

Question

I am trying to create an adaptive icon for an app using two VectorDrawables for background and foreground. However the foreground vector, which was created from an svg made in Illustrator, cannot be sized or placed properly in the icon.

Foreground vector for future reference

I sized the vector viewportheight and viewportwidth to 108dp x 108dp according to the specification in the Adaptive icon guidelines, however this has only caused the foreground to be offset.

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

    ...

</vector>

However when the viewportheight and viewportwidth are set to smaller values (eg. 50) the vector appears in the correct position but is too large.

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

    ...

</vector>

I am new to working with android and so I am not sure what other factors may be causing this. There was a another similar question however the cause for the offsetting effect was not addressed.

Answer 1

Wanting to minimize my app size I attempted using the same vector for a notification as well as the icon and hit exactly the same problem.

I tried the "wizard":

• Right-click the res folder and click New > Image Asset

This then lets me scale my vector on top of the background vector, but centered.

Looking at the generated vector files for the icon it nests my vector path inside a group tag with translateX and translateY attributes, like this:

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

<group android:translateX="14.086957"
  android:translateY="14.086957">

    <path.../>

  </group>
</vector>

Try that directly in your xml if you want to avoid generating files, and deleting the generated png files afterwards etc.

---

That may work for you - in my case I can't use the new icon foreground vector as a notification as it is too small. So I appear to need copies of my scalable vector graphic with different sizes!

It would be ideal if we could scale the foreground/background parts of an adaptive icon in the adaptive icon file itself - perhaps somebody knows how to do that already?