How To Install Lao Keyboard On Android

Android custom keyboard development code

When thinking of building an Android app, we frequently recollect of something with a screen and a contained function. It could exist a game, or a tool to perform a common task.

But apps can come in a diverseness of shapes and sizes. You could build a service that runs in the background and quietly makes life easier for the user. You could create a widget, or a launcher. How about a keyboard?

A keyboard can brand every interaction quicker, easier and less decumbent to errors.

Upgrading the software keyboard on your device is 1 of the most profound ways to customize a device. Most of us use the keyboard equally our chief input method. It's integral to virtually every interaction with your phone. In the all-time-instance scenario, it can brand everything quicker, easier, and less fault-prone.

Keyboard apps tin can be highly successful for this reason likewise; just expect at the ubiquity of Swype and SwiftKey.

Whether you just desire to take your Android customization to the adjacent level, or you lot'd like to sell a whole new way to interact with a smart device, read on and let's explore how to create an Android keyboard.

Note:This project is relatively simple and requires mostly copying and pating XML script. However, it does include some more advanced concepts similar services and inheritance. If you lot're happy to follow along to get a keyboard running, then anyone should exist able to reproduce the app. If you want to understand what everything does, this is a skilful intermediate project to wrap your caput effectually. Y'all will of course need Android Studio and the Android SDK already set-up.

Layout files. LOTS of layout files

To build our custom keyboard, we're first going to need to create a new xml file, which will define the layout and appearance of our keyboard. That file will be called keyboard_view.xml. To create this, right click on the "layout" folder in your "res" directory and cull "layout resource file." In the dialog box that pops up, clear the text where information technology says "Root element" and commencement typing "keyboard." Select the first choice which comes upwards, which should be: android.inputmethodservice.KeyboardView. Call the file keyboard_view.xml (remember, no capitals for resources!).

You will be greeted by a file looking like this:

We're going to add a few elements at present:

Code

            android:id="@+id/keyboard_view" android:keyPreviewLayout="@Layout/key_preview" android:layout_alignParentBottom="true" android:background="@color/colorPrimary">

We've assigned an ID here so we can refer to the keyboard subsequently in our code. The code aligns our keyboard to the bottom of the screen and the background color is set to colorPrimary. This color is the one set in our values > colors.xml file — it's like shooting fish in a barrel to alter later on. So just hop in at that place and change the respective color lawmaking to change the look a petty.

We've also referred to some other layout for "keyboard preview." In case yous're scratching your head, that'southward the image of the key that flashes up in a large font when you make contact. This assures the user they hit the right key.

As y'all've possibly guessed, this means we need some other new layout file, the aforementioned keyboard_preview.xml. Create it in but the same way, though the root element this time is TextView.

Code

            <TextView xmlns:android="http://schemas.android.com/apk/res/android"      android:layout_width="match_parent" android:layout_height="match_parent"      android:groundwork="@color/colorPrimaryDark"      android:textColor="@color/colorPrimary"      android:textAlignment="center"      android:textSize="30sp">    </TextView>

Add this code and you'll define the colour of the square and the color of the letter appearing in the square. I also set up the alignment to heart, which ensures it looks the way information technology should.

The next new XML file is called method.xml. This will go in your resources binder and have the root element input-method. This file volition tell Android what type of input is available through your app. Again, you want to replace the boilerplate lawmaking that's at that place so that it reads similar this:

Code

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

Yous can also put information such every bit language in here after.

This is where we will create the layout for our keyboard — it's nearly the fun role!

That will go in a new directory yous'll create (res — xml) and I'm calling mine keys_layout.xmfifty. Replace the code that's there with this:

Code

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

This is what nosotros'll be populating with the keys and their behaviors.

Designing your keyboard

We've congenital a bunch of XML files and now we're ready to start having some fun. It's time to create the layout of the keys!

This is what I used. Information technology's basically a slightly tweaked version of a keyboard layout I found online, with the keys all in standard rows. It'south non exactly beautiful, simply it'll practise.

Lawmaking

            <?xml version="1.0" encoding="utf-8"?>  <Keyboard xmlns:android="http://schemas.android.com/apk/res/android"      android:keyWidth="10%p"      android:horizontalGap="3px"      android:verticalGap="3px"      android:keyHeight="60dp"      android:keyTextColor="@color/colorAccent"      android:keyBackground="@colour/colorPrimaryDark"      >      <Row>          <Key android:codes="49" android:keyLabel="ane" android:keyEdgeFlags="left"/>          <Primal android:codes="50" android:keyLabel="2"/>          <Key android:codes="51" android:keyLabel="three"/>          <Key android:codes="52" android:keyLabel="4"/>          <Key android:codes="53" android:keyLabel="5"/>          <Cardinal android:codes="54" android:keyLabel="half dozen"/>          <Key android:codes="55" android:keyLabel="7"/>          <Key android:codes="56" android:keyLabel="8"/>          <Key android:codes="57" android:keyLabel="9"/>          <Cardinal android:codes="48" android:keyLabel="0"/>          <Key android:codes="-five" android:keyLabel="DEL" android:keyWidth="twenty%p" android:isRepeatable="true" android:keyEdgeFlags="right"/>      </Row>      <Row>          <Key android:codes="113" android:keyLabel="q" android:keyEdgeFlags="left"/>          <Key android:codes="119" android:keyLabel="w"/>          <Key android:codes="101" android:keyLabel="eastward"/>          <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"/>          <Primal android:codes="105" android:keyLabel="i"/>          <Key android:codes="111" android:keyLabel="o"/>          <Key android:codes="112" android:keyLabel="p" android:keyEdgeFlags="right"/>      </Row>      <Row>          <Key android:codes="97" android:keyLabel="a" android:keyEdgeFlags="left"/>          <Key android:codes="115" android:keyLabel="south"/>          <Key android:codes="100" android:keyLabel="d"/>          <Key android:codes="102" android:keyLabel="f"/>          <Primal android:codes="103" android:keyLabel="g"/>          <Fundamental android:codes="104" android:keyLabel="h"/>          <Key android:codes="106" android:keyLabel="j"/>          <Central android:codes="107" android:keyLabel="1000"/>          <Primal android:codes="108" android:keyLabel="l"/>          <Fundamental android:codes="35,64" android:keyLabel="\# \@" android:keyEdgeFlags="right"/>      </Row>      <Row>          <Fundamental android:codes="-1" android:keyLabel="CAPS" android:keyEdgeFlags="left"/>          <Central 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"/>          <Cardinal android:codes="110" android:keyLabel="northward"/>          <Key android:codes="109" android:keyLabel="k"/>          <Central android:codes="46" android:keyLabel="."/>          <Central android:codes="63,33,58" android:keyLabel="\? ! :" android:keyEdgeFlags="correct"/>      </Row>      <Row android:rowEdgeFlags="bottom">          <Fundamental 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="truthful"/>          <Key android:codes="-4" android:keyBackground="@colour/colorPrimary" android:keyLabel="DONE" android:keyWidth="20%p" android:keyEdgeFlags="right"/>      </Row>  </Keyboard>

Y'all'll find a few interesting things hither. The android:codes tell us what each key needs to do. This is what nosotros'll exist receiving through our service shortly and you need to make sure the keyLabel (the text on the keys) lines up with what it really does. Well, unless your objective is to create a "troll keyboard."

If you identify more than than ane code separated by commas, your keys will scroll through those options if the user double or triple taps. That way we can make a keyboard that works like the onetime T9 numpad keyboards on Nokia phones, for instance.

Negative codes represent the constants in the keyboard class. -five is the equivalent of KEYCODE_DELETE. Play around, use your imagination, and see if y'all can come with a "ameliorate keyboard."

An obvious choice is to make the more popular keys a petty larger. That's what I've started doing.

At your service

