Creating a custom keyboard for sharing custom content in chat applications

Introduction

Are you building an app for sharing custom content to chat applications? Then you are in the right place because in this tutorial we will show how to create a custom Android keyboard that supports sending custom-rich content such as images, videos, sounds, gifs, etc. Custom soft keyboard, such as the one you will make with the help of this tutorial, can be used in every application where data, other than text, can be shared. The best example of such a keyboard is the Giphy keyboard.

In this tutorial, we will build a custom keyboard for sharing animal pictures.

Step 0: Getting started

Soft keyboard is an input method meaning that it opens when an EditText comes in focus and provides content that’s inserted into the EditText. However, input fields of most chat applications support only simple mime-types, such as image/jpeg and image/gif. Supported mime types for text fields can be found with this line of code:

val supportedMimeTypes: Array<String> = EditorInfoCompat.getContentMimeTypes(editorInfo)

To get around that, we are going to share content with an Intent.

Basically, we are building a Service. According to the official Android documentation, it represents an application component representing either an application’s desire to perform a longer-running operation while not interacting with the user or to supply functionality for other applications to use — we will be using the latter. Since our app will provide the keyboard to other applications, our service class will extend InputMethodService, a subclass of a Service. Before we start coding the input method service, we need to add an <service> entry in AndroidManifest.xml

In order to enable our device to recognize our service as an input method, it is necessary to add the meta-data tag and set the resource attribute to @xml/method (even though that file is empty), because the meta-data tag won’t work without that attribute set.

For android:name attribute, you need to set a fully-qualified name of your implementation of InputMethodService, in this case, that is studio.codable.customkeyboard.CustomKeyboardInputService. No need to worry about spelling, the Android Studio will auto-complete it for you. :)

Other interesting attributes are android:label and android:permission. The label represents the name of your keyboard, which will be displayed in the input method chooser, and the permission is the permission that we need for our service, in this case, for the bind input method.

Step 1: Set up the layouts

Talking about the UI, we will create two layout files: one for the keyboard and for the animal list item.

The keyboard layout is placed in the custom_keyboard.xml:

While the animal list is loading, a progress bar will be displayed for a better user experience.

The layout for the list item used in the RecyclerView is placed in custom_keyboard_item.xml:

Step 2: Adding the adapter

Since we are using a RecyclerView for displaying the animal list, we will need an adapter. So we will create a CustomKeyboardAdapter for inflating recycler view items and handling click events on those items.

If you had any problems inflating CustomKeyboardItem, as I had, make sure that you set android:theme attribute of the MaterialCardView to the theme of your application.

Step 3: DataManager

DataManager is a class that helps us work with raw data, and here the raw data are images. I would say that this class is the heart of how this custom keyboard works. We are working with sharing files and DataManager is a class that has methods for data management. DataManager has two methods: shareAnimal and getKeyboardSharingIntent.

ShareAnimal is a method that downloads a certain file or takes it from cache if it’s been previously downloaded. Then, it returns the file through a callback function.

GetKeyboardSharingIntent is a method that creates an URI from the provided image file and passes it to a newly created Intent, which this method then returns.

Step 4: CustomKeyboardInputService

CustomKeyboardInputService is an implementation of InputMethodService.

InputMethodService provides a standard implementation of an InputMethod, which final implementations can extend and customize its functionality. Also, even though it is a service, it has a user interface. In addition to the usual Service lifecycle methods, this class introduces some new, specific callbacks which we will use: onCreateInputView and onStartInputView. We use them to inflate CustomKeyboardLayout and to set everything up, respectively.

For handling animal list item clicks, we will create the: startShareActivity function. First, we call the shareAnimal method from DataManager, and then, with the resulting file, we invoke getKeyboardSharingIntent which will then return an Intent that will be used to start an activity.

Except for that, startShareActivity, after the intent is started, switches the keyboard to the previous input method.

And look what we created:

Step 5: Choosing the input method

This keyboard has a little keyboard icon in the top right, if you click it, this will show up:

It is an input method chooser, where you can choose between all input methods that your device currently has installed.

It is also worth mentioning that some devices natively put the input method chooser somewhere on the screen, but some don’t so it’s our job to ensure that users can switch the keyboard if they decide not to share custom data.

Since we are not using regular content committing, but rather sending an intent to the application which opened the keyboard, we experience different behaviour across different chat applications. For example, Whatsapp or Facebook Messenger will show you a default screen for sharing something in that application, and Slack will also open a default screen for sharing, but it will then recognize that you want to share that content where the current edit text is and it will set that content there.

Conclusion

In this tutorial you made a custom keyboard for sharing animal images in chat applications.

Congratulations!

If you are interested more in our work and what we do, go check out or website!

Link for Github project: https://github.com/kolegad/custom-keyboard