自适应图标无法正常显示

Question

我知道前景层和背景层都应该是108dp乘108dp.但正如您在图像中看到的那样,它无法正确显示(YouTube图标旁边的图标)

我不确定我做错了什么.

这是forground层

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

和背景层是白色方块

<?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>

Answer 1

根据Designing Adaptive Icons博客文章:

自适应图标的大小为108dp*108dp,但屏蔽最大为72dp*72dp.不同的装置可以提供不同的掩模,这些掩模必须是凸形的并且可以在某些位置从中心到达最小33dp.

由于面罩的最小范围,您可以将中心的66dp直径圆圈视为安全区域,保证不会被夹住.

您的矢量图标使用整个108x108dp大小,而不是仅使用中间的安全66x66dp区域.因此,您所看到的只是图标的中心(这两个小白点实际上是窥视的背景).

您应该调整矢量资产的大小以适应安全区域.一种方法是增加viewportHeight和viewportWidth,然后将您的路径放入<group>使用android:translateX和android:translateY重新定位较大视口中的矢量:

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

或者您可以手动重写路径.