Adaptive icon not displaying properly

六月ゝ 毕业季﹏ 提交于 2020-06-13 08:44:34

问题


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.

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>

回答1:


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.



来源:https://stackoverflow.com/questions/49661571/adaptive-icon-not-displaying-properly

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!