Creating Android Notification Icons in Gimp

Here's a quick step-by-step of how I created an Android Notification Icon in Gimp. Before we start we'll look at the end result.

The notification icon in the top left corner is what we're creating. Then on pull-down a larger version of the icon is displayed.

If that icon is familiar to you then we've been pals a long time. I created the image and used it as the logo for DBVT.COM and various applications for the last 10 years or so.

The first step was to retrieve an existing notification icon into Gimp from the Android SDK to get a feel for its design. Android drawables are found at

%ANDROID-SDK-FOLDER%/platforms/android-*/data/res/drawable-*

The first things we notice in the Android SDK drawable are the transparent background and two primary tones that have an opacity setting of less than 100%. Also, the drawable-xhdpi and drawable-xxhdpi dimensions for Notification Icons are 96×96.

Now the application logo we'll be using as the basis for the notification icon.

After some Gimp Love we see the final result of the icon below. A couple things to point out is that opacity settings are the key in creating Android Notification and Action Bar icons, so we reduced the background hump opacity so it displays as a separate shade in the icon. We also increased the size of the border so it still appears at the smaller icon dimensions and made sure to give our our image some padding.

Now into our application using Android Studio's Image Asset creator. You'll notice that the black areas in our Gimp image are white in our Notification Icons, but it again comes down to opacity. 100% opacity in Gimp is solid or filled, less opacity is less solid to transparent.

And there we have our custom Android Notification Icon!

Posted October 17, 2014 05:24 PM EDT

More Like This Post