Making a Simple Android Sticker App

Over at Playground Inc. we had the idea to make a cute emoji set, called Faecface, and set about turning it into an iOS sticker pack. Thanks to programs like Xcode, making an iOS sticker pack is simple enough, and requires no code knowledge. To boot, there’s also a plethora of articles to help you along the way.

When we wrapped up releasing the iOS version, I thought to myself: how hard could it be to make an Android version?

Turns out, a lot harder than I thought. I’m a frontend developer over at Playground Inc., so while I write code in my day-to-day, I’ve never written Java. Let alone worked with the Android API in Java. And as I found out, making an Android sticker pack means making an app. Making things even worse, there seems to be a shortage of clear and helpful articles on this topic.

This is what developing on android felt like sometimes

But, if anything, I can be super stubborn. So I wanted to figure this out. And figure it out I did. Now I want to share what I learned, and help every other poor soul who thinks How hard could this be to make on Android?

First Steps

Prep your assets

Your assets will be sized up and down accordingly, with the largest asset size for large screens being 600x600px. With this in mind, it’s best to have your stickers at that largest size.

Clone and import the project

To help others along, I took the code that we used to make Faecface Android, stripped out specific references to Faecface, and put in some general names and assets to create a template code base with which to work with.

You’ll probably want to start off by forking or cloning the template repo. From there, you’re going to want to import the project into Android Studio (selecting just the “app” folder in the directory).

If it’s your first time using Android Studio, you may need to generate a debug keystore, which can be done on the command line, or generated by starting a brand new project in Android Studio (and not importing one).

Build icon

Once the project is imported, hit the build icon, ensuring that you’re not getting an error about the keystore (you will get one about google-services.json missing, but we’re going to deal with that momentarily).

Setting Up Firebase

The first error you’re going to encounter has to do with the fact that the project currently isn’t connected to a Firebase project (we’re about to do so now, so don’t worry). The error will look something like:

File google-services.json is missing. The Google Services Plugin cannot function without it.

So let’s get Firebase set up now! Head over to Firebase and set up an account if you don’t have one. Don’t worry about creating a project or anything at the moment.

Now, head back to Android Studio and connect Firebase to your project. As of Android Studio 2.2 this is super simple.

Go to Tools > Firebase > App Indexing > Get Started with App Indexing > Connect to Firebase.

From there, you’ll see this:

Create a new Firebase project with a name that’s meaningful to you, and hit “Connect to Firebase” (or select an existing project if you already have one for your sticker app). Once it’s connected, that’s all we need to do with Firebase for now.

I recommend hitting the build button again to be sure things are still running relatively smoothly.

Note: Android Studio might spit something like this out:

Connect to Firebase failed. Please check your internet connection and try again. If errors persist, you can connect manually at https://console.firebase.google.com. 

Before you try to do a manual setup, click ‘Connect to Firebase again’. If you get the option to Sync, hit it and it should connect you.

Add assets (how to add drawable importer)

For adding your assets to the project, you’ll first want to install the drawable bulk importer, which will handle resizing your images for all the necessary displays.

SDK Manager

To do so, click the SDK Manager button in the top right corner of Android Studio.

From there, click plugins on the left-hand side, and search for “Android Drawable Importer”, click “search repositories” when it comes up, and then add Android Drawable Importer. It will prompt you to restart Android Studio. Go ahead and do so now.

Once that’s added, you’re going to right-click on the drawable folder in the left-hand directory sidebar. Go to New > Batch Drawable Import (the second last option). A screen will open where you can drag and drop your sticker assets.

Replace the list

Now that you’ve imported your assets, let’s go about integrating them into the app!

At the bottom of HomeActivity.java, you’ll find our array of stickers. Unfortunately, yes, this is going to get tedious, but you’ll only run through this once.

For each sticker in your pack, you’re going to list a new sticker constructor with the appropriate information. The basic info is as follows:

new Sticker("sticker-name-here", R.drawable.drawable_folder_name, "https://urltoyoursticker.com/sticker/0", new String [] {"keyword1","keyword2","keyword3"})

Sticker Name: “sticker name”, we’ve used dashes in our names, but this is not necessary for the sticker name.

Drawable path: this is the path to where this asset lives in the drawable directory. Ours currently looks something like R.drawable.pg_logo_lightblue, but when you import your own assets pg_logo_lightblue should be replaced with the directory where your asset was placed upon import.

Sticker URL: The URL to your sticker online is later used by Firebase and Google to index and create your sticker pack. You can choose to use Firebase Storage and use the download URL each file provides, or pull from somewhere on your own site.

Keywords: The final bit is the keywords. These are helpful if you have quite a few stickers, because a Gboard user can search for, say, “kiss”, and find the related emoji in your sticker pack.

Set the default selected sticker

When opening the app, the first sticker featured defaults to the first one in your pack. However, once you’ve swapped in your assets, you’ll have to reflect this update in selectedsticker.xml found in res > layout > selected_sticker.xml.

In the ImageView tag (roughly line 16), change the android:src="@drawable/pg_logo_lightblue" to the drawable resource that corresponds to the first sticker in your stickers array (set up in HomeActivity).

Other Stuff

At this point, your app should build and run successfully, but there’s a few things you’ll still want to tweak.

Change the App Name

Open up res > values > strings.xml.

Change the value of "app_name" from "Stickers", to whatever the name of your sticker pack is:
<string name="app_name">Stickers</string>

Update the icon

You’ll no doubt also want to update the icon to something unique to your app. You will need both a square and round version. I recommend using this tool to generate your icons. Once you have downloaded the files, place them in the corresponding folders in your project (under the main > res > mipmap folders through finder).

Change the colours

For brevity, I won’t go into changing layouts. I found googling for this yielded sufficient information, and I found this tutorial particularly helpful (of which the bulk of this layout code is made up).

However, you might just want to change the main colours, which you can do over in res > values > styles.xml, with the actual colour hex codes being stored in res > values > colors.xml.

Last Words

I’m hoping you found these instructions helpful and are on your way to making your own Android sticker pack! Feel free to reach out if you encounter any issues, or have suggestions for improvements!

You can download the Faecface Android sticker app in the Google Play Store.