Jun 28, 2011

Create Your Own Custom Keyboard for Android Devices



In this post i Created Simple Keyboard which contains Some special keys like ( France keys ) and it's supported Capital letters and small letters and Number keys and some Symbols .


package sra.keyboard;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.WindowManager;
import android.view.View.OnClickListener;
import android.view.View.OnFocusChangeListener;
import android.view.View.OnTouchListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.RelativeLayout;

public class Main extends Activity implements OnTouchListener, OnClickListener,
OnFocusChangeListener {
private EditText mEt, mEt1; // Edit Text boxes
private Button mBSpace, mBdone, mBack, mBChange, mNum;
private RelativeLayout mLayout, mKLayout;
private boolean isEdit = false, isEdit1 = false;
private String mUpper = "upper", mLower = "lower";
private int w, mWindowWidth;
private String sL[] = { "a", "b", "c", "d", "e", "f", "g", "h", "i", "j",
"k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w",
"x", "y", "z", "ç", "à", "é", "è", "û", "î" };
private String cL[] = { "A", "B", "C", "D", "E", "F", "G", "H", "I", "J",
"K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W",
"X", "Y", "Z", "ç", "à", "é", "è", "û", "î" };
private String nS[] = { "!", ")", "'", "#", "3", "$", "%", "&", "8", "*",
"?", "/", "+", "-", "9", "0", "1", "4", "@", "5", "7", "(", "2",
"\"", "6", "_", "=", "]", "[", "<", ">", "|" };
private Button mB[] = new Button[32];

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
try {
setContentView(R.layout.main);
// adjusting key regarding window sizes
setKeys();
setFrow();
setSrow();
setTrow();
setForow();
mEt = (EditText) findViewById(R.id.xEt);
mEt.setOnTouchListener(this);
mEt.setOnFocusChangeListener(this);
mEt1 = (EditText) findViewById(R.id.et1);

mEt1.setOnTouchListener(this);
mEt1.setOnFocusChangeListener(this);
mEt.setOnClickListener(this);
mEt1.setOnClickListener(this);
mLayout = (RelativeLayout) findViewById(R.id.xK1);
mKLayout = (RelativeLayout) findViewById(R.id.xKeyBoard);

} catch (Exception e) {
Log.w(getClass().getName(), e.toString());
}

}

@Override
public boolean onTouch(View v, MotionEvent event) {
if (v == mEt) {
hideDefaultKeyboard();
enableKeyboard();

}
if (v == mEt1) {
hideDefaultKeyboard();
enableKeyboard();

}
return true;
}

@Override
public void onClick(View v) {

if (v == mBChange) {

if (mBChange.getTag().equals(mUpper)) {
changeSmallLetters();
changeSmallTags();
} else if (mBChange.getTag().equals(mLower)) {
changeCapitalLetters();
changeCapitalTags();
}

} else if (v != mBdone && v != mBack && v != mBChange && v != mNum) {
addText(v);

} else if (v == mBdone) {

disableKeyboard();

} else if (v == mBack) {
isBack(v);
} else if (v == mNum) {
String nTag = (String) mNum.getTag();
if (nTag.equals("num")) {
changeSyNuLetters();
changeSyNuTags();
mBChange.setVisibility(Button.INVISIBLE);

}
if (nTag.equals("ABC")) {
changeCapitalLetters();
changeCapitalTags();
}

}

}

@Override
public void onFocusChange(View v, boolean hasFocus) {
if (v == mEt && hasFocus == true) {
isEdit = true;
isEdit1 = false;

} else if (v == mEt1 && hasFocus == true) {
isEdit = false;
isEdit1 = true;

}

}

private void addText(View v) {
if (isEdit == true) {
String b = "";
b = (String) v.getTag();
if (b != null) {
// adding text in Edittext
mEt.append(b);

}
}

if (isEdit1 == true) {
String b = "";
b = (String) v.getTag();
if (b != null) {
// adding text in Edittext
mEt1.append(b);

}

}

}

