BongStick – how to make sticker app for WhatsApp

BongStick Logo

Sometimes back WhatsApp introduced stickers. It’s really fun using stickers while chatting on WhatsApp. Mostly it’s an image with transparent background. There are lots of sticker apps already available in Google Play Store and Apple Store. I was thinking to make one myself. After some thought, I planned to make a sticker app for Bengali people. So the concept was easy. The stickers will be based on commonly used words for chatting purposes. Let’s see how I have built the app BongStick.

Find the source code

First I need the basic structure of the application. WhatsApp is already providing source code for the basic apps. It’s there in https://github.com/WhatsApp/stickers So the first step is to clone the project. Either from the command line enter the command $git clone https://github.com/WhatsApp/stickers.git or just download the zip file from https://github.com/WhatsApp/stickers/archive/master.zip. There are two folders one for Android and another for iOS. For now, I have built an application in Android only so let’s see how to do that. I shall name it BongStick, The sticker app for Bengalis.

Change the source code

Open the Android folder in Android Studio. The project is already ready to be run. The WhatsApp team has already provided a sample set of stickers. Only it needs to follow how it is made and create your own sticker pack. You don’t really need to change the java code at all if you don’t want any customization. So the main files need to be checked are down below.

build.gradle: There are two build.gradle files. Please consider the app/build.gradle file. So here your application id should be the namespace of your project in my case it’s com.shuvankar.wasticker. versionName should be the version number of your app. Like 1.10.1 (major.minor.patch). So whenever you are changing your app and publishing it in the play store you need to change the versionName. versionCode should be a number and it should be increased when you make and new release. so it might be that versionName is 1.12 but your versionCode is 15. In the next release, versionName is changed to 1.12.1 but your versionCode should be 16 (versionCode should always be an integer). There are some dependencies down below the file. You can add new dependencies if required or upgrade the existing to the new version if available. It is always recommended to click on ‘Sync Now’ button whenever you make any changes to this file. This will make necessary updates to all over your application.

content.json: This is the file where all the sticker metadata will be stored. It’s a json file. In sticker_packs you can add multiple sticker array. So the structure should be "sticker_packs": [ { ..."stickers": [ {},{}, {} ] }, { ..."stickers": [ {},{}, {} ] }] } ]. In each sticker object there will be multiple image (stickers). Enter your image file name. Please note in one sticker pack there will be minimum 3 and maximum 30 stickers will be allowed. The image file should be in webp format. I will tell you how I have generated the image files soon. The image available in the content.json must be there in assets folder. For every sticker pack there should be an image file e.g. “tray_image_file”: “tray_bong_1.png”.

Create the sticker files

My stickers are handwritten. I have used Autodesk android app to draw the stickers. The image dimension should be 512×512 pixel and size should be less than 100 KB. So in autodesk click on new sketch -> In custom, enter width and height as 512 -> Draw the picture -> From layers, deleted the background -> Share -> Save to device -> Enter image file name and save the file as png. Now it needs to conver the png file to webp format. Before the file conversion I would like to add white border in the image. This will help to show the sticker nicely in dark background. I have added white border to the image in photoshop. The border should be 8 pixel. Now lets convert it. Open the png file in android studio. Right click on the file and click on Convert to WebP. Click ok twice and its converted. It needs to create tray icon file for every sticker pack. It must be 96×96 pixel and less than 50 KB. This tray_image_file can be in png format.

AutoDskBongStick

For every sticker pack there are separate folder inside asset folder. Folder named 1 is already there with the sample code. For every pack create new folder with number. It should be same as “identifier” given in content.json. Now copy the webp file to corresponding asset folder.

Create Icon for the app

Design a icon in Autodesk or Photoshop. Save it as png file. Right click on app/src/main/res -> New -> Image Asset -> Icon Type: Launcher Icons(Adaptive and Legacy) -> Name: ic_launcher -> Asset Type: Image -> Path: Select the image from the path -> Next and Finish.

Run and build the app

Now run the app. Either attach you phone with computer via data cable or create AVD (Android Virtual Device) and run the app any of these. If everything is running fine lets build it and make android app bundle or apk to publish in Google play store. Click on Build -> Generate Signed Bundle -> Select Android App Bundle and click Next-> Here you need key information. If you already have key then enter the key information otherwise create new key. Click Next -> Select Release and Finish. It will create app.adb file in release folder.

Publish the app

Now open Android App Publish console. If you don’t have developer account then create one. It will cost you $25 for lifetime. Create an app and upload your app.adb file and publish. I am not going to explain in details how to publish app in Google Play Store. May be I will make another blog post about it later.

You can download and enjoy my app from from play store. I have build a dedicated website https://shuvankar.com/bongstick/ for this. There I have integrated google form to get the new sticker request. There is a BongStick facebook page as well – https://www.facebook.com/bongstickapp. For now I have published for Android only. iOS developer account is costly ($100 per year) so if I get proper funding then I will build this app for Apple phone and publish in Apple Store.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.