Build from Scratch Archives - Page 2 of 2

In this tutorial learn how to build your own Android Custom Keyboard layout using Android Studio by writing few lines of code. Here is a preview of the custom keyboard layout we are going to build today: The Keyboard follow Google's Android Material Design Guidelines. Android Custom Keyboard Layout Getting Started Open Android Studio and create an empty project with No activity. Creating Layout Once the project build is finished, first go to colors.xml and set color theme for your keyboard with following name attributes: #008577 #00574B #D81B60 #008577 #00574B #D81B60 Now in res folder, create an Android Resource directory with name 'xml' inside this directory create a xml file with name method.xml. In this file we will set the default language for our keyboard layout. Now, we will create the layout for our Android Custom keyboard as shown in the image above. Go to xml directory and create a new xml resource file with name 'qwerty.xml' Create the layout of your custom keyboard as follows: Now go to res folder and create a new android layout resource folder, with name 'layout'. In this layout folder create a layout resource file with name 'keyboard.xml' Inside keyboard.xml we will create the KeyboardView and set its layout attributes. The code for keyboardView is as follows: <android.inputmethodservice.KeyboardView xmlns:android"http://schemas.android.com/apk/res/android" android:orientation"vertical" android:layout_alignParentBottom"true" android:keyTextColor"@android:color/white" android:keyBackground"@drawable/key_background" android:keyPreviewLayout"@layout/key_preview" android:background"@color/keyboard_background_color" android:layout_width"match_parent" android:layout_height"wrap_content"> Missing few attributes? Don't worry! in res/drawable folder create key_background.xml. This will be the background of our key. In key_background as mentioned, we will need a different background drawable for different state of our key i.e., if its pressed or its in normal or default state. For this create two more drawable files one normal.xml and another pressed.xml. The code for normal.xml is as follows: And the code for pressed.xml is simple as follows: Once we are done with background color of keys in different state, now lets set the text attributes of our keyboard keys. In android layout resource directory, create a layout resource file named 'key_preview.xml'. We will now using the TextView widget, set the attributes of our key text. Ta Da! Now that we are done with layout, lets move ahead towards coding Android Custom Keyboard Layout. Coding the android custom keyboard layout In java folder, under respective directory of your app, create a Service Class that extends InputMethodService and implements KeyboardView.OnKeyboardActionListener. This class will implements few methods, implement them and write the code as shown below: package com.androiddvlpr.androiddvlprkeyboard; import android.annotation.SuppressLint; import android.annotation.TargetApi; import android.inputmethodservice.InputMethodService; import android.inputmethodservice.Keyboard; import android.inputmethodservice.KeyboardView; import android.media.AudioManager; import android.os.Build; import android.support.annotation.RequiresApi; import android.view.KeyEvent; import android.view.View; import android.view.inputmethod.InputConnection; @TargetApi(Build.VERSION_CODES.CUPCAKE) @RequiresApi(api Build.VERSION_CODES.CUPCAKE) public class AndroidDvlprKeyboard extends InputMethodService implements KeyboardView.OnKeyboardActionListener { private KeyboardView keyboardView; private Keyboard keyboard; Boolean isCaps false; @Override public void onPress(int primaryCode) { } @Override public void onRelease(int primaryCode) { } @SuppressLint("InflateParams") @Override public View onCreateInputView() { keyboardView (KeyboardView) getLayoutInflater().inflate(R.layout.keyboard,null); keyboard new Keyboard(this, R.xml.qwerty); keyboardView.setKeyboard(keyboard); keyboardView.setOnKeyboardActionListener(this); return keyboardView; } @Override public void onKey(int primaryCode, int keyCodes) { InputConnection inputConnection getCurrentInputConnection(); playClick(primaryCode); switch (primaryCode){ case Keyboard.KEYCODE_DELETE: inputConnection.deleteSurroundingText(1,0); break; case Keyboard.KEYCODE_SHIFT: isCaps !isCaps; keyboard.setShifted(isCaps); keyboardView.invalidateAllKeys(); break; case Keyboard.KEYCODE_DONE: inputConnection.sendKeyEvent(new KeyEvent(KeyEvent.ACTION_DOWN,KeyEvent.KEYCODE_ENTER)); break; default: char code (char) primaryCode; if(Character.isLetter(code) && isCaps){ code Character.toUpperCase(code); } inputConnection.commitText(String.valueOf(code),1); } } private void playClick(int i){ AudioManager audioManager (AudioManager) getSystemService(AUDIO_SERVICE); switch(i){ case 32: audioManager.playSoundEffect(AudioManager.FX_KEYPRESS_SPACEBAR); break; case Keyboard.KEYCODE_DONE: case 10: audioManager.playSoundEffect(AudioManager.FX_KEYPRESS_RETURN); break; case Keyboard.KEYCODE_DELETE: audioManager.playSoundEffect(AudioManager.FX_KEYPRESS_DELETE); break; default: audioManager.playSoundEffect(AudioManager.FX_KEYPRESS_STANDARD); } } @Override public void onText(CharSequence text) { } @Override public void swipeLeft() { } @Override public void swipeRight() { } @Override public void swipeDown() { } @Override public void swipeUp() { } } Manifesting Before you build the app, go to AndroidManifest.xml file in the manifest folder and don't forget to declare your service as mentioned below: You can download this app source code from direct link here. Are you interested in customizing the keyboard buttons further? See here our tutorial on customizing android buttons. Like to create an app from scratch? See here Create Reddit Android App from scratch.

Build from Scratch

Android Custom Keyboard Layout Tutorial

Reddit Android App Development | Lets Build that App

Jetpack Compose Loading Spinner Tutorial : 3 Easy Steps

Android Jetpack Navigation, Simplifying App Navigation

Android ViewPager2 : Everything to know

Android Intent Flags: Everything You Need to Know

Sign Up for Our Newsletters