How to create a custom keyboard with Xamarin Forms (Android)
Tags: android, xamarin, keyboard, apps
Published: 2019-06-02 18:13:32

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](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/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](https://github.com/xamarin/Xamarin.Forms/blob/release-3.6.0-rc1/Xamarin.Forms.Platform.Android/Renderers/EntryRenderer.cs#L113) 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:
{% gist https://gist.github.com/FabriBertani/25a1bd56c2a6dc80ab719af356c39bd7 %}

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:

![alt-text](https://cdn-images-1.medium.com/max/1600/1*IxuJW3X6d347SfjvuDhtgQ.jpeg)

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

{% gist https://gist.github.com/FabriBertani/c8892d3d2501d71d43c7117491fb2bf0 %}

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`

{% gist https://gist.github.com/FabriBertani/587bdf90a70d2decb71e3b61b6df7dd8 %}

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_.

{% gist https://gist.github.com/FabriBertani/576605a752ee0ec4ed3075b3086c80b6 %}

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.

{% gist https://gist.github.com/FabriBertani/136d771e5d88314989311883e8e02700 %}

{% gist https://gist.github.com/FabriBertani/8152887a56ee5ec1f666621140ec963f %}

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


{% gist https://gist.github.com/FabriBertani/3557a0ccf07e6e2977e28454bd144bad %}

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:

{% gist https://gist.github.com/FabriBertani/80420b4b8d495192d5e7b0a35bd5f5ed %}

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](http://www.temblast.com/ref/akeyscode.htm). You can also see the [official Android](https://developer.android.com/reference/android/view/KeyEvent) docs or even the [Xamarin Android](https://developer.android.com/reference/android/view/KeyEvent) 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:


{% gist https://gist.github.com/FabriBertani/e4c563ca34d2d1c15ee959d1532f5a8d %}

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.


{% gist https://gist.github.com/FabriBertani/22a1f78fec51ea29f978fa66bbe5085f %}

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.

{% gist https://gist.github.com/FabriBertani/3b1883f86e73f73b8b5298b59da429d1 %}

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


{% gist https://gist.github.com/FabriBertani/eede9f619d276f48d425471655bd3e5a %}

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.


{% gist https://gist.github.com/FabriBertani/3094d0a344d5d996c48b6aaa05f03f13 %}

Here’s the final result:

![alt-text](https://cdn-images-1.medium.com/max/1600/1*uQOUSV87TkUnp1HLkunf9A.gif)

You can see the complete sample repository on GitHub

{% github https://github.com/FabriBertani/CustomKeyboardXamarinForms %}

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

Thanks for reading 😁