Nov 30, 2022


Creating a custom
keyboard
for
sharing
custom content in
chat
applications

Domagoj Kolega

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.

Intro keyboard

Step 0: Getting started


Soft keyboard is an input method meaning that it opens when an input field comes in focus and provides content that’s inserted into it. 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 the AndroidManifest.xml file:



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 the 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, Android Studio will auto-complete it for you. :)

Other interesting attributes :

  • android:label -> the name of your keyboard which will be displayed in the input method chooser
  • android:permission -> the permission that we need for our service (in our 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 (in our case the raw data are images). I would say that this the heart of the custom keyboard.

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 returns a Intent with the newly created URI:




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:

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:


The final result:


Final keyboard

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 not all devices natively have the input method chooser placed on the screen, so it’s our job to provide it so that users can easily switch between different input methods.

Since we are not using regular content committing, but rather sending an intent to the application which opened the keyboard, we can experience different behaviour across different chat applications.

For example, Whatsapp and Facebook Messenger will show you a default screen for sharing content in their application, while Slack will also open a default screen for sharing, but it will then recognize that you want to share the content within the chat and will simply redirect you to the chat and copy the content in the chat input field.

Input method

Conclusion


In this tutorial, you made a custom keyboard which can share custom image data in chat applications. Congratulations!

If you found this useful, keep up with us for more upcoming blogs. ;)

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

previous blog
back to all blogs