Create Adaptive Icons for Ionic & Cordova Applications
Starting with the release of Android Oreo comes the need to support adaptive icons in our applications. Unfortunately, Cordova does not support this style of Icons directly yet. If you have built a Cordova application and installed it on either an Android device running Oreo or Pie, you will see your icon is shrunken within a white circle. To fix this we need to use Adaptive icons to have a proper looking app icon. This lesson will show you how to generate an adaptive icon and adjust your config.xml file so it can be used.
Instructor: [00:00] First, let's create a basic empty Android project in Android Studio. We're only going to use this to generate our icon. The name and company domain can be anything. Again, we will not be using this project to build our application, just generate our icons. Then click next.
[00:21] Make sure the phone and tablet option is checked, and API 26 or higher is chosen. Clicking next again, select add new activity, then click finish. Android Studio will generate our application for us. Once it is done, select project view, command one.
[00:42] Toggle open the app folder, then right click on the Rest folder, and select new image asset. This is going to bring up the image asset tool, which is what we really need. We want our icon type to be a launcher type, adaptive and legacy. Leave the name as-is.
[01:02] Now, we can design the foreground and background elements of our icon. I'm going to add a new foreground image. I'm going to select my SVG assets, and we can see it applied to the preview pane on the right.
[01:15] Next, I'm going to switch to the background layer. Again, I'm going to select an SVG to use, but I could have selected the color option instead. When you're satisfied playing around, go ahead and click next. We can see the various elements and directories that will be generated for us. Go ahead and click finish.
[01:37] The required elements are now in the res directory. Right click again to reveal them on your computer. Select all the items within that folder, and copy them into the Android directory of the resources directory of our Ionic application.
[01:54] Now, we need to adjust the config.xml file to use these icons. Because we're going to override the Android manifest, we first need to include the Android namespace in the widget tag, like this. Otherwise, Cordova will not understand how to properly merge our changes with the Android manifest file.
[02:18] Next, let's delete the built-in icon references that the stock config.xml file has for us. Now, we will add an edit config node, and tell it that we want to modify the Android manifest file, and that we're changing the application icon.
[02:37] Next, we want to include resource file notes. These notes describe all the various screen densities and their icons we'll match to. There are quite a few, so I'm just going to paste them in. The sample file can be downloaded, so you don't even have to attempt to type all this out yourself.
[02:55] Saving this file, we can run Ionic Cordova build Android from the terminal. Once it is done, we can install it on our phone, and see that we have a nice, proper, little, clear icon.