Как создать градиент Длинная тень для значка приложения в соответствии с рекомендациями по дизайну материалов в VectorDrawables?

Question

На самом деле, я занимаюсь разработкой приложения для Android. Проблема заключается в экспорте иконки с градиентами в VectorDrawables. Я рисую свои иконки с помощью Adobe Illustrator и экспортирую их в Asset Studio для Android Studio.

Согласно Руководству по проектированию материалов, тень от объекта должна быть радиальной, градиентной, где 1-й ползунок находится на 32%, а непрозрачность составляет 15%. 2-й слайдер находится на 62% месте с непрозрачностью 2%. И последний слайдер на 100 % с полностью прозрачным цветом с углом 45°

Я создал "Иконку в Adobe Illustrator", отлично выгляжу и слежу за дизайном материала. Но когда я экспортирую их в Android Studio, изображение сильно изменяется, поскольку векторные рисунки еще не полностью поддерживают градиенты. Градиенты в VectorDrawables поддерживаются на устройствах Android 7.0 +. Другая проблема заключается в том, что Google говорит, что объект с возвышением должен показывать длинную тень с углом 45° (на основе градиента). Но с другой стороны, они не поддерживают градиенты полностью. Как я могу расширить значок градиента приложения для устройств ниже 7.0.

PS Я экспортирую файл Illustrator для поддержки Adaptive Icon. Пожалуйста, кто-нибудь, помогите мне добиться этой градиентной тени в VectorDrawables, чтобы они выглядели как старые иконки

Answer 1

Вместо того, чтобы включать градиент тени в иллюстраторе, вручную добавьте его в путь в векторном XML-файле:

<path 
    android:pathData="...">
    <aapt:attr name="android:fillColor">
      <gradient
          android:type="radial"
          android:centerX="54"
          android:centerY="54"
          android:gradientRadius="76.37">
        <!-- 15% black from center to 32% stop -->
        <item android:offset="0.0" android:color="#26000000" />
        <item android:offset="0.32" android:color="#26000000" />
        <!-- 2% black at 62% stop -->
        <item android:offset="0.62" android:color="#05000000" />
        <!-- fade to transparent -->
        <item android:offset="1.0" android:color="#00000000" />
      </gradient>
    </aapt:attr>
</path>

Для получения дополнительной информации https://medium.com/google-developers/implementing-adaptive-icons-1e4d1795470e

Примечание: поддержка градиента была добавлена ​​в VectorDrawables в API 24.