Now it's fourth dimension to create a java form. This is going to be called MyInputMethodService and, as the name suggests, information technology'southward going to be a service. The superclass will be android.inputmethodservice, pregnant it volition inherit properties from that kind of class and behave like an input method service should (politely).

Under Interface(southward), nosotros'll be implementing OnKeyboardActionListener. Showtime typing and and then select the proffer that springs upwards.

Being a service, this ways your app can run in the background and then listen out for the moment when it is needed – when the user selects an edit text in some other application for example.

Your course volition exist underlined red when this is generated, which is because it needs to implement the methods from InputMethodService. You can generate this automatically by right clicking on your form and choosing generate — implement methods.

Here'due south what it should look like:

Code

            public class MyInputMethodService extends InputMethodService implements KeyboardView.OnKeyboardActionListener {          public MyInputMethodService() {          super();      }            @Override      public void onPress(int i) {        }        @Override      public void onRelease(int i) {        }        @Override      public void onKey(int i, int[] ints) {        }        @Override      public void onText(CharSequence charSequence) {        }        @Override      public void swipeLeft() {        }        @Override      public void swipeRight() {        }        @Override      public void swipeDown() {        }        @Override      public void swipeUp() {        }  }

You lot also demand to override the onCreateInputView() method, which is going to grab the keyboard view and add the layout onto it.

At present add the following code, remembering to import all classes every bit necessary.

Code

            private KeyboardView keyboardView;  private Keyboard keyboard;    individual boolean caps = imitation;    @Override  public View onCreateInputView() {      keyboardView = (KeyboardView) getLayoutInflater().inflate(R.layout.keyboard_view, null);      keyboard = new Keyboard(this, R.xml.keys_layout);      keyboardView.setKeyboard(keyboard);      keyboardView.setOnKeyboardActionListener(this);      return keyboardView;  }

When the input view is created, it takes the layout file keyboard_view and uses information technology to define how it looks. It also adds the keys_layout file we created and returns the view for the organisation to use.

I've also added a Boolean (true or imitation variable) called caps so we can go along track of caps-lock.

The other important method here, is the ane handling key presses. Try this:

Code

            @Override  public void onKey(int primaryCode, int[] keyCodes) {      InputConnection inputConnection = getCurrentInputConnection();      if (inputConnection != null) {          switch(primaryCode) {              example Keyboard.KEYCODE_DELETE              :                  CharSequence selectedText = inputConnection.getSelectedText(0);                    if (TextUtils.isEmpty(selectedText)) {                      inputConnection.deleteSurroundingText(1, 0);                  } else {                      inputConnection.commitText("", 1);                  }              example Keyboard.KEYCODE_SHIFT:                  caps = !caps;                  keyboard.setShifted(caps);                  keyboardView.invalidateAllKeys();                  pause;              case Keyboard.KEYCODE_DONE:                  inputConnection.sendKeyEvent(new KeyEvent(KeyEvent.ACTION_DOWN, KeyEvent.KEYCODE_ENTER));                    interruption;              default :                  char code = (char) primaryCode;                  if(Character.isLetter(code) && caps){                      lawmaking = Character.toUpperCase(code);                  }                  inputConnection.commitText(Cord.valueOf(lawmaking), 1);            }      }    }

This is a switch statement which looks for the key code and acts accordingly. When the user clicks specific keys, the code will change course. KEYCODE_SHIFT changes our caps Boolean, sets the keyboard to "Shifted," and then invalidates the keys (to redraw them).

commitText just sends text (which can include multiple characters) to the input field. sendKeyEvent will send events similar "return" to the app.

The class in its entirety should look like this:

