Android App Icons the Right Way

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…

scared paper bag GIF by davidsaracino

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.

material-design-icons.PNG

Add them using Android Studio

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

asset-studio.PNG

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.

awesome bear GIF by Studio Flox

Posted in Dev

Leave a Reply

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s