Given ic_launcher.xml
in mipmap-anydpi-v26
like
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@drawable/icon_background"/>
<foreground android:drawable="@drawable/ic_launcher_foreground"/>
<monochrome android:drawable="@drawable/ic_launcher_monochrome"/>
</adaptive-icon>
Is it possible to define ic_launcher_foreground.xml
to have an icon with a gradient color applied across multiple paths? That is, I have in mind a more complex "polygon" I'd like to color with a gradient that "shines" from top left towards bottom right, but this appears to be a rather complex undertaking!
It'd be possible e.g. with a png
image, but I'm specifically thinking a vector drawable one now. Whatever I've tried, it comes as solid color circle. So, not as a pattern created with multiple paths that's colored using this idea of gradient applied from top left towards bottom right.
Here is one attempt for ic_launcher_foreground.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="108dp"
android:height="108dp"
android:viewportWidth="108"
android:viewportHeight="108">
<group>
<aapt:attr name="android:fillColor">
<gradient
android:type="linear"
android:startX="0"
android:startY="0"
android:endX="108"
android:endY="108">
<item android:offset="0.0" android:color="#EEE811"/>
<item android:offset="1.0" android:color="#2CC5F4"/>
</gradient>
</aapt:attr>
<path
android:pathData="M10,10 L60,10 L60,60 L10,60 Z"
android:fillColor="?attr/android:fillColor"
android:strokeWidth="1"/>
<path
android:pathData="M54,24 A30,30 0 1,1 53.9,24 Z"
android:fillColor="?attr/android:fillColor"
android:strokeWidth="1"/>
</group>
</vector>
In order to have the icon with gradient, the gradient definition has to be embedded inside the path definition to make it effective, so the vector can be redefined as follows:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="108dp"
android:height="108dp"
android:viewportWidth="108"
android:viewportHeight="108">
<path android:pathData="M54,24 A30,30 0 1,1 53.9,24 Z">
<aapt:attr name="android:fillColor">
<gradient
android:type="linear"
android:startX="0"
android:startY="0"
android:endX="108"
android:endY="108">
<item android:offset="0.0" android:color="#EEE811"/>
<item android:offset="1.0" android:color="#2CC5F4"/>
</gradient>
</aapt:attr>
</path>
</vector>
This vector will generate the following image with gradient:
The screenshot with the icon on the device: