Awesome Architecture Components using Kotlin — App icons that are adaptive
All of you must have already heard about Kotlin, Dagger 2, Android Architecture Components, Retrofit 2, Adaptive icons and many other awesome features and advancements going on in Android. Recently, Google launched Android P Developer preview as well. I’ve been reading a lot about these hot topics for quite a while and tried to use them in my applications as well. So here is my first attempt at learning something new and sharing my knowledge back to the community itself.
I’ll be writing a series in which I primarily am focusing and demonstrating the benefits of these above-mentioned tech stacks altogether by developing a simple Kotlin based android application wherein, we can search GitHub users using GitHub’s Search API.
Feeling excited? Just hop on. It’s going to be a fun ride.
Content
- App icons that are adaptive
- Injecting dependencies using Dagger 2
- Making some Room
- Will continue adding more points in future blogs of this series
App icons that are adaptive
In last year’s Google I/O’17, Google introduced adaptive launcher icons in Android Oreo(API level 26) operating system. A new, stylish and elegant way to design any application’s logo. Using this new format, our application’s launcher icon can be displayed in a variety of shapes on different OEMs, which means an adaptive icon can display a circular-shaped icon on one device and a square-shaped icon on another device.
So the shape of our application’s launcher icon can vary from:
depending upon the default mask provided by the OEM supported on the smartphone, which is used by the system to render all the adaptive icons in the same shape available in your device.
Basics
The most important components in the adaptive icon are their foreground and background layers. In order to create an adaptive icon, we need to separate the launcher icon in two parts mentioned above(foreground layer and background layer).
The dimensions of launcher icons were of size 48 x 48 dp in android version 7.1 and earlier. But according to the official documentation on the Adaptive icon by Google, apps should follow a specific set of guidelines to create both the layers of the adaptive icon, i.e.:
- Both foreground and background layers should be of size 108 x 108 dp (wherein background layer must be opaque and foreground layer can have transparency).
- The launcher icon should be inside the masking are i.e. 72 x 72 dp.
- There is an extra space of 18 dp from each side, kept for OEMs to perform different kinds of visual effects like parallax, pulsing or many other effects.
Oh! There is one more thing I need to tell, foreground and background layers could be of .svg or .png format. I’ll be sharing a link in the references section of this blog, from where I learned how to create a foreground layer of the launcher icon.
Approach
There are two approaches to create an Adaptive icon, i.e.
- Using Image Asset feature in Android Studio itself(easy and quite straightforward one).
- Creating an
<adaptive-icon>type XML file by your self.
We’ll look at the first approach in this blog. But before starting, there is a prerequisite that needs to be taken care of, to create the adaptive icon.
Your app should have
targetsdkversionas 26 and above.
First Approach
It’s an easier approach, just by following steps:
- Right-click on
resthe folder and select New > Image Asset option. It will look like this:
2. Now after Step 1, we’ll be able to see an Image Asset Configuration window like this:
There are several options available as we all can see in this configuration window. We’ll have a look at the options required to create an Adaptive icon in further steps.
3. In this step, There are certain options which we’ll leave as it is, that are:
- We’ll leave the Icon Type option as it is selected by default Launcher icons(Adaptive and Legacy).
- The Name of the launcher icon is written as
ic_launcher, you can change the name as per your requirement. - There are two toggle buttons available in this configuration window that are Show Safe Zone(To toggle the visibility of safe zone in the launcher icon preview window) and Show Grid(To toggle the visibility of keyline shapes which helps in setting the icon’s proportion consistent).
- There are three tabs named Foreground layer, Background layer and Legacy available in the configuration window. We’ll look up to them in the following steps.
4. After following Step 3, We’ll move forward to add our background.svg or background.png file. I’ve made my background.png file of dimension 432 x 432 px using GIMP v2.8, it looks like this:
Just giving a brief of the Background layer section: It has fields like:
- Name: Set the name of your background layer according to your requirements.
- Asset Type: Select image type as we are using
.svgor.pngfile for the background layer. - Path: Select the appropriate path of your background file.
After adding the background file to the background layer in the image configuration window, we’ll see the changes like this:
5. After Step 4, We’ll select the Foreground Layer tab and add our foreground.svg or foreground.png file which is again of the same dimensions as of our background file. I’ve made my foreground file using GIMP v2.8 itself by following the guidelines mentioned above in this article. Also, I’ll be sharing a link in the resource section below on how to create a simple text type logo with a long shadow, meanwhile the logo looks like this:
Just like we selected the Name and Asset Type in the background layer, we’ll do the same for the foreground layer as well. So after selecting the path of the foreground file to the foreground layer in the image configuration window, we’ll see the changes like this:
6. This step will be our second last step, we’ll select the legacy tab and there we have three options:
This tab will generate three types of extra icons i.e. Legacy Icon, Round Icon, and Google Play Store Icon. We have yes or no options for each kind of icon. So we’ll generate every icon for our app and press Next.
7. After following all the steps, Android Studio will generate all the output files in the mipmap folder and separate all the files dpi wise. Let’s have a look at this output window:
As we can see, there are two launcher icon XML files, one for normal icon and other for round icon, which are having <adaptive-icon></adaptive-icon> tags and specifying the foreground and background drawable separately in a mipmap-anydpi-v26 folder. So after verifying all the folders and files, we’ll finally click on Finish and Voila! Our adaptive icon is ready.
Let’s just see the magic of our adaptive icon:
That’s all about adaptive icon. You can find the source code here:
In the second part of this series, I’ll explain how Dependency Injection works using Dagger and process to integrate it into this app. Stay tuned…
Resources
These are the resources which I followed to implement the adaptive icon. You all can have a look at these resources as well.
Hopefully, this blog will help in creating awesome and cool adaptive icons for your app. If you have some suggestions for implementing adaptive icons, please do let me know in the comment section.
Thanks for reading. Also, you can If you like and enjoy reading this article, then just 👏.
Follow me on Twitter:
