Let’s build a custom keyboard for Android

1517067718 lets build a custom keyboard for android

When pondering of development an Android app, we frequently call to mind one thing with a display and a contained serve as. It may well be a recreation, or a software to accomplish a not unusual process.

But apps can are available in a number of styles and sizes. You may just build a carrier that runs within the background and quietly makes existence more uncomplicated for the consumer. You may just create a widget, or a launcher. How about a keyboard?

A keyboard could make each interplay sooner, more uncomplicated and not more vulnerable to mistakes.

Upgrading the instrument keyboard for your software is without doubt one of the maximum profound tactics to customise a software. Most folks use the keyboard as our number one enter system. It’s integral to just about each interplay together with your telephone. In the best-case situation, it might make the whole thing sooner, more uncomplicated, and not more error-prone.

Keyboard apps will also be extremely a success for this explanation why too; simply have a look at the ubiquity of Swype and SwiftKey.

Whether you simply wish to take your Android customization to the following stage, otherwise you’d love to promote a entire new strategy to engage with a sensible software, learn on and let’s discover methods to create an Android keyboard.

Note: This venture is fairly easy and calls for most commonly copying and pating XML script. However, it does come with some extra complex ideas like services and products and inheritance. If you’re satisfied to practice alongside to get a keyboard operating, then any person must be capable of reproduce the app. If you wish to have to grasp what the whole thing does, that is a just right intermediate venture to wrap your head round. You will in fact want Android Studio and the Android SDK already set-up.

Layout recordsdata. LOTS of structure recordsdata

To build our custom keyboard, we’re first going to want to create a new xml report, which can outline the structure and look of our keyboard. That report can be referred to as keyboard_view.xml. To create this, proper click on at the “layout” folder on your “res” listing and make a selection “layout resource file.” In the conversation field that pops up, transparent the textual content the place it says “Root element” and get started typing “keyboard.” Select the primary choice which comes up, which must be: android.inputmethodservice.KeyboardView. Call the report keyboard_view.xml (take note, no capitals for assets!).

You can be greeted via a report having a look like this:

We’re going so as to add a few components now:


We’ve assigned an ID right here so we will be able to seek advice from the keyboard later in our code. The code aligns our keyboard to the ground of the display and the background colour is about to colorPrimary. This colour is the only set in our values > colours.xml report — it’s simple to modify afterward. So simply hop in there and alter the respective colour code to modify the glance a little.

We’ve additionally referred to every other structure for “keyboard preview.” In case you’re scratching your head, that’s the picture of the important thing that flashes up in a huge font when you’re making touch. This assures the consumer they hit the precise key.

As you’ve in all probability guessed, this implies we’d like every other new structure report, the aforementioned keyboard_preview.xml. Create it in simply the similar means, regardless that the basis part this time is Textual contentView.

<Textual contentView xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent" android:layout_height="match_parent"
 </Textual contentView>

Add this code and also you’ll outline the colour of the sq. and the colour of the letter showing within the sq.. I additionally set the alignment to heart, which guarantees it seems how it must.

The subsequent new XML report is known as system.xml. This will pass on your assets folder and feature the basis part input-method. This report will inform Android what form of enter is to be had via your app. Again, you wish to have to switch the boilerplate code that’s there in order that it reads like this:

<input-method xmlns:android="http://schemas.android.com/apk/res/android">
     <subtype android:imeSubtypeMode="keyboard" />

You too can put knowledge equivalent to language in right here afterward.

This is the place we can create the structure for our keyboard — it’s just about the joys phase!

That will pass in a new listing you’ll create (res — xml) and I’m calling mine keys_layout.xml. Replace the code that’s there with this:

<?xml model="1.0" encoding="utf-8"?>
 <Keyboard xmlns:android="http://schemas.android.com/apk/res/android">

This is what we’ll be populating with the keys and their behaviors.

Designing your keyboard

We’ve constructed a bunch of XML recordsdata and now we’re in a position to start out having some a laugh. It’s time to create the structure of the keys!

This is what I used. It’s mainly a moderately tweaked model of a keyboard structure I discovered on-line, with the keys all in usual rows. It’s now not precisely stunning, however it’ll do.

