3

I know that the foreground and background layers should both be 108dp by 108dp. But as you can see in the image its not displayed correctly (icon next to the YouTube icon)

enter image description here

I'm not sure what I'm doing wrong.

Here is the forground layer

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

<path android:fillColor="#515262" android:pathData="M265.3,2.6c-5.7,-3.5 -12.8,-3.5 -18.6,0C202.7,29.5 17.7,150.6 17.7,289.7c0,72.3 58.5,130.9 130.7,130.9c23.6,0 45.8,-6.3 64.9,-17.3c5.5,-3.2 11.9,2.4 9.7,8.4c-10.2,28.4 -24.6,54.8 -42.6,78.2c-6.8,9 -0.3,22 10.9,22h130.7c11.2,0 17.8,-13 10.9,-22c-17.7,-23.2 -32,-49.2 -42.2,-77.3c-2.2,-6 4.2,-11.5 9.7,-8.5c18.7,10.4 40.3,16.4 63.2,16.4c72.2,0 130.7,-58.6 130.7,-130.9C494.3,150.6 309.3,29.5 265.3,2.6z"/>
<path android:fillColor="#464655" android:pathData="M202,409c-146.8,-81.3 -8.9,-325.2 55.3,-408.9c-3.6,-0.3 -7.3,0.5 -10.6,2.5C202.7,29.5 17.7,150.6 17.7,289.7c0,72.3 58.5,130.9 130.7,130.9C167.5,420.6 185.6,416.5 202,409z"/>
<path android:fillColor="#464655" android:pathData="M231.4,492.9c8.5,-70.3 8.1,-90.3 -13.5,-90.3c3.8,0.8 6.7,4.8 5.2,9.1c-10.2,28.4 -24.6,54.8 -42.6,78.2c-6.8,9 -0.3,22 10.9,22h49.4C230.9,512 230.5,499.9 231.4,492.9z"/>
</vector>

and the background layer which is a white square

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="108dp"
android:height="108dp"
android:viewportHeight="108"
android:viewportWidth="108">
<path
    android:fillColor="#FFF"
    android:pathData="M0,0h108v108h-108z" />

</vector>
unknown1
  • 357
  • 1
  • 4
  • 10

1 Answers1

13

Per the Designing Adaptive Icons blog post:

Adaptive icons are 108dp*108dp in size but are masked to a maximum of 72dp*72dp. Different devices can supply different masks which must be convex in shape and may reach a minimum of 33dp from the center in places.

Because of the minimum reach of the mask, you can consider a centered 66dp diameter circle as a safe zone, guaranteed not to be clipped.

Your vector icon is using the entire 108x108dp size, rather than only the safe 66x66dp zone in the middle. Therefore what you are seeing is just the center of your icon (those two little white spots are actually the background peeking through).

You should resize your vector asset to fit into the safe zone. One way to do this is to increase the viewportHeight and viewportWidth, then put your paths into a <group> that uses android:translateX and android:translateY to recenter the vector in the larger viewport:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:width="108dp"
  android:height="108dp"
  android:viewportHeight="1024"
  android:viewportWidth="1024">
  <group
    android:translateX="256"
    android:translateY="256">
    <path android:fillColor="#515262" android:pathData="M265.3,2.6c-5.7,-3.5 -12.8,-3.5 -18.6,0C202.7,29.5 17.7,150.6 17.7,289.7c0,72.3 58.5,130.9 130.7,130.9c23.6,0 45.8,-6.3 64.9,-17.3c5.5,-3.2 11.9,2.4 9.7,8.4c-10.2,28.4 -24.6,54.8 -42.6,78.2c-6.8,9 -0.3,22 10.9,22h130.7c11.2,0 17.8,-13 10.9,-22c-17.7,-23.2 -32,-49.2 -42.2,-77.3c-2.2,-6 4.2,-11.5 9.7,-8.5c18.7,10.4 40.3,16.4 63.2,16.4c72.2,0 130.7,-58.6 130.7,-130.9C494.3,150.6 309.3,29.5 265.3,2.6z"/>
    <path android:fillColor="#464655" android:pathData="M202,409c-146.8,-81.3 -8.9,-325.2 55.3,-408.9c-3.6,-0.3 -7.3,0.5 -10.6,2.5C202.7,29.5 17.7,150.6 17.7,289.7c0,72.3 58.5,130.9 130.7,130.9C167.5,420.6 185.6,416.5 202,409z"/>
    <path android:fillColor="#464655" android:pathData="M231.4,492.9c8.5,-70.3 8.1,-90.3 -13.5,-90.3c3.8,0.8 6.7,4.8 5.2,9.1c-10.2,28.4 -24.6,54.8 -42.6,78.2c-6.8,9 -0.3,22 10.9,22h49.4C230.9,512 230.5,499.9 231.4,492.9z"/>
  </group>
</vector>

Or you can rewrite your paths manually.

ianhanniballake
  • 191,609
  • 30
  • 470
  • 443