Some time ago a client requested a special keyboard for his application, which had to have certain conditions that the regular Android keyboard didn’t meet.

Researching

The first option that came to mind was to add a disabled Entry with a GestureRecognizer that displays a control with an animation to emulate the appearance of the keyboard, but quickly discard the idea as it wasn’t reusable.
The best option was taking the native path, so I spent quite time researching, but I only found solutions that leads to create a keyboard as a service. I knew that our client wouldn’t like the idea of having to download a separate keyboard to only use it in the application and I needed a solution that should work with Xamarin Forms!
As I had to think about its implementation in Xamarin Forms I decided that the best option was to try with a Custom Renderer of the Entry control since it uses EditText as base for the native control and try to apply all those solutions that I had read previously in it.

Let’s get down to work!

Note: in order to correctly implement the custom keyboard we are going to need that the Xamarin Forms version to be 3.6.0.135200-pre1 or higher because we need the OnFocusChangeRequest method which is only available from this version.

First we’re going to create the custom control, which will have the next bindable property:

• EnterCommand: typeof ICommand, to bind Enter key press action.

This is how our custom control will be:

Now we’re moving to our Android project and keep working there (later we will return to our Xamarin Forms project).
Before we go on, ensure to have all the required Android packages:

Next we’re going to edit our Android MainActivity to avoid that native keyboard to show up, for that we will use the SoftInputMode.StateAlwaysHidden attribute

What are we going to do next is start to define our custom keyboard.
Inside the Resource/layout folder we are going to create an Android layout named CustomKeyboard typeof InputMethodService.Keyboard

Firstly we set the alignParentBottom property to true because we want our keyboard to be visible from the bottom side of the screen.
Secondly we set the keyPreviewLayout property to null because on this sample we don’t want a response layout when some key is pressed.
As you can see in the keyBackground property refers to a drawable called keyboard_background, which doesn’t exist yet, so we are going to create it inside the Drawable folder as an xml file, there we are going to define a state selector for the two states our keys can have: normal (without pressing) and pressed.

As you can see, we are going to have to create another two xml inside the Drawable folder, in which we are going to define the look and feel of our keyboard to match (or not) with our application theme.

Now within the values folder we will create an xml named ids which we will need later.

Next, inside the Resources folder we will create a new folder called xml. Within it we will create an xml in which we will define the keys of our special keyboard.
In our case our keyboard will be called special_keyboard, it will be typeof Keyboard in which we will define the horizontal and vertical size of our keys, the horizontalGap and verticalGap properties refer to the spacing and dimension type %p (in case you’ve never seen it) is a kind of percentage relative to the parent view.
Each row of keys will be included within sections delimited by the <Row></Row> tags.
Our first row will be occupied with a separating line to mark the limit of our keyboard. The Row tag will have a height of 4dp and we will indicate that it is at the top of our keyboard through the rowEdgeFlags property. Then we will add a line as a Key within the Row tags that it would take the full width of the keyboard. Our separator is just another xml that we will create inside the Drawable folder:

Each Key will have two strictly necessary properties: codes and keyLabel code will be a number that tells the OS what letter or symbol the key corresponds to. At this point I want to clarify something: I found dozens of samples about creating customs keyboards for Android and they have used many different codes to refer to a certain symbol or key. The best list of codes that has been fulfilled most of all that I have tried is the following: Android Keycodes. You can also see the official Android docs or even the Xamarin Android but none of them has worked with accuracy.
keyLabel is the string that is going to be shown in our key, it is very important to put this property even if we don’t want to show any text in our key (in that case it would be keyLabel="").
For style decision, at the beginning and at the end of each row, I add a Key with code equal to 0 (so you don’t have any action), the width also of 0 and a spacing of 2%p, these keys will also carry the keyEdgeFlags property with the left or right values as appropriate.
Here our full keyboard:

Finally before starting to work in our renderer, we will create another folder within Resources, called anim with an xml that we are going to call slide_in_bottom this will be the animation with which our keyboard will appear on the screen.

Now we will create a new folder on our Android project, named Renderers and there we will create our renderer which we will call EntryWithCustomKeyboardRenderer which will extend from EntryRenderer and implement the interface IOnKeyboardActionListener. Also within our custom renderer we will create a private class called NullListener which is going to extend from Java.Lang.Object and implement the interface IOnKeyboardActionListener which we are going to use in our renderer to avoid null exceptions.

Finally, we return to our Xamarin Forms project and implement our special keyboard.

And in our code behind we implement the EnterCommand that we created previously, for the action that we want to happen when we press the Enter key of our custom keyboard.

Here’s the final result:

You can see the complete sample repository on GitHub

In the next post we will see how to make a complex custom keyboard!

Thanks for reading 😁