Previously, I shown you how to create a System Keyboard for Android with Android Studio. Today, you are going to create an In-App Keyboard for Android Apps. An In-App Keyboard is a custom Keyboard which will be used exclusively within your Android Application.

Note that you can also watch this tutorial on YouTube :

 

Creating the layout file for the Keyboard

First, we need to create the layout file for the Keyboard. Our Keyboard is a custom compound view which will be inflated from the below XML layout file. This is an example of layout. You can use whatever layout you want to arrange the keys like you want. So, you can be creative with your In-App Keyboard.

This is our layout file for the Keyboard :

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/button_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1"/>
<Button
android:id="@+id/button_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="2"/>
<Button
android:id="@+id/button_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3"/>
<Button
android:id="@+id/button_4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="4"/>
<Button
android:id="@+id/button_5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="5"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/button_6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="6"/>
<Button
android:id="@+id/button_7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="7"/>
<Button
android:id="@+id/button_8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="8"/>
<Button
android:id="@+id/button_9"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="9"/>
<Button
android:id="@+id/button_0"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="0"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/button_delete"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Delete"/>
<Button
android:id="@+id/button_enter"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:text="Enter"/>
</LinearLayout>
</merge>
view raw keyboard.xml hosted with ❤ by GitHub

Like you can see, our Keyboard will have numbers from 0 to 9 but also a delete and an enter buttons.

 

Creating the layout of the Main Activity

To try our In-App Keyboard, we create a Main Activity with a dedicated layout. Our layout will have an EditText and our In-App Keyboard implementation at the bottom. Note that our implementation is called MyKeyboard.

We are going to put all the code associated to the Keyboard in a dedicated class to make easier the reusability of the Keyboard in another activity.

The layout will have the following form :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.ssaurel.inappkeyboard.MainActivity">
<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#c9c9f1"
android:layout_margin="50dp"
android:padding="5dp"
android:layout_alignParentTop="true"
/>
<com.ssaurel.inappkeyboard.MyKeyboard
android:id="@+id/keyboard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentBottom="true"
/>
</RelativeLayout>
view raw activity_main.xml hosted with ❤ by GitHub

 

Writing the Java code for the Keyboard

Next step is to write the Java code of our In-App Keyboard. Called MyKeyboard, our implementation extends the LinearLayout view and implements the OnClickListener interface to react to the users’ clicks.

In the init method, we inflate the layout for our Keyboard. We get the references for the buttons of our Keyboard. Then, we set the View as the OnClickListener instance for all of these buttons. Finally, we associate each button to an input String with the keyValues SparseArray. When a user will click on a button, we will use this SparseArray to return the associated String.

In the onClick method, we use an InputConnection. It mimics the way a system Keyboard communicates with an EditText. Like that, we can avoid the hard links and we make easier the reusability of our In-App Keyboard.

If the user has clicked on the delete button, we delete the previous character or the selection. Otherwise, we get the associated String to the clicked button and we commit the text by calling the commitText method on the InputConnection instance got previously.

Note that the InputConnection is set on the Keyboard through its setInputConnection method. It gives us the following code for the MyKeyboardclass :