private void isBack(View v) {
if (isEdit == true) {
CharSequence cc = mEt.getText();
if (cc != null && cc.length() > 0) {
{
mEt.setText("");
mEt.append(cc.subSequence(0, cc.length() - 1));
}

}
}

if (isEdit1 == true) {
CharSequence cc = mEt1.getText();
if (cc != null && cc.length() > 0) {
{
mEt1.setText("");
mEt1.append(cc.subSequence(0, cc.length() - 1));
}
}
}
}
private void changeSmallLetters() {
mBChange.setVisibility(Button.VISIBLE);
for (int i = 0; i < sL.length; i++)
mB[i].setText(sL[i]);
mNum.setTag("12#");
}
private void changeSmallTags() {
for (int i = 0; i < sL.length; i++)
mB[i].setTag(sL[i]);
mBChange.setTag("lower");
mNum.setTag("num");
}
private void changeCapitalLetters() {
mBChange.setVisibility(Button.VISIBLE);
for (int i = 0; i < cL.length; i++)
mB[i].setText(cL[i]);
mBChange.setTag("upper");
mNum.setText("12#");

}

private void changeCapitalTags() {
for (int i = 0; i < cL.length; i++)
mB[i].setTag(cL[i]);
mNum.setTag("num");

}

private void changeSyNuLetters() {

for (int i = 0; i < nS.length; i++)
mB[i].setText(nS[i]);
mNum.setText("ABC");
}

private void changeSyNuTags() {
for (int i = 0; i < nS.length; i++)
mB[i].setTag(nS[i]);
mNum.setTag("ABC");
}

// enabling customized keyboard
private void enableKeyboard() {

mLayout.setVisibility(RelativeLayout.VISIBLE);
mKLayout.setVisibility(RelativeLayout.VISIBLE);

}

// Disable customized keyboard
private void disableKeyboard() {
mLayout.setVisibility(RelativeLayout.INVISIBLE);
mKLayout.setVisibility(RelativeLayout.INVISIBLE);

}

private void hideDefaultKeyboard() {
getWindow().setSoftInputMode(
WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);

}

private void setFrow() {
w = (mWindowWidth / 13);
w = w - 15;
mB[16].setWidth(w);
mB[22].setWidth(w + 3);
mB[4].setWidth(w);
mB[17].setWidth(w);
mB[19].setWidth(w);
mB[24].setWidth(w);
mB[20].setWidth(w);
mB[8].setWidth(w);
mB[14].setWidth(w);
mB[15].setWidth(w);
mB[16].setHeight(50);
mB[22].setHeight(50);
mB[4].setHeight(50);
mB[17].setHeight(50);
mB[19].setHeight(50);
mB[24].setHeight(50);
mB[20].setHeight(50);
mB[8].setHeight(50);
mB[14].setHeight(50);
mB[15].setHeight(50);

}

private void setSrow() {
w = (mWindowWidth / 10);
mB[0].setWidth(w);
mB[18].setWidth(w);
mB[3].setWidth(w);
mB[5].setWidth(w);
mB[6].setWidth(w);
mB[7].setWidth(w);
mB[26].setWidth(w);
mB[9].setWidth(w);
mB[10].setWidth(w);
mB[11].setWidth(w);
mB[26].setWidth(w);

mB[0].setHeight(50);
mB[18].setHeight(50);
mB[3].setHeight(50);
mB[5].setHeight(50);
mB[6].setHeight(50);
mB[7].setHeight(50);
mB[9].setHeight(50);
mB[10].setHeight(50);
mB[11].setHeight(50);
mB[26].setHeight(50);
}

