Month: May 2019

Android 8.0 (API level 26) introduces Adaptive Icons, these icons have the capacity of displaying variations depending on the OEM specification.

To do this, Adaptive icons consist of two layers, the background, and the foreground, these layers are manipulated in different ways to show your app’s icon.

Adaptive icons must follow the following guidelines:

• Both layers must be sized at 108 x 108 dp.
• The inner 72 x 72 dp of the icon appears within the masked viewport.
• The system reserves the outer 18 dp on each of the 4 sides to create interesting visual effects, such as parallax or pulsing.

Fortunately, Android Studio provides a very simple way to add an adaptive icon to your app, here’s how.

Prepare your assets

To create adaptive icons, first, you need to have your assets ready, as I’ve explained, adaptive icons consist of background and foreground so you have to figure out this 2 layers for your app, typically the background being a pattern or solid color and the foreground an image with transparent background. For this example, I’ll be using a material icon vector and a solid color #26A69A.

Create your adaptive icon using Asset Studio

Open your project with Android Studio and launch Asset Studio going to File > New > Image Asset.

Select Launcher Icons (Adaptive and Legacy) on the Icon Type, this way Android studio will auto-generate the icons for new specification and legacy compatibility. Leave the default name and select your foreground and background layers.

You’ll be able to preview all the different icon versions on the right panel and once you finish, Android Studio will generate the required files and make the needed adjustments on your app to get your icon working.

There you go, now your app has an adaptive icon which will look great in every device and Android version.

You have a great Android app and you need to add some icons to it, so you start reading about supporting multiple screen sizes, different densities, bitmap sizes, vector graphics…

Stop panicking, here’s the right way to Android App Icons: Vector Drawables.

This guide focuses on using vector drawables, Android 5.0 (API level 21) was the first version to officially support vector drawables with VectorDrawable and AnimatedVectorDrawable, but you can support older versions with the Android support library. Read more.

What is a vector drawable?

A vector drawable refers to a vector graphic defined in an XML file and which can be used by the Android system, this file contains a set of points, lines, curves and specification to generate all the shapes and colors that you see on your screen.

Why vector drawables?

Vector drawables are special because they can scale freely without losing any display quality, you can use a single file to show pixel perfect icons on any screen size and resolution reducing your app’s size and increasing maintainability.

Here are the steps to include your icons as vector drawables in your app:

Get your icons

First, you need to have the icons you want to use in your app in a vector format like SVG. Several icon pages and designers work with this type of icons so you should have no problem finding your icons.

You can download official Material Design Icons in SVG vector format.

Add them using Android Studio

Open your project with Android Studio and open Asset Studio by going to File > New > Vector Asset.

Here you’ll be able to browse your SVG files and set the name among other settings.

If you’d like to edit your icon before adding it like changing the color there are pretty cool vector editors out there totally free to use, personally, I like InkScape.

After you click next you’ll be asked to confirm the icon path and then you’re finished, you’ll have a new single XML file under your drawable folder which you’ll be able to use like any other drawable throughout your application and it will look pixel perfect across all devices and resolutions.