how to change key background of any key in Android soft keyboard

Question

I want to have some of my keys in the keyboard different from others.

For example,like shift, delete, space key in below photo:

According to the reference documents from google. We can change key's background by use "android:keybackground=@drawable/xxx" in "input.xml", but it change background of all keys in keyboard.

Although "android:keyicon" in qwerty.xml can have single key changed,but it only replace the label. Meanwhile, use "android:keyicon" , the image can not cover entire key , the image will be a litte bit smaller than the key background.

What's the correct way to change background of some keys?

Answer 1

It's not clear whether you understand how to create a custom keyboard or not. In case you don't, here's a small downloadable project that creates a custom numeric keyboard. To the CustomKeyboardView class there or to your own custom keyboard class, add the following method. 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 drawables 9-patch images and do the following. Note that the two keys with icons don't render correctly because they're not defined as 9-patch images and I didn't take any special effort to make them 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);
        }
    }
}    

Answer 2

The first thing to note is that there is no simple way to do this in XML, you will need to do it in Java.

You can get the list of keys using the following piece of code:

Keyboard keyboard = keyboardView.getKeyboard();
List<Key> keys = keyboard.getKeys();

Once you have the list of keys, you can iterate through them to find the ones you want to change, using a for loop like:

for (Key key : keys) {
    ...
}

Please refer to the documentation here for the properties of Keyboard.Key in Android. You'll probably want to use the codes to distinguish the keys.

You will notice that there is no direct way of changing the background color of a key. However, there is a way to change the icon, so you can use that to simulate the same behaviour. You could generate drawable objects that contain the color you need and set it as the icon. You could use a NinePatchDrawable.

You can add this functionality either in the onStartInputView() method or in the onDraw() method. You can see a piece of code that is supposedly working here.

Alternatively, you could decide to implement your own keyboard. In case you want to do that, you can see the Android implementation here. You could copy this and modify it directly to suit your needs.

Answer 3

I cannot post coments, so i put a link to a similar question I found where there is a solution that I think its good, doing it by code:

Customize the appearance of a <Key>