BongStick Logo

Sometimes back WhatsApp introduced stickers. It’s really fun using stickers while chatting in WhatsApp. Mostly it’s 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 sticker app for bengali people. So the concept was easy. The commonly used words will be the stickers. Lets see how I have built the app BongStick.

Find the source code

First I need basic structure of the application. WhatsApp is already providing source code for basic app. Its there in https://github.com/WhatsApp/stickers So first step is to clone the project. Either from command line enter 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 another for iOS. For now I have built application in Android only so lets see how to do that.

Change the source code

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

build.gradle: There are two build.gradle files. Please consider app/build.gradle file. So here your application id should be namespace of your project in my case its 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 publish in play store you need to change the versionName. versionCode should be an number and it should be increased when you make and new release. so it might be versionName is 1.12 but your versionCode is 15. In next release versionName is changed to 1.12.1 but your versionCode should be 16 (versionCode should always be integer). There are some dependencies down below of the file. You can add new dependency if required or upgrade the existing to new version if available. It is always recommended to click on ‘Sync Now’ button whenever you make any changes in 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 stickers 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.