Search code examples
android-12material-you

How to implement themed icons by Material You in my Android App?


I can't find anything about that online, no documentation, nothing. Maybe one of you know how to do it or have got some advice for me. Thank you in advance.


Solution

  • Update on 02/18/2022: Android 13 has official support for themed icons. Just follow their steps here: https://developer.android.com/about/versions/13/features#themed-app-icons

    To follow their example:

    1. Create a monochrome version of your app icon

    2. Add this to your ic_launcher.xml file, under the <adaptive-icon /> tagset:

      <adaptive-icon>
          <background android:drawable="..." />
          <foreground android:drawable="..." />
          <monochrome android:drawable="@drawable/myicon" />
      </adaptive-icon>
      
    3. Add your icon to your manifest:

      <application
          …
          android:icon="@mipmap/ic_launcher"
          …>
      </application>
      

    Note: If android:roundIcon and android:icon are both in your manifest, you must either remove the reference to android:roundIcon or supply the monochrome icon in the drawable defined by the android:roundIcon attribute.

    All of that was pulled directly from the Google developer's example.


    There seems to be competing answers on this, but this issue on the Material Components GitHub repository seems to offer the most insight: https://github.com/material-components/material-components-android/issues/2357

    Particularly, using an adaptive icon, like this:

    <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:aapt="http://schemas.android.com/aapt">
        <background android:drawable="@color/launcher_icon_background"/>
    
        <foreground>
            <aapt:attr name="android:drawable">
                <vector
                    android:width="108dp"
                    android:height="108dp"
                    android:viewportWidth="108"
                    android:viewportHeight="108">
                    <path
                        android:fillColor="@color/launcher_icon"
                        android:pathData="m54,74.5l23.3,-29c-0.9,-0.7 -9.9,-8 -23.3,-8c-13.4,0 -22.4,7.3 -23.3,8l23.3,29l0,0c0,0 0,0 0,0zm7.7,-27.3c1.4,1.7 2.3,3.9 2.3,6.3l0,2l-20,0l0,-2c0,-2.4 0.9,-4.6 2.3,-6.3l-2.3,-2.3l1.4,-1.4l2.3,2.3c1.7,-1.4 3.9,-2.3 6.3,-2.3c2.4,0 4.6,0.9 6.3,2.3l2.3,-2.3l1.4,1.4l-2.3,2.3zm-9.7,4.3c0,1.1 -0.9,2 -2,2c-1.1,0 -2,-0.9 -2,-2c0,-1.1 0.9,-2 2,-2c1.1,0 2,0.9 2,2zm8,0c0,1.1 -0.9,2 -2,2c-1.1,0 -2,-0.9 -2,-2c0,-1.1 0.9,-2 2,-2c1.1,0 2,0.9 2,2z" />
                    </vector>
            </aapt:attr>
        </foreground>
    </adaptive-icon>
    

    ... with colors defined in colors.xml that refer to system-defined colors that derive from the Material 3 color pallet:

    <resources>
        <color name="launcher_icon_background">@android:color/system_accent1_100</color>
        <color name="launcher_icon">@android:color/system_neutral1_800</color>
    </resources>
    

    Note that these colors derive from the system-defined pallet, as described in Material Design 3: https://m3.material.io/libraries/mdc-android/color-theming

    You will likely have to create separate resource files that target API 31+ specifically. I have not tested out these recommendations.