How to set a different background for function key in xml on keyboard?

Question

I am developing a keyboard application for Android. I tried to set different background for normal key and function key but it didn't work:

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Functional keys. -->

    <item android:state_single="true" android:state_pressed="true"
          android:drawable="@drawable/btn_keyboard_special" />
    <item android:state_single="true"
          android:drawable="@drawable/btn_keyboard_special" />

    <!-- Toggle keys. Use checkable/checked state.   -->

    <item android:state_checkable="true" android:state_checked="true" android:state_pressed="true"
          android:drawable="@drawable/btn_keyboard_key_dark_pressed_on" />
    <item android:state_checkable="true" android:state_pressed="true"
          android:drawable="@drawable/btn_keyboard_key_dark_pressed_off" />
    <item android:state_checkable="true" android:state_checked="true"
          android:drawable="@drawable/btn_keyboard_key_dark_normal_on" />
    <item android:state_checkable="true"
          android:drawable="@drawable/btn_keyboard_key_dark_normal_off" /> 

    <!-- Normal keys -->

    <item android:state_pressed="true"
          android:drawable="@drawable/glow" />
    <item android:drawable="@drawable/btn_keyboard_key_light_normal" />
</selector>

Answer 1

There is a XML-Attribute called android:keyBackground. Just set this attribute to a drawable and it should be fine.

Add this attrbute to the KeyboardView in input.xml:

<KeyboardView android:keyBackground="@drawable/buttonbgselector" .../>

I'm assuming this is what you are using to assign background color for all the keys.

For the function keys alone, create a proper foreground drawable image to cover the entire key and assign it to keyIcon in the xml of the keyboard layout xml.

To be perfect, use a background image that covers the same dimension also, incase you don't want to change the keyIcon

Answer 2

This hack work for me.

public class MyKeyboardView extends android.inputmethodservice.KeyboardView {

    Context context;
    public MyKeyboardView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
        this.context = context ;
    }



    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        Paint paint = new Paint();
        paint.setTextAlign(Paint.Align.CENTER);
        paint.setTextSize(25);
        paint.setColor(Color.RED);




        List<Key> keys = getKeyboard().getKeys();
        for(Key key: keys) {

     if(key.pressed){
                NinePatchDrawable npd = (NinePatchDrawable)context.getResources().getDrawable(R.drawable.glow);
                npd.setBounds(key.x,key.y,key.x+key.width,key.y+key.height);
                npd.draw(canvas);
            if(key.label != null)
                canvas.drawText(key.label.toString(), key.x + (key.width/2), key.y + 25, paint);
     }else if(key.modifier){  // boolean that defines key is function key

            NinePatchDrawable npd = (NinePatchDrawable)context.getResources().getDrawable(R.drawable.btn_keyboard_special);
            npd.setBounds(key.x,key.y,key.x+key.width,key.y+key.height);
            npd.draw(canvas);
            if(key.label != null)
                canvas.drawText(key.label.toString(), key.x + (key.width/2), key.y + 25, paint);
      }


        break;
        }
    }

}

change your layout xml to

 <com.example.yourpackage.MyKeyboardView
        android:id="@+id/keyboardview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:visibility="gone"
        android:background="#000000"
            android:keyBackground="@drawable/keyboard_selector" />

You may write more conditions as per need in onDraw()