Как залить векторную картинку градиентом?
В 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- начало градиента по оси Yandroid: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"/>




