5 Ways to Add Personality to Your Android App with Bitmoji Kit
Smartphones are a staple of modern life, and resultantly, so are apps that connect people. From messengers to marketplaces, there are many instances where users can interact with each other. If your project encompasses one of these, you may want to add more personality to communication between your users.
When text-only messages weren’t expressive enough, people flocked to emoji as a better way to express themselves. Snapchat has taken this trend further with Bitmoji, which are personalized emoji. Users can create a Bitmoji based on their likeness. Then, countless stickers are generated, all of which users can use to express themselves in almost any scenario.
Snapchat’s Bitmoji Kit enables your app to benefit from the increased fun and expressiveness Bitmoji has to offer. Popular apps like Tinder and Fitbit have already used the Bitmoji Kit to enhance their own experience. Let’s explore 5 ways to add personality to your app’s UI and communication with Bitmoji Kit, with guided examples and code!
Getting Started with Bitmoji Kit
Before we jump into the 5 examples, let’s get our prerequisites setup. To follow along with this tutorial, you’ll need the sample app, which is written in Kotlin. If you haven’t used it before, Kotlin is a modern statically typed programming language that is interoperable with Java. If you’ve already gotten started with your own project, feel free to use that instead. Further, you’ll need to get your Snap Kit credentials and set up your app.
If you already have the Bitmoji Kit fully setup in your Android App, feel free to skip to #1.
Quick Links to Prerequisites
- Android Studio
- Sample App (start with the
initialbranch, or reference the completed code in themasterbranch) - Snap Kit Credentials
Get the Sample App
If you’re choosing to use the sample app, you can find it on download the ZIP or clone it from GitHub (make sure to clone the initial branch). The sample app is a mock messaging application, allowing you to easily experiment with implementing Bitmoji Kit. You’ll also need Android Studio to work on the project. Once the sample app is downloaded, select “Open an existing Android Studio project” to get set up.
The completed sample app code is also available on GitHub. Feel free to reference it if you get stuck at any point!
Update Your App’s Dependencies
You will need to configure a couple of dependencies to get started. First off, add the following snippet to the repositories in your top-level build.gradle, which is the build.gradle file located at the root of your project.
Your top-level build.gradle repositories should look something like the following:
`build.gradle`Then, add the following dependencies in your application’s build.gradle
Your app build.gradle dependencies should look like the following:
If so, you now have Bitmoji Kit as a dependency! You should now be able to compile the app without missing dependencies as well.
Create Your Snap Kit App
You’ll need your own credentials to use Bitmoji Kit in your app. To get them, head over to https://kit.snapchat.com/. Once logged in, click the “+” button to add your app. Fill in your app’s name and upload an icon if you have one. Ensure that the Bitmoji avatar permission is selected and then click “Continue.”
As you scroll down your project’s page, there are a couple of options you’ll need to set. First, from the top, select the Bitmoji Kit in the “Kits” section.
Next, under “Development Environment,” select “Android” and input your Package ID. For the sample app, the Package ID is com.example.chatsample
Finally, you’ll want to add any demo users you might need. Until submitted for review and approved, Snapchat will only let demo users login to your app.
Configure your Android Manifest
The last thing you need to get started is to update the Android Manifest. A complete AndroidManifest.xml for the sample app can be found here for reference.
When Snapchat authenticates your app, it’ll need a way to get back once it’s done. To do this, you will define an activity for it to return to based on a redirect URL. This activity should be nested in your <application /> with the other activities.
Once the activity is added, head over to the Snap Kit Portal to add the redirect URL.
Finally, you need to add the meta-data tags under <application />. These are used by Bitmoji Kit to identify your app. Make sure to fill in the client ID, which you can find under “Development Environment” in the Snap Kit Portal.
With that, you’re ready to get going!
1. Represent Your Users with Bitmoji Avatars
Avatars are an extremely common way of providing your user visual identity. Bitmoji Kit allows you to use Bitmojis as avatars in two ways, with the BitmojiIconFragment() container or the fetchAvatarUrl() method. The former allows you to replace a Fragment with an Icon container. The latter allows you to query for a URL to the avatar. Both serve as easy ways to add a personalized look to your app’s interface.
BitmojiIconFragment()
Replacing a fragment on your page is as easy as a single function call. In the sample app, you will be replacing the container with the ID bitmoji_icon (located in layout/activity_main.xml). In the onCreate method of MainActivity, write the following:
FragmentTransaction’s replace method takes two arguments, the ID of the container to replace and the Fragment to replace it with. In this snippet, the bitmoji_icon container is being targeted. Initially, the BitmojiIconFragment will display the Bitmoji logo. After connecting to Snapchat, your user will be presented with their own Bitmoji. Users can connect to Snapchat via the Bitmoji Sticker Picker, which will be discussed ahead.
fetchAvatarUrl()
A more flexible way to include the Bitmoji avatar in your app is through the fetchAvatarUrl() method. The sample app’s InfoActivity activity contains a large avatar, which you can access by pressing the “i” icon. With fetchAvatarUrl() you will place a Bitmoji in that preexisting ImageView.
The fetchAvatarUrl() method takes two arguments: the context and a callback. Within the callback, you will have access to the avatar URL. Place the following snippet in the onCreate method of InfoActivity.
On success, the Picasso library replaces the content of the ImageView with the Bitmoji and the unlink button is made visible. If unsuccessful, the original avatar remains and a prompt is shown. There is also the option to determine whether the failure is related to a network error.
2. Enable personalized communication with the Bitmoji Sticker Picker
Similar to an emoji keyboard, the Bitmoji Sticker Picker allows your users to browse through a vast array of customized stickers which they can send to their friends. It is an easy way to give your users a nearly limitless potential for expression. Further, it will give users the option to “Connect to Snapchat” if they aren’t logged in to your app.
Like the BitmojiIconFragment(), the Sticker Picker replaces a component in your activity. The sample app’s activity_main.xml layout contains a FrameLayout called sticker_picker which you will replace with the actual sticker picker. To do so, write the following code in the onCreate method of your MainActivity.
You’ll also need to inherit OnBitmojiSelectedListener. Doing so will let you choose what happens when the user selects a Bitmoji. First, add OnBitmojiSelectedListener your Activity as shown below.
Then, you’ll need to override the onBitmojiSelected method within MainActivity, which gives you access to the sticker as a URL and a Drawable. The following code sends the selected sticker as a message in the sample app.
In the sample app, tapping the BitmojiIconFragment will open the Sticker Picker. Try it out!
3. Take Friendships to the Next Level With Friendmoji
What experience isn’t better with friends? Through Friendmoji, your users can access Bitmoji which include the friend they’re chatting with. To access Friendmoji, use BitmojiFragment’s setFriend(externalUserId: String) method. This will only work if the friend has already granted your app access to their Bitmoji. To find the current user’s external ID, use the query {me{externalId}} with the fetchUserData() method from Snap’s Login Kit.
In the onCreate method of MainActivity, the following code will enable the Friendmoji toggle (the black icon of a person). When pressed, it will open the Sticker Picker and set the user’s friend using setFriend().
4. Customize Bitmoji Search Queries
With such a large selection of stickers, it helps to be able to narrow them down. Though the Sticker Picker has a built-in search bar, it also supports programmatically searching with BitmojiFragment’s setSearchText(searchText: String) method. Let’s try adding code to make the search button functional. In the onCreate method of MainActivity, add the following:
When the search button is pressed, the text in the message box will be used to search for a sticker. To clear the search, clear the message box and press the search button again (call setSearchText with an empty string). In the next section, you’ll learn how to remove the search bar (as shown in the GIF).
5. Tailor the Bitmoji Sticker Picker to Your Interface
Not only are the Bitmoji customizable, but the Sticker Picker can also be customized to fit your app’s unique style.
There are three aspects of the Sticker Picker which can be customized: the visibility of the search bar, the visibility of the search pills, and the theme.
Recall how you added the Sticker Picker to the page earlier:
Instead of using BitmojiFragment(), you’ll need to use BitmojiFragment.builder() to customize the Sticker Picker.
To remove the search bar, use withShowSearchBar(false) in the builder:
To remove the search pills (the bubbles containing words), use withShowSearchPills(false) in the builder:
Finally, to theme the Sticker Picker, use the withTheme() method. Default and custom styling options are explained in-depth here. The default dark theme can be used as follows:
Any of the last three may also be used interchangeably in a chain:
What will you do next?
You’ve just scraped the surface in terms of what’s possible with the Bitmoji Kit. In the end, the best way to personalize your app is to tinker around. You can create your own custom theme for the Sticker Picker, show relevant stickers with setSearchText(), or automatically enable Friendmoji if the user’s friend has already connected Snapchat. The list of possibilities is only limited by your creativity!
