For this tutorial, i will talk about setting up a custom keyboard that has only twelve buttons. The nine-digit buttons are labeled from 0 to 9. The remaining two buttons are the delete button (represented by the delete icon) and the dot button. When a digit button is pressed, its label will be appended to the EditText component. The delete button will remove the last character from the EditText. The dot button allows the user to append a dot sign (.) to the EditText.
To follow this tutorial, now you need to create a new Android project in Eclipse. The project name will be Keyboard.
The first step you will do in setting up the custom keyboard is adding the KeyboardView component in the activity_main.xml file. We also need an EditText component to display the characters pressed by the user. Here is the content of the activity_main.xml file.
activity_main.xml file
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context=".MainActivity" >
<EditText
android:id="@+id/txt_edit"
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="1"
android:gravity="top"
/>
<android.inputmethodservice.KeyboardView
android:visibility="gone"
android:id="@+id/customkeyboard"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="bottom"
/>
</LinearLayout>
For another step, you have to write the buttons of the keyboard in a layout xml file. In this tutorial, this layout xml file of the keyboard is called keyboard.xml. The buttons can be grouped in rows by using the row tags. Each row consists of four to five buttons. You need to specify the code of each button and its label or icon. All row tags will be placed in the Keyboard tag. Below is the content of the keyboard.xml file.
keyboard.xml file
<Keyboard xmlns:android="http://schemas.android.com/apk/res/android"
android:keyWidth="33%p" android:horizontalGap="0px"
android:verticalGap="0px" android:keyHeight="54dip">
<Row>
<Key android:codes="49" android:keyLabel="1" />
<Key android:codes="50" android:keyLabel="2" />
<Key android:codes="51" android:keyLabel="3"/>
<Key android:codes="8" android:keyIcon="@drawable/delete_icon" />
</Row>
<Row>
<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" />
</Row>
<Row>
<Key android:codes="56" android:keyLabel="8" />
<Key android:codes="57" android:keyLabel="9" />
<Key android:codes="48" android:keyLabel="0" />
<Key android:codes="46" android:keyLabel="."/>
</Row>
</Keyboard>
In the keyboard.xml file, the delete button is presented by the delete icon. Instead of using the keyLabel to specifying label of the button, you will use the keyIcon to specify the icon of the delete button.
In the last step, you need to write code to place the keyboard layout on the KeyboardView component and show it and to receive keys pressed by the user. The code will be written in the MainAcivity.java file. The Keyboard object will be created to point to the layout file. Then this object is supplied to KeyboardView component so that it is ready to show.
To receive the keys pressed on the keyboard, the KeyboardView component must be registered with the KeyboardActionListenter interface. The onPress method of the interface has to be implemented to receive the keys. Here is the content of the MainActivity.java file.
MainActivity.java file
package com.example.keyboard;
import android.inputmethodservice.Keyboard;
import android.inputmethodservice.KeyboardView;
import android.inputmethodservice.KeyboardView.OnKeyboardActionListener;
import android.os.Bundle;
import android.app.Activity;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.View;
import android.widget.EditText;
public class MainActivity extends Activity{
private EditText et;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//create Keyboard object
Keyboard keyboard=new Keyboard(this, R.layout.keyboard);
//create KeyboardView object
KeyboardView keyview=(KeyboardView)findViewById(R.id.customkeyboard);
//attache the keyboard object to the KeyboardView object
keyview.setKeyboard(keyboard);
//show the keyboard
keyview.setVisibility(KeyboardView.VISIBLE);
//take the keyboard to the front
keyview.bringToFront();
//register the keyboard to receive the key pressed
keyview.setOnKeyboardActionListener(new KeyList());
et=(EditText)findViewById(R.id.txt_edit);
}
class KeyList implements OnKeyboardActionListener{
public void onKey(View v, int keyCode, KeyEvent event) {
}
public void onText(CharSequence text){
}
public void swipeLeft(){
}
public void onKey(int primaryCode, int[] keyCodes) {
}
public void swipeUp(){
}
public void swipeDown() {
}
public void swipeRight() {
}
public void onPress(int primaryCode) {
if(primaryCode==8){ //take the last character out when delete button is pressed.
String text=et.getText().toString();
if(et.length()>0){
text=text.substring(0,text.length()-1);
et.setText(text);
et.setSelection(text.length());
}
}
else{
char ch=(char)primaryCode;
et.append(""+ch);
}
}
public void onRelease(int primaryCode) {
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
Now you are ready to run the Keyboard app. If you have any questions, please leave them at the comment section. I will reply as soon as possible.
No comments:
Post a Comment