Code

            public class MyInputMethodService extends InputMethodService implements KeyboardView.OnKeyboardActionListener {        private KeyboardView keyboardView;      private Keyboard keyboard;        private boolean caps = simulated;        @Override      public View onCreateInputView() {          keyboardView = (KeyboardView) getLayoutInflater().inflate(R.layout.keyboard_view, nix);          keyboard = new Keyboard(this, R.xml.keys_layout);          keyboardView.setKeyboard(keyboard);          keyboardView.setOnKeyboardActionListener(this);          render keyboardView;      }        @Override      public void onPress(int i) {        }        @Override      public void onRelease(int i) {        }            @Override      public void onKey(int primaryCode, int[] keyCodes) {          InputConnection inputConnection = getCurrentInputConnection();          if (inputConnection != nada) {              switch(primaryCode) {                  case Keyboard.KEYCODE_DELETE              :                      CharSequence selectedText = inputConnection.getSelectedText(0);                        if (TextUtils.isEmpty(selectedText)) {                          inputConnection.deleteSurroundingText(1, 0);                      } else {                          inputConnection.commitText("", i);                      }                  case Keyboard.KEYCODE_SHIFT:                      caps = !caps;                      keyboard.setShifted(caps);                      keyboardView.invalidateAllKeys();                      break;                  case Keyboard.KEYCODE_DONE:                      inputConnection.sendKeyEvent(new KeyEvent(KeyEvent.ACTION_DOWN, KeyEvent.KEYCODE_ENTER));                        pause;                  default :                      char code = (char) primaryCode;                      if(Grapheme.isLetter(code) && caps){                          lawmaking = Graphic symbol.toUpperCase(code);                      }                      inputConnection.commitText(String.valueOf(code), 1);                }          }        }          @Override      public void onText(CharSequence charSequence) {        }        @Override      public void swipeLeft() {        }        @Override      public void swipeRight() {        }        @Override      public void swipeDown() {        }        @Override      public void swipeUp() {        }  }

Testing it out and customization

In order to test your new keyboard, you'll need to add it via your device's settings. To do this, go to Language & Input — Virtual Keyboard — Manage Keyboards and plow on the keyboard yous created. Select "OK" a few times to dismiss the notifications.

At present open up up any app with a text input and bring up your keyboard. Y'all'll notice a little keyboard icon in the bottom right. Select that and so selection your app from the list. If all has gone to program, your keyboard should at present leap to life!

Play effectually with different cardinal sizes, customization and features to create the perfect typing feel.

This is a piffling confusing for new users, so if you plan on selling this app, it might be a good idea to add some text to the MainActivity.Java file, explaining how to select the keyboard. You lot could also use this in order to add together some customization or settings for the users to tweak.

You could add plenty of customization options. How about letting the user modify the height and size of their keyboard? You could let them change the colors, use different icons for the keys (android:keyicon), or modify the images entirely (android:keybackground=@drawable/). For more advanced options — like changing the color of each private key — y'all'll need to utilize Coffee, not XML.

Another common feature of keyboards is to add sounds on each click. You tin can do this easily by calculation a new method in your service and calling itonKey.

The prissy matter is that Android really provides some sounds for us set up to use, and so we can exercise this very easily:

Code

            private void playSound(int keyCode){      v.vibrate(20);     am = (AudioManager)getSystemService(AUDIO_SERVICE);     switch(keyCode){         case 32:             am.playSoundEffect(AudioManager.FX_KEYPRESS_SPACEBAR);             suspension;         example Keyboard.KEYCODE_DONE:         case x:             am.playSoundEffect(AudioManager.FX_KEYPRESS_RETURN);             break;         case Keyboard.KEYCODE_DELETE:             am.playSoundEffect(AudioManager.FX_KEYPRESS_DELETE);             break;         default: am.playSoundEffect(AudioManager.FX_KEYPRESS_STANDARD);     } }

Now just useplaySound() at the acme of theonKeymethod and brand certain to create a vibrator and audio manager (individual AudioManager am; private Virbator v;). You could just every bit easily bandy out the primal sounds for your own in the avails binder, or alter the elapsing and behavior of the virbration.

Endmost comments

Now you have your very own custom keyboard! Another challenge ticked off of your Android development list. Play around with different key sizes, customization, and features to create the perfect typing experience.

Exist sure to share your finished products in the comments down below! Happy text-inputting!