How to set different background of keys for Android Custom Keyboard
As an example, there's a small downloadable project that creates a custom numeric keyboard. To the CustomKeyboardView class there or to your own custom keyboard class, add a method like the following. It overrides the onDraw() method and draws the background of the key defined with code 7 (in this case the "0") red and all the other keys blue.
@Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
List<Key> keys = getKeyboard().getKeys();
for (Key key : keys) {
if (key.codes[0] == 7) {
Log.e("KEY", "Drawing key with code " + key.codes[0]);
Drawable dr = (Drawable) context.getResources().getDrawable(R.drawable.red_tint);
dr.setBounds(key.x, key.y, key.x + key.width, key.y + key.height);
dr.draw(canvas);
} else {
Drawable dr = (Drawable) context.getResources().getDrawable(R.drawable.blue_tint);
dr.setBounds(key.x, key.y, key.x + key.width, key.y + key.height);
dr.draw(canvas);
}
}
}
In this case, I didn't use 9-patch images, but just some simple 50% transparent square images and achieved an effect where the existing buttons are merely tinted with the colors I wanted. To get a more custom result, I could make my background drawables 9-patch images and do the following. Note that the two keys with icons don't render correctly because the icons aren't defined as 9-patch images and I didn't make any special effort to allow them to scale well for this example. I also didn't address the use of different images/effects for the various states for the keys; others have shown how to do that.
@Override
public void onDraw(Canvas canvas) {
// super.onDraw(canvas);
List<Key> keys = getKeyboard().getKeys();
for (Key key : keys) {
if (key.codes[0] == 7) {
NinePatchDrawable npd
= (NinePatchDrawable) context.getResources().getDrawable(R.drawable.red_key);
npd.setBounds(key.x, key.y, key.x + key.width, key.y + key.height);
npd.draw(canvas);
} else {
NinePatchDrawable npd
= (NinePatchDrawable) context.getResources().getDrawable(R.drawable.blue_key);
npd.setBounds(key.x, key.y, key.x + key.width, key.y + key.height);
npd.draw(canvas);
}
Paint paint = new Paint();
paint.setTextAlign(Paint.Align.CENTER);
paint.setTextSize(48);
paint.setColor(Color.GRAY);
if (key.label != null) {
canvas.drawText(key.label.toString(), key.x + (key.width / 2),
key.y + (key.height / 2), paint);
} else {
key.icon.setBounds(key.x, key.y, key.x + key.width, key.y + key.height);
key.icon.draw(canvas);
}
}
}
I created a keyboard app in which I use the KeyBackground
property in KeyboardView
, like so:
<KeyboardView android:keyBackground="@drawable/buttonbgselector" .../>
To do this dynamically I use the following code:
@Override
public View onCreateInputView() {
mInputView = (KeyboardView) getLayoutInflater().inflate(R.layout.input, null);
mInputView.setBackgroundResource(R.drawable.buttonbgselector);
mInputView.setOnKeyboardActionListener(this);
mInputView.setKeyboard(mQwertyKeyboard);
return mInputView;
}