<?xml model="1.0" encoding="utf-8"?>
 <Keyboard xmlns:android="http://schemas.android.com/apk/res/android"
         <Key android:codes="49" android:keyLabel="1" android:keyEdgeFlags="left"/>
         <Key android:codes="50" android:keyLabel="2"/>
         <Key android:codes="51" android:keyLabel="3"/>
         <Key android:codes="52" android:keyLabel="4"/>
         <Key android:codes="53" android:keyLabel="5"/>
         <Key android:codes="54" android:keyLabel="6"/>
         <Key android:codes="55" android:keyLabel="7"/>
         <Key android:codes="56" android:keyLabel="8"/>
         <Key android:codes="57" android:keyLabel="9"/>
         <Key android:codes="48" android:keyLabel="0"/>
         <Key android:codes="-5" android:keyLabel="DEL" android:keyWidth="20%p" android:isRepeatable="true" android:keyEdgeFlags="right"/>
         <Key android:codes="113" android:keyLabel="q" android:keyEdgeFlags="left"/>
         <Key android:codes="119" android:keyLabel="w"/>
         <Key android:codes="101" android:keyLabel="e"/>
         <Key android:codes="114" android:keyLabel="r"/>
         <Key android:codes="116" android:keyLabel="t"/>
         <Key android:codes="121" android:keyLabel="y"/>
         <Key android:codes="117" android:keyLabel="u"/>
         <Key android:codes="105" android:keyLabel="i"/>
         <Key android:codes="111" android:keyLabel="o"/>
         <Key android:codes="112" android:keyLabel="p" android:keyEdgeFlags="right"/>
         <Key android:codes="97" android:keyLabel="a" android:keyEdgeFlags="left"/>
         <Key android:codes="115" android:keyLabel="s"/>
         <Key android:codes="100" android:keyLabel="d"/>
         <Key android:codes="102" android:keyLabel="f"/>
         <Key android:codes="103" android:keyLabel="g"/>
         <Key android:codes="104" android:keyLabel="h"/>
         <Key android:codes="106" android:keyLabel="j"/>
         <Key android:codes="107" android:keyLabel="k"/>
         <Key android:codes="108" android:keyLabel="l"/>
         <Key android:codes="35,64" android:keyLabel="# @" android:keyEdgeFlags="right"/>
         <Key android:codes="-1" android:keyLabel="CAPS" android:keyEdgeFlags="left"/>
         <Key android:codes="122" android:keyLabel="z"/>
         <Key android:codes="120" android:keyLabel="x"/>
         <Key android:codes="99" android:keyLabel="c"/>
         <Key android:codes="118" android:keyLabel="v"/>
         <Key android:codes="98" android:keyLabel="b"/>
         <Key android:codes="110" android:keyLabel="n"/>
         <Key android:codes="109" android:keyLabel="m"/>
         <Key android:codes="46" android:keyLabel="."/>
         <Key android:codes="63,33,58" android:keyLabel="? ! :" android:keyEdgeFlags="right"/>
     <Row android:rowEdgeFlags="bottom">
         <Key android:codes="44" android:keyLabel="," android:keyWidth="10%p"  android:keyEdgeFlags="left"/>
         <Key android:codes="47" android:keyLabel="/" android:keyWidth="10%p" />
         <Key android:codes="32" android:keyLabel="SPACE" android:keyWidth="60%p" android:isRepeatable="true"/>
         <Key android:codes="-4" android:keyBackground="@color/colorPrimary" android:keyLabel="DONE" android:keyWidth="20%p" android:keyEdgeFlags="right"/>

You’ll realize a few attention-grabbing issues right here. The android:codes let us know what each and every key must do. This is what we’ll be receiving via our carrier in a while and you want to ensure the keyLabel (the textual content at the keys) strains up with what it if truth be told does. Well, until your function is to create a “troll keyboard.”

If you put multiple code separated via commas, your keys will scroll via the ones choices if the consumer double or triple faucets. That means we will be able to make a keyboard that works just like the outdated T9 numpad keyboards on Nokia telephones, for example.

Negative codes constitute the constants within the keyboard magnificence. -Five is the identical of KEYCODE_DELETE. Play round, use your creativeness, and spot if you’ll get a hold of a “better keyboard.”

An glaring selection is to make the extra standard keys a little higher. That’s what I’ve began doing.

At your carrier

Now it’s time to create a java magnificence. This goes to be referred to as MyInputMethodService and, because the identify suggests, it’s going to be a carrier. The superclass can be android.inputmethodservice, that means it’s going to inherit homes from that more or less magnificence and behave like an enter system carrier must (with politeness).

