Question

I’ve recently had a problem with Android Keyboard views.

What I wanted to achieve was a decent keyboard, where I could add key spacing in pixels and the rest of the space would be shared by the keys depending on how I weighted them.

I also found percentage widths were inaccurate (rows ends varied by +-6px).

Answer 1

Each key is given a width, usually 64 pixels. For a half-normal width key I would assign 32px. For double I gave it 128px. Etc.

The keyboard is then run through a function called “fixKeyboard” which decides upon the width for each key. You tell it how many 64px width keys per row, and it will scale the keys to a size that works. (i.e keysPerStandardRow == how many pixels wide the keyboard is / 64px)

private void fixKeyboard(Keyboard k, int keysPerStandardRow)
{
    List<Key> keys = k.getKeys();
    int dw = GlobalHelperFunctions.getDisplay(this).getWidth();
    int ttly = 0;
    int divisor = 64 * keysPerStandardRow;
    int ttl_weights = 0;
    for (Key key : keys)
    {
        //See below for the deal with 424242
        int weight = key.width + (key.gap == 424242 ? 0 : key.gap);
        if (key.gap == 424242)
            key.gap = 0;
        else
            key.gap = (ttl_weights + key.gap) * dw / divisor - ttl_weights * dw / divisor;
        key.width = (ttl_weights + key.width) * dw / divisor - ttl_weights * dw / divisor;
        if (key.y != ttly)
        {
            ttl_weights = 0;
            ttly = key.y;
        }
        key.x = ttl_weights * dw / divisor;
        ttl_weights += weight;
    }
}

...

static public Display GlobalHelperFunctions.getDisplay(Context c)
{
    if (c != null)
    {
        WindowManager wm = (WindowManager)c.getSystemService(Context.WINDOW_SERVICE);
        if (wm != null)
        {
            return wm.getDefaultDisplay();
        }
    }
    return null;
}

Alas, this was not the end of the story. It seems that the keyboard view/keyboard decides upon the width of the keyboard the moment you hand it the XML file. If for some reason you’ve changed the keys like I have, android scales them back into its pre-calculated box. I didn’t want this, obviously. So here’s what I did: I simply forced it to have the maximum possible width by defining a huge horizontal gap in between each key (424242px), which I then reset to 0 when running fixKeyboard.

Since I was using this approach, you can define gaps easily by simply not using the trigger number! Here’s my QWERTY keyboard you can use if you’d like as an example:

<?xml version="1.0" encoding="utf-8"?>
 <Keyboard xmlns:android="http://schemas.android.com/apk/res/android"
         android:keyHeight="80px"
         android:horizontalGap="424242px"
         android:verticalGap="2px" >
     <Row android:keyWidth="64px">
         <Key android:keyLabel="1" android:keycode="KEYCODE_1"/>
         <Key android:keyLabel="2" android:keycode="KEYCODE_2"/>
         <Key android:keyLabel="3" android:keycode="KEYCODE_3"/>
         <Key android:keyLabel="4" android:keycode="KEYCODE_4"/>

         <Key android:keyLabel="5" android:keycode="KEYCODE_5"/>
         <Key android:keyLabel="6" android:keycode="KEYCODE_6"/>
         <Key android:keyLabel="7" android:keycode="KEYCODE_7"/>
         <Key android:keyLabel="8" android:keycode="KEYCODE_8"/>

         <Key android:keyLabel="9" android:keycode="KEYCODE_9" />
         <Key android:keyLabel="0" android:keycode="KEYCODE_0"/>
         <Key android:keyIcon="@android:drawable/ic_input_delete" android:keyOutputText="◁" android:keyWidth="128px" android:codes="0x25C1" android:isRepeatable="true"/>
     </Row>
     <Row android:keyWidth="64px">
         <Key android:keyLabel="q" android:keycode="KEYCODE_Q" />
         <Key android:keyLabel="w" android:keycode="KEYCODE_W"/>
         <Key android:keyLabel="e" android:keycode="KEYCODE_E" />
         <Key android:keyLabel="r" android:keycode="KEYCODE_R" />

         <Key android:keyLabel="t" android:keycode="KEYCODE_T"/>
         <Key android:keyLabel="y" android:keycode="KEYCODE_Y"  />
         <Key android:keyLabel="u" android:keycode="KEYCODE_U"/>
         <Key android:keyLabel="i" android:keycode="KEYCODE_I" />

         <Key android:keyLabel="o" android:keycode="KEYCODE_O" />
         <Key android:keyLabel="p" android:keycode="KEYCODE_P" />
         <Key android:keyLabel="・"/>
         <Key android:keyIcon="@android:drawable/ic_menu_preferences" android:keyOutputText="●" android:codes="0x25CF"/>
     </Row>
     <Row android:keyWidth="64px">
         <Key android:keyLabel="　" android:keyHeight="0px" android:keyWidth="0px" android:horizontalGap="32px"/>
         <Key android:keyLabel="a" android:keycode="KEYCODE_A"/>
         <Key android:keyLabel="s" android:keycode="KEYCODE_S"/>
         <Key android:keyLabel="d" android:keycode="KEYCODE_D"/>

         <Key android:keyLabel="f" android:keycode="KEYCODE_F" />
         <Key android:keyLabel="g" android:keycode="KEYCODE_G"/>
         <Key android:keyLabel="h" android:keycode="KEYCODE_H"/>
         <Key android:keyLabel="j" android:keycode="KEYCODE_J" />

         <Key android:keyLabel="k" android:keycode="KEYCODE_K" />
         <Key android:keyLabel="l" android:keycode="KEYCODE_L" />
         <Key android:keyLabel="ENTER" android:keyOutputText="◒" android:keyWidth="96px"/>
         <Key android:keyLabel="カタ"  android:keyOutputText="◎" android:codes="0x25CE"/>
     </Row>
     <Row android:keyWidth="64px">
         <Key android:keyLabel="「" />
         <Key android:keyLabel="z" android:keycode="KEYCODE_Z"/>
         <Key android:keyLabel="x" android:keycode="KEYCODE_X"/>
         <Key android:keyLabel="c" android:keycode="KEYCODE_C"/>

         <Key android:keyLabel="v" android:keycode="KEYCODE_V" />
         <Key android:keyLabel="b" android:keycode="KEYCODE_B"/>
         <Key android:keyLabel="n" android:keycode="KEYCODE_N"/>
         <Key android:keyLabel="m" android:keycode="KEYCODE_M"/>

         <Key android:keyLabel="、"/>
         <Key android:keyLabel="。"/>
         <Key android:keyLabel="⇧" android:keycode="KEYCODE_SHIFT_RIGHT" android:isModifier="true"/>
         <Key android:keyLabel="HW" android:keyOutputText="◍" android:codes="0x25CD"/>
     </Row>
     <Row android:keyWidth="64px">
         <Key android:keyLabel=" " android:keyWidth="704px"/>
         <Key android:keyLabel="ひら"  android:keyOutputText="◐" android:codes="0x25D0"/>
     </Row>
 </Keyboard>

A few important things: to make a gap BEFORE a key, I just added a 0 width key. <Key android:keyLabel="　" android:keyHeight="0px" android:keyWidth="0px" android:horizontalGap="32px"/>

Another thing: For the control keys (Like the one that opens the IME menu, I’ve used special characters to alert the code: android:keyOutputText="◐" etc.

It took me a while to search for the way to open the IME menu, so here’s how:
How to set/call an new input method in Android

HTH, all code is public domain