menu
Nov 30, 2022
Domagoj Kolega
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.
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 :
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
:
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.
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:
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:
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.
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