自适应图标无法正确显示 [英] Adaptive icon not displaying properly

问题描述

我知道前景层和背景层都应为108dp x 108dp.但是，正如您在图片中看到的那样，该图片未正确显示(YouTube图标旁边的图标)

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)

我不确定自己在做什么错.

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

这是前景层

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

推荐答案

每个

自适应图标的大小为108dp * 108dp，但被屏蔽为最大72dp * 72dp .不同的设备可以提供不同的遮罩，这些遮罩的形状必须是凸形的，并且在某些地方距离中心至少可以达到33dp.

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.

由于面罩的最小范围，y 您可以将直径居中的66dp圆视为安全区域，确保不会被剪断.

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.

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

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

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

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.

这篇关于自适应图标无法正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！