private void setTrow() {
w = (mWindowWidth / 12);
mB[25].setWidth(w);
mB[23].setWidth(w);
mB[2].setWidth(w);
mB[21].setWidth(w);
mB[1].setWidth(w);
mB[13].setWidth(w);
mB[12].setWidth(w);
mB[27].setWidth(w);
mB[28].setWidth(w);
mBack.setWidth(w);

mB[25].setHeight(50);
mB[23].setHeight(50);
mB[2].setHeight(50);
mB[21].setHeight(50);
mB[1].setHeight(50);
mB[13].setHeight(50);
mB[12].setHeight(50);
mB[27].setHeight(50);
mB[28].setHeight(50);
mBack.setHeight(50);

}

private void setForow() {
w = (mWindowWidth / 10);
mBSpace.setWidth(w * 4);
mBSpace.setHeight(50);
mB[29].setWidth(w);
mB[29].setHeight(50);

mB[30].setWidth(w);
mB[30].setHeight(50);

mB[31].setHeight(50);
mB[31].setWidth(w);
mBdone.setWidth(w + (w / 1));
mBdone.setHeight(50);

}

private void setKeys() {
mWindowWidth = getWindowManager().getDefaultDisplay().getWidth(); // getting
// window
// height
// getting ids from xml files
mB[0] = (Button) findViewById(R.id.xA);
mB[1] = (Button) findViewById(R.id.xB);
mB[2] = (Button) findViewById(R.id.xC);
mB[3] = (Button) findViewById(R.id.xD);
mB[4] = (Button) findViewById(R.id.xE);
mB[5] = (Button) findViewById(R.id.xF);
mB[6] = (Button) findViewById(R.id.xG);
mB[7] = (Button) findViewById(R.id.xH);
mB[8] = (Button) findViewById(R.id.xI);
mB[9] = (Button) findViewById(R.id.xJ);
mB[10] = (Button) findViewById(R.id.xK);
mB[11] = (Button) findViewById(R.id.xL);
mB[12] = (Button) findViewById(R.id.xM);
mB[13] = (Button) findViewById(R.id.xN);
mB[14] = (Button) findViewById(R.id.xO);
mB[15] = (Button) findViewById(R.id.xP);
mB[16] = (Button) findViewById(R.id.xQ);
mB[17] = (Button) findViewById(R.id.xR);
mB[18] = (Button) findViewById(R.id.xS);
mB[19] = (Button) findViewById(R.id.xT);
mB[20] = (Button) findViewById(R.id.xU);
mB[21] = (Button) findViewById(R.id.xV);
mB[22] = (Button) findViewById(R.id.xW);
mB[23] = (Button) findViewById(R.id.xX);
mB[24] = (Button) findViewById(R.id.xY);
mB[25] = (Button) findViewById(R.id.xZ);
mB[26] = (Button) findViewById(R.id.xS1);
mB[27] = (Button) findViewById(R.id.xS2);
mB[28] = (Button) findViewById(R.id.xS3);
mB[29] = (Button) findViewById(R.id.xS4);
mB[30] = (Button) findViewById(R.id.xS5);
mB[31] = (Button) findViewById(R.id.xS6);
mBSpace = (Button) findViewById(R.id.xSpace);
mBdone = (Button) findViewById(R.id.xDone);
mBChange = (Button) findViewById(R.id.xChange);
mBack = (Button) findViewById(R.id.xBack);
mNum = (Button) findViewById(R.id.xNum);
for (int i = 0; i < mB.length; i++)
mB[i].setOnClickListener(this);
mBSpace.setOnClickListener(this);
mBdone.setOnClickListener(this);
mBack.setOnClickListener(this);
mBChange.setOnClickListener(this);
mNum.setOnClickListener(this);

}

}