package com.ssaurel.inappkeyboard;
import android.content.Context;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.util.SparseArray;
import android.view.LayoutInflater;
import android.view.View;
import android.view.inputmethod.InputConnection;
import android.widget.Button;
import android.widget.LinearLayout;
public class MyKeyboard extends LinearLayout implements View.OnClickListener {
private Button button1, button2, button3, button4,
button5, button6, button7, button8,
button9, button0, buttonDelete, buttonEnter;
private SparseArray<String> keyValues = new SparseArray<>();
private InputConnection inputConnection;
public MyKeyboard(Context context) {
this(context, null, 0);
}
public MyKeyboard(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MyKeyboard(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs);
}
private void init(Context context, AttributeSet attrs) {
LayoutInflater.from(context).inflate(R.layout.keyboard, this, true);
button1 = (Button) findViewById(R.id.button_1);
button1.setOnClickListener(this);
button2 = (Button) findViewById(R.id.button_2);
button2.setOnClickListener(this);
button3 = (Button) findViewById(R.id.button_3);
button3.setOnClickListener(this);
button4 = (Button) findViewById(R.id.button_4);
button4.setOnClickListener(this);
button5 = (Button) findViewById(R.id.button_5);
button5.setOnClickListener(this);
button6 = (Button) findViewById(R.id.button_6);
button6.setOnClickListener(this);
button7 = (Button) findViewById(R.id.button_7);
button7.setOnClickListener(this);
button8 = (Button) findViewById(R.id.button_8);
button8.setOnClickListener(this);
button9 = (Button) findViewById(R.id.button_9);
button9.setOnClickListener(this);
button0 = (Button) findViewById(R.id.button_0);
button0.setOnClickListener(this);
buttonDelete = (Button) findViewById(R.id.button_delete);
buttonDelete.setOnClickListener(this);
buttonEnter = (Button) findViewById(R.id.button_enter);
buttonEnter.setOnClickListener(this);
keyValues.put(R.id.button_1, "1");
keyValues.put(R.id.button_2, "2");
keyValues.put(R.id.button_3, "3");
keyValues.put(R.id.button_4, "4");
keyValues.put(R.id.button_5, "5");
keyValues.put(R.id.button_6, "6");
keyValues.put(R.id.button_7, "7");
keyValues.put(R.id.button_8, "8");
keyValues.put(R.id.button_9, "9");
keyValues.put(R.id.button_0, "0");
keyValues.put(R.id.button_enter, "\n");
}
@Override
public void onClick(View view) {
if (inputConnection == null)
return;
if (view.getId() == R.id.button_delete) {
CharSequence selectedText = inputConnection.getSelectedText(0);
if (TextUtils.isEmpty(selectedText)) {
inputConnection.deleteSurroundingText(1, 0);
} else {
inputConnection.commitText("", 1);
}
} else {
String value = keyValues.get(view.getId());
inputConnection.commitText(value, 1);
}
}
public void setInputConnection(InputConnection ic) {
inputConnection = ic;
}
}
view raw MyKeyboard.java hosted with ❤ by GitHub

 

Writing the Java code of the Main Activity

Last step is to write the Java code of the MainActivity for using our custom Keyboard. For System Keyboards, the Android SDK uses an InputMethodManager instance to point the keyboard to the focused EditText. In our example, the MainActivity will take its place by providing the link from the EditText to our custom Keyboard.

Like we choose to use our In-App Keyboard, we need to disable the System Keyboard to avoid that it pops up when the user will touch the EditText. Then, we get the InputConnection instance from the EditText and we set it on our MyKeyboard instance.

It gives us the following code for the Main Activity :

package com.ssaurel.inappkeyboard;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.InputType;
import android.view.inputmethod.EditorInfo;
import android.view.inputmethod.InputConnection;
import android.widget.EditText;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
EditText editText = (EditText) findViewById(R.id.editText);
MyKeyboard keyboard = (MyKeyboard) findViewById(R.id.keyboard);
editText.setRawInputType(InputType.TYPE_CLASS_TEXT);
editText.setTextIsSelectable(true);
InputConnection ic = editText.onCreateInputConnection(new EditorInfo());
keyboard.setInputConnection(ic);
}
}
view raw MainActivity.java hosted with ❤ by GitHub

It you want to create an Activity with multiple EditText inside, you will need to write code to pass the right EditText’s InputConnection to the In-App Keyboard.

A good way to achieve that would be to add an OnFocusChangeListener and an OnClickListener to each EditText of your Activity. You should also hide or show your custom Keyboard at appropriate times.

 

Our In-App Keyboard in Action !

Best part of the tutorial is coming. We are going to put our In-App Keyboard in Action. So, we launch our Android Application on a device. You should have the following result :

That’s all for that tutorial !

To discover more tutorials on Android development, you can subscribe to the SSaurel’s Channel :