androidandroid-vectordrawable

Is gradient icon line coloring in Android app launcher icon possible?


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>

Solution

  • 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:

    icon

    The screenshot with the icon on the device:

    screenshot