Как залить векторную картинку градиентом?

В drawable загрузил векторную картинку из Vector Asset.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:tint="#FFC107"
    android:viewportWidth="24"
    android:viewportHeight="24">
  <path
      android:fillColor="@android:color/white"
      android:pathData="M13.25,16.74c0,0.69 -0.53,1.26 -1.25,1.26c-0.7,0 -1.26,-0.56 -1.26,-1.26c0,-0.71 0.56,-1.25 1.26,-1.25C12.71,15.49 13.25,16.04 13.25,16.74zM11.99,6c-1.77,0 -2.98,1.15 -3.43,2.49l1.64,0.69c0.22,-0.67 0.74,-1.48 1.8,-1.48c1.62,0 1.94,1.52 1.37,2.33c-0.54,0.77 -1.47,1.29 -1.96,2.16c-0.39,0.69 -0.31,1.49 -0.31,1.98h1.82c0,-0.93 0.07,-1.12 0.22,-1.41c0.39,-0.72 1.11,-1.06 1.87,-2.17c0.68,-1 0.42,-2.36 -0.02,-3.08C14.48,6.67 13.47,6 11.99,6zM19,5H5v14h14V5M19,3c1.1,0 2,0.9 2,2v14c0,1.1 -0.9,2 -2,2H5c-1.1,0 -2,-0.9 -2,-2V5c0,-1.1 0.9,-2 2,-2H19L19,3z"/>
</vector>

Сейчас она имеет оранжевый цвет. Я хочу чтобы она имела градиентный цвет. Например, сверху зелёная, а снизу жёлтая. Подскажите, как это можно сделать?


Ответы (1 шт):

Автор решения: Михаил Ребров

Создаем файл gradient.xml, со следующим содержимым:

<?xml version="1.0" encoding="utf-8"?>
<gradient xmlns:android="http://schemas.android.com/apk/res/android"
    android:startColor="#00FF00"
    android:centerColor="#88FF00"
    android:endColor="#FFFF00"
    android:angle="90"
    android:startX="30"
    android:endX="70"
    android:startY="30"
    android:endY="70"
    android:type="linear"/>

и помещаем его в ресурсы в папку color (res/color/gradient.xml).

Далее указываем данный ресурс(@color/gradient) в качестве цвета заливки(обводки, пр.):

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
  <path
      android:fillColor="@color/gradient"
      android:pathData="M13.25,16.74c0,0.69 -0.53,1.26 -1.25,1.26c-0.7,0 -1.26,-0.56 -1.26,-1.26c0,-0.71 0.56,-1.25 1.26,-1.25C12.71,15.49 13.25,16.04 13.25,16.74zM11.99,6c-1.77,0 -2.98,1.15 -3.43,2.49l1.64,0.69c0.22,-0.67 0.74,-1.48 1.8,-1.48c1.62,0 1.94,1.52 1.37,2.33c-0.54,0.77 -1.47,1.29 -1.96,2.16c-0.39,0.69 -0.31,1.49 -0.31,1.98h1.82c0,-0.93 0.07,-1.12 0.22,-1.41c0.39,-0.72 1.11,-1.06 1.87,-2.17c0.68,-1 0.42,-2.36 -0.02,-3.08C14.48,6.67 13.47,6 11.99,6zM19,5H5v14h14V5M19,3c1.1,0 2,0.9 2,2v14c0,1.1 -0.9,2 -2,2H5c-1.1,0 -2,-0.9 -2,-2V5c0,-1.1 0.9,-2 2,-2H19L19,3z"/>
</vector>

Также можно немного упростить себе жизнь с помощью Android Asset Packaging Tool и вложить ресурс градиента непосредственно в вектор.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
  <path
      android:pathData="M13.25,16.74c0,0.69 -0.53,1.26 -1.25,1.26c-0.7,0 -1.26,-0.56 -1.26,-1.26c0,-0.71 0.56,-1.25 1.26,-1.25C12.71,15.49 13.25,16.04 13.25,16.74zM11.99,6c-1.77,0 -2.98,1.15 -3.43,2.49l1.64,0.69c0.22,-0.67 0.74,-1.48 1.8,-1.48c1.62,0 1.94,1.52 1.37,2.33c-0.54,0.77 -1.47,1.29 -1.96,2.16c-0.39,0.69 -0.31,1.49 -0.31,1.98h1.82c0,-0.93 0.07,-1.12 0.22,-1.41c0.39,-0.72 1.11,-1.06 1.87,-2.17c0.68,-1 0.42,-2.36 -0.02,-3.08C14.48,6.67 13.47,6 11.99,6zM19,5H5v14h14V5M19,3c1.1,0 2,0.9 2,2v14c0,1.1 -0.9,2 -2,2H5c-1.1,0 -2,-0.9 -2,-2V5c0,-1.1 0.9,-2 2,-2H19L19,3z">
    <aapt:attr name="android:fillColor">
      <gradient xmlns:android="http://schemas.android.com/apk/res/android"
          android:startColor="#00FF00"
          android:centerColor="#88FF00"
          android:endColor="#FFFF00"
          android:angle="90"
          android:startX="30"
          android:endX="70"
          android:startY="30"
          android:endY="70"
          android:type="linear"/>
    </aapt:attr>
  </path>
</vector>

UPD:

Давайте теперь разберемся как работать с градиентом:

для линейного градиента архиважны следующие свойства:

  • android:startX - начало градиента по оси Х
  • android:endX - конец градиента по оси Х
  • android:startY - начало градиента по оси Y
  • android:endY - конец градиента по оси Y

В Вашем случае градиент "не работал" из-за того что он заканчивался за границами объекта.

<?xml version="1.0" encoding="utf-8"?>
<gradient xmlns:android="http://schemas.android.com/apk/res/android"
    android:startColor="#00FF00"
    android:centerColor="#88FF00"
    android:endColor="#FFFF00"
    android:startX="30"
    android:endX="70"
    android:startY="30"
    android:endY="70"
    android:type="linear"/>

введите сюда описание изображения

Давайте попробуем изменить это недоразумение и подгоним градиент под нужный нам векторный объект.

Сделаем обычный линейный градиент "сверху - вниз".

  • градиент по оси X изменяться не будет поэтому поставим android:startX="0" и android:endX="0"
  • по оси Y начало градиента в самом верху, т.е. в 0
  • конец градиента в конце векторного изображения (т.е. 24)

В итоге:

<?xml version="1.0" encoding="utf-8"?>
<gradient xmlns:android="http://schemas.android.com/apk/res/android"
    android:startColor="#00FF00"
    android:centerColor="#88FF00"
    android:endColor="#FFFF00"
    android:startX="0"
    android:endX="0"
    android:startY="0"
    android:endY="24"
    android:type="linear"/>

введите сюда описание изображения

Допустим мы хотим сделать градиент наоборот от желтого к зеленому:
все просто: запускаем градиент от конца(24) к началу(0)

  • android:startY="24"
  • android:endY="0"
<?xml version="1.0" encoding="utf-8"?>
<gradient xmlns:android="http://schemas.android.com/apk/res/android"
    android:startColor="#00FF00"
    android:centerColor="#88FF00"
    android:endColor="#FFFF00"
    android:startX="0"
    android:endX="0"
    android:startY="24"
    android:endY="0"
    android:type="linear"/>

введите сюда описание изображения

Нужно сделать чтобы градиент изменялся только по вертикали - легко:

  • По оси Y он у нас не изменяется, поэтому начало и конец равны 0
  • По оси X установим начало в 0, а конец в 24
<?xml version="1.0" encoding="utf-8"?>
<gradient xmlns:android="http://schemas.android.com/apk/res/android"
    android:startColor="#00FF00"
    android:centerColor="#88FF00"
    android:endColor="#FFFF00"
    android:startX="0"
    android:endX="24"
    android:startY="0"
    android:endY="0"
    android:type="linear"/>

введите сюда описание изображения

Диагональ?

  • начало по оси X и по оси Y устанавливаем в 0
  • конец по оси X и по оси Y устанавливаем в 24
  • для "пущей" заметности сделаю центр оранжевым
<?xml version="1.0" encoding="utf-8"?>
<gradient xmlns:android="http://schemas.android.com/apk/res/android"
    android:startColor="#00FF00"
    android:centerColor="#FF9900"
    android:endColor="#FFFF00"
    android:startX="0"
    android:endX="24"
    android:startY="0"
    android:endY="24"
    android:type="linear"/>

введите сюда описание изображения

→ Ссылка