77 comments:

  1. Thanks a lot, man!

    ReplyDelete
  2. Not bad, probably worth getting a code formatter for your website though. :) I'm also trying to do some custom work with the keyboard. All I really want to do is change the skin, although a custom layout would be a big plus. My efforts so far (very similar to yours with custom keys/buttons) have had a problem with the system keyboard popping up unbidden. I've kept it away now by hiding it in onResume(), then just returning "true" from onTouch() (no need to hid it again). The problem is that I've lost all cursor repositioning, cut and paste, etc.

    Have you made any refinements?

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  3. Thank You man...

    ReplyDelete
  4. you've done a great job man ^^

    ReplyDelete
  5. Custom Keyboard not showing. but only show for android keybaord. setting not display for Custom Keyboard.

    ReplyDelete
  6. for hiding key bord create below method
    call always


    private void hideDefaultKeyboard() {
    getWindow().setSoftInputMode(
    WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);

    }

    ReplyDelete
  7. which android sdk version to use?
    what select input method?
    sra.keyboard not working in my apps. custom keyboard is not display? only display for default android keyboard. please replay fast.

    ReplyDelete
    Replies
    1. We can Use Any Android SDK minimum 1.5

      To Hide Custom Key Bord use below code
      // To hide default keybord
      private void hideDefaultKeyboard(){
      getWindow().setSoftInputMode(
      WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);
      }

      To View custom Keybord use below code

      // enabling customized keyboard
      private void enableKeyboard() {
      // mLayout is Layout
      mLayout.setVisibility(RelativeLayout.VISIBLE);
      // mKLayout : keybord contained layout
      mKLayout.setVisibility(RelativeLayout.VISIBLE);
      }

      Delete
    2. great thanks,
      custom keyboard working fine.supper.

      Delete
  8. I have many errors to try run the program, the compiler don't knows the imports and I marks error in the arrays, please help me. And thanks for the example, simply is very good...

    ReplyDelete
  9. You can download full running project from provided link , import from project , then you can run .

    ReplyDelete
    Replies
    1. The most weird thing is happening to me. The app works fine on the AVD but when i try it on an actual device the custom keyboard doesn't appear. So I debugged it.

      The problem is that it throws a nullPointerException when setting the onClickListeners on the mBack, mBChange and mBNum buttons.

      Do you know why is this happening? What puzzles me really is that it works on the AVD and not on an actual Device...

      Any help would be greatly appreciated

      Delete
    2. I found what the problem was. The AVD I was using had a screen of 640x480 and used the standard layout xml. The physical device I used to test the app was a tablet with a screen of 800x600 and therefore targeted the layout-large xml which didn't which didn't have all the buttons.

      Delete
  10. it is possible to custom keyboard multi-touch?

    ReplyDelete
    Replies
    1. ya we can develop but it will take time .

      Delete
  11. how we can add different lang. in this code???

    ReplyDelete
    Replies
    1. simply we have to put specified characters on some buttons

      Delete
    2. you have to use some other array , and based on Conditions you have to change text and getText methods

      Delete
  12. Where is the xml code for this code?

    -Kanth.

    ReplyDelete
    Replies
    1. You can download entire project from below link

      http://www.mediafire.com/?39q7of884goa818

      Delete
  13. Hey, I am able to get the display what it is meant to be. When I click editTexts then the keyboard is visible, that's fine. But I am not getting any text in the edittexts even if I click on buttons of customized keyboard. Please reply me.

    ReplyDelete
    Replies
    1. I think You are not Using that EditeText Object when click on Button Event

      Delete
  14. Actually my requirement is to have 1-9 number keypad in my application. I have 81 edittexts to which i have given id's using setId method and I placed these cells above the keyboard in which I want to enter 1-9 digits. But my doubt is how to get the edittext's id when the cursor is in particular edittext. so that I should place the digit of the respective button in edittext. This is a sudoku that I want to develop. Please advice. Thanks in advance.

    ReplyDelete
  15. The above two comments are mine only.

    -Kanth.

    ReplyDelete
    Replies
    1. set listener in Edittext

      or else send your code to my mail id
      you can find my mail id on training page in my blog

      Delete
  16. Why I just change the keyboard.xml build change to 4 button per row, then the customized keyboard cannot appear already?

    ReplyDelete
    Replies
    1. you have to show customized keyboard programatically

      Delete
    2. I already change the programming code in Activity, and all i do only delete the keys that i not using, then remove the function as well. Only remain the function i need.

      Delete
    3. I am doing a 5rows x 4 columns keyboard which consist
      0-9, Ok, Cancel, Backspace, 1 blank, and 4 navigation button

      Delete
  17. I have my own custom keyboard on ur code, thanks.
    But i found that the text cannot add into middle of the string, I have create navigation button to move left or right, then i click on text, it add at behind.

    Can help me on this?

    ReplyDelete
    Replies
    1. based on Selecteing EditText we have can change

      Delete
  18. Great tutorial. Thank you.

    ReplyDelete
  19. Really your post helped me a lot ... Thanks Dude ...

    ReplyDelete
  20. Nice :) but i wanna watch your tutorial with video file.Thank you and then i waiting for your gift :P

    ReplyDelete
  21. Thank for your present.This is great but i wanna watch your tutorial with video file . I will be hoping your gift.

    ReplyDelete
  22. Cursor won't move by touch, what method should i use to move the cursor. I've try getSelectionStart and/or getSelectionEnd but still cursor won't move. Any sugestion please?
    Thanks

    ReplyDelete
    Replies
    1. For that you have to write code on EditeText

      Delete
  23. Hi, This is a great tutorial and your sample works perfectly well. Thank you very much for sharing this.

    And I have a little question. Can I use this custom keyboard as my default keyboard of my Android device? I mean when I start Messages app, it will display this custom keyboard by replacing default android keyboard. Is it possible?

    Thanks in Advance..!!
    Best of Luck..

    ReplyDelete
    Replies
    1. Ya we can , but for that we have have to do Some sttings in Application and Device also .

      Delete
    2. Can you please point me out those settings step by step? If we can create a key board for Android device, I think we can use it through "Settings > Language & Keyboard" of device. Can I use your sample as that kind of keyboard. Please help me since I am very new to this customized keyboard thing.

      Thanks,,

      Delete
    3. Hi Sravan, Can you please tell me, how to configure those settings in Application and device?

      Thanks,,

      Delete
    4. This comment has been removed by the author.

      Delete
    5. I want to add small images while typing using Android messaging app. I tried lot to insert images to the messaging app by customizing SoftKeyBoard sample at SDK. But I couldn't. If you have a suggestion to do it, please tell me.

      Thanks,,

      Delete
  24. This comment has been removed by the author.

    ReplyDelete
  25. Hi,
    This is great article and your sample works perfectly well. Thanks you very much for sharing this.

    I have small problem. Can I use this custom keyboard as default keyboard in my Android device? I mean when I start Messages app and try to enter characters, it will display this custom keyboard by replacing Android default keyboard. Is it possible?

    Thanks in Advance.

    ReplyDelete
  26. . hi .we have a graduate project could u help us??
    we wanna design a new keyboard for sign language. to help ppl translate from sign language to other normal language ..
    my question is .. how we could display an image(sign letter)in text box when the user click on a button??
    and how we could save images(sign letters) to call it in our app,,

    plz help us and thank u ^^

    ReplyDelete
    Replies
    1. ya , we can do for more info contact to my mail id which i mention in my blog

      Delete
  27. hey, nice work. but how can i use in inside my app??

    ReplyDelete
  28. Hey, nice work. But how can i use it inside my app as a built in and separated keyboard?

    ReplyDelete
  29. I have downloaded and import the code. I have tested on 2 devices. nexus 7(4.2) and galaxy s2 (2.3). This works fine with galaxy s2 while default android keyboard shows on nexus 7. I have no idea how to fix this.

    ReplyDelete
    Replies
    1. with out code i can help , try to debug

      Delete
  30. Hi Sarvan,

    I want a dynamic keyboard such that we can drag it to any location.
    Can you help me to what changes I need to make in the source code you shared to have this.
    Just a need is to have keyboard which can move as per the choice.
    In anticipation of your response.
    Thank you

    ReplyDelete
    Replies
    1. send your code and Problem to below mail id : techtrainin@gmail.com

      solution is Chargable.

      Delete
  31. hey,,
    what about to add sound when press the button like 'a' sound when press 'a' button ?
    can you help how to make it ?
    Thank You...

    ReplyDelete
  32. Hey,,
    what about to add sound in that keyboard
    like 'a' sound when press 'a' button, 'b' sound for 'b' button, etc.
    can you help to make it ??
    Thanks Be4...

    ReplyDelete
  33. hi..

    how to add sound in in this keyboard?
    like 'a' sound for 'a' button,
    i have try it, but if sound is play, my keyboard cant type, but if it can type, it cant play sound
    how to fix it?

    ReplyDelete
    Replies
    1. Send your problem and Code to below mail id :

      techtrainin@gmail.com

      Solution is Chargeable .

      Delete
  34. thank you for the tutorial. I have problem regarding this area. How to add keyboard settings for particular keyboard.
    Thank you.

    ReplyDelete
  35. You have to add some logic using shared preference , in specific activity .

    ReplyDelete
  36. Hello i am Using this Tutorial i my app for custon keybord app i want to use Auto Suggestion and Auto completion feature as on normal keyboard but i am not getting how to do this can you please help me ?.

    ReplyDelete
  37. I am using this code for custom keyboard app i want to use auto suggestion and Auto correction functionality on click on Edittext but i am not getting how to do this i need urgent please help me

    ReplyDelete
  38. Hi...
    focus is not going for second EditText.
    how can I give focus to that?

    ReplyDelete
  39. Hi...
    focus is not going for second EditText.
    How can I give focus to that?

    ReplyDelete
    Replies
    1. use
      android:requestfocus=true
      android:focusbleinTouchmode=true

      Delete
  40. I downloaded code and executed. But, I am receiving below exception and not able to see custom keyboard.

    09-24 23:41:23.000: W/sra.keyboard.Main(15601): java.lang.NullPointerException

    Do you have any idea?

    ReplyDelete
  41. hi guys, I want to make an apk file that holds a theme for the popular keyboards, any idea how. thanks :)

    ReplyDelete
  42. I'm trying to make an apk theme for the popular keyboards, any1 know how or have a link of a tutorial? thanks :)

    ReplyDelete
  43. How to add different click sounds to different buttons? Example when i click on the numeric button it should give different click sound , when i click on Letters it should give different sound.. How to do this??

    ReplyDelete
  44. How to add sounds to buttons? When i click on numeric button it should give different click sound and when i click on letters it should give diff sound?

    ReplyDelete
  45. Please forgive my lack of experience, but exactly where do I put in the two snippets of code in order to view and hide the keyboard? I have it running on eclipse but cannot find it in settings. Thank you for your excellent work!
    To Hide Custom Key Bord use below code
    // To hide default keybord
    private void hideDefaultKeyboard(){
    getWindow().setSoftInputMode(
    WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);
    }

    To View custom Keybord use below code

    // enabling customized keyboard
    private void enableKeyboard() {
    // mLayout is Layout
    mLayout.setVisibility(RelativeLayout.VISIBLE);
    // mKLayout : keybord contained layout
    mKLayout.setVisibility(RelativeLayout.VISIBLE);
    }

    ReplyDelete
  46. i am trying to make an app of swype keyboard,any know or have a link of tutorial??
    i urgently need it ..thanks

    ReplyDelete
  47. Hi great job
    how to add yhe new font of another language in this keyboard?
    thanks

    ReplyDelete
  48. Hello, please tell us how to set this customized keyboard as a default android keyboard
    please help
    osama.aftab@hotmail.com

    ReplyDelete