Under Interface(s), we’ll be enforcing OnKeyboardActionListener. Start typing after which choose the advice that springs up.

Being a carrier, this implies your app can run within the background after which concentrate out for the instant when it’s wanted – when the consumer selects an edit textual content in every other utility for instance.

Your magnificence can be underlined pink when that is generated, which is as it must enforce the strategies from InputMethodService. You can generate this mechanically via proper clicking for your magnificence and opting for generate — enforce strategies.

Here’s what it must seem like:

public magnificence MyInputMethodService extends InputMethodService implements KeyboardView.OnKeyboardActionListener 

You additionally want to override the onCreateInputView() system, which goes to grasp the keyboard view and upload the structure onto it.

Now upload the next code, remembering to import all categories as vital.

 personal KeyboardView keyboardView;
 personal Keyboard keyboard;
 personal boolean caps = false;
 public View onCreateInputView() 

When the enter view is created, it takes the structure report keyboard_view and makes use of it to outline the way it seems. It additionally provides the keys_layout report we created and returns the view for the gadget to make use of.

I’ve additionally added a Boolean (true or false variable) referred to as caps so we will be able to stay monitor of caps-lock.

The different vital system right here, is the only dealing with key presses. Try this:

 public void onKey(int primaryCode, int[] keyCodes) {
     InputConnection inputConnection = getCurrentInputConnection();
     if (inputConnection != null) 

This is a transfer observation which seems for the important thing code and acts accordingly. When the consumer clicks explicit keys, the code will trade path. KEYCODE_SHIFT adjustments our caps Boolean, units the keyboard to “Shifted,” after which invalidates the keys (to redraw them).

commitText merely sends textual content (which will come with a couple of characters) to the enter box. shipKeyMatch will ship occasions like “return” to the app.

The magnificence in its entirety must seem like this:

public magnificence MyInputMethodService extends InputMethodService implements KeyboardView.OnKeyboardActionListener {
     personal KeyboardView keyboardView;
     personal Keyboard keyboard;
     personal boolean caps = false;
     public View onCreateInputView() 
     public void onPress(int i) 
     public void onRelease(int i) 
     public void onKey(int primaryCode, int[] keyCodes) {
         InputConnection inputConnection = getCurrentInputConnection();
         if (inputConnection != null) 
     public void onText(CharSequence charSequence) 
     public void swipeLeft() 
     public void swipeRight() 
     public void swipeDown() 
     public void swipeUp() 

Testing it out and customization

In order to check your new keyboard, you’ll want to upload it by way of your software’s settings. To do that, pass to Language & Input — Virtual Keyboard — Manage Keyboards and switch at the keyboard you created. Select “OK” a few occasions to brush aside the notifications.

Now open up any app with a textual content enter and convey up your keyboard. You’ll realize a little keyboard icon within the backside proper. Select that after which select your app from the record. If all has long past to plot, your keyboard must now spring to existence!

Play round with other key sizes, customization and contours to create the easiest typing enjoy.

This is a little complicated for new customers, so if you happen to plan on promoting this app, it may well be a just right thought so as to add some textual content to the MainActivity.Java report, explaining how to choose the keyboard. You may just additionally use this with the intention to upload some customization or settings for the customers to tweak.

You may just upload a lot of customization choices. How about letting the consumer trade the peak and measurement in their keyboard? You may just allow them to trade the colours, use other icons for the keys (android:keyicon), or trade the photographs fully (android:keybackground=@drawable/). For extra complex choices — like converting the colour of each and every person key — you’ll want to use Java, now not XML.

Another not unusual function of keyboards is so as to add sounds on each and every click on. You can do that simply via including a new system on your carrier and calling it onKey.

The great factor is that Android if truth be told supplies some sounds for us in a position to make use of, so we will be able to do that very simply:

personal void playSound(int keyCode)

Now simply use playSound() on the most sensible of the onKey system and remember to create a vibrator and audio supervisor (personal AudioManager am; personal Virbator v;). You may just simply as simply change out the important thing sounds for your individual within the property folder, or trade the length and behaviour of the virbration.

Closing feedback

Now you have got your very personal custom keyboard! Another problem ticked off of your Android construction record. Play round with other key sizes, customization, and contours to create the easiest typing enjoy.

Be certain to proportion your completed merchandise within the feedback down under! Happy text-inputting!

Leave a Reply

Your email address will not be published. Required fields are marked *