Android Custom Soft Keyboard with KeyIcon

Question

I needed to use custom numeric soft keyboard. But some part I just can't get it right. I wanted to use a KeyIcon to display the Key instead of using KeyLabel. But once I run it, the result became like the one below. It doesn't match the height and width of the key. Is there anyway to make it right?

I read someone posted should use NinePatchDrawable as the KeyIcon. But that is the case, how am I suppose to include Text (Black in Color with Larger font than default) in the key?

Please advice...

<Row>
    <Key android:codes="49" android:keyIcon="@drawable/num_1" android:keyWidth="20%p" android:keyEdgeFlags="left"/>
    <Key android:codes="50" android:keyIcon="@drawable/num_2" android:keyWidth="20%p"/>
    <Key android:codes="51" android:keyIcon="@drawable/num_3" android:keyWidth="20%p"/>
</Row>

<Row>
    <Key android:codes="52" android:keyIcon="@drawable/num_4" android:keyWidth="20%p" android:keyEdgeFlags="left"/>
    <Key android:codes="53" android:keyIcon="@drawable/num_5" android:keyWidth="20%p"/>
    <Key android:codes="54" android:keyIcon="@drawable/num_6" android:keyWidth="20%p" android:keyEdgeFlags="right"/>
</Row>

<Row>
    <Key android:codes="55" android:keyIcon="@drawable/num_7" android:keyWidth="20%p" android:keyEdgeFlags="left"/>
    <Key android:codes="56" android:keyIcon="@drawable/num_8" android:keyWidth="20%p"/>
    <Key android:codes="57" android:keyIcon="@drawable/num_9" android:keyWidth="20%p" android:keyEdgeFlags="right"/>
</Row>

<Row android:rowEdgeFlags="bottom">
    <Key android:codes="-5" android:keyIcon="@drawable/num_del" android:keyWidth="20%p" android:keyEdgeFlags="left"
            android:isRepeatable="true"/>
    <Key android:codes="48" android:keyIcon="@drawable/num_9" android:keyWidth="20%p"/>
    <Key android:codes="-3" android:keyIcon="@drawable/num_done" android:keyWidth="20%p" android:keyEdgeFlags="right"/>
</Row>

Answer 1

The simple and easiest solution is to have different size of images (key-icons) and place it in proper drawable folders (drawable, mipmap-hdpi, mipmap-mdpi...). You have to test with different screen-size devices to make sure the key-icons look good. The current size of key-icons look large, therefore you need to reduce the width and height of it to fit in keys.