Android KeyboardView does not respect key width

Question

I've a different result in the layout display of the KeyboardView between Galaxy Tab S4 running android 8.1.0 and my phone Galaxy S8 running android 8.0.0. The difference are in the key width and horizontalGap.

Here is the correct keyboard on my phone:

While on the tablet, the keyboard looks like this:

We can see that the keys on 1st, 2nd and 3rd row have not the same width. But they must be of the same size. On the tablet it seems it's resized to take 100% of the parent container. In the same time, the horizontalGap is pushing the keys out of the parent container.

Here is the XML code that defines the keyboard layout:

<?xml version="1.0" encoding="utf-8"?>
<Keyboard xmlns:android="http://schemas.android.com/apk/res/android"
    android:keyWidth="8.5%p"
    android:keyHeight="7%p"
    android:keyEdgeFlags="left">

    <Row>
        <Key android:keyLabel="Q" android:keyEdgeFlags="left" />
        <Key android:keyLabel="W" />
        <Key android:keyLabel="E" />
        <Key android:keyLabel="R" />
        <Key android:keyLabel="T" />
        <Key android:keyLabel="Z" />
        <Key android:keyLabel="U" />
        <Key android:keyLabel="I" />
        <Key android:keyLabel="O" />
        <Key android:keyLabel="P" />
        <Key android:codes="55000"  android:keyIcon="@drawable/del_keyboard" android:isRepeatable="true" android:keyWidth="15%p" android:keyEdgeFlags="right" />
    </Row>
    <Row>
        <Key android:keyLabel="　" android:keyHeight="0px" android:keyWidth="0px" android:keyEdgeFlags="left" android:horizontalGap="11.75%p"/>
        <Key android:keyLabel="A"  />
        <Key android:keyLabel="S" />
        <Key android:keyLabel="D" />
        <Key android:keyLabel="F" />
        <Key android:keyLabel="G" />
        <Key android:keyLabel="H" />
        <Key android:keyLabel="J" />
        <Key android:keyLabel="K" />
        <Key android:keyLabel="L" android:keyEdgeFlags="right" />
    </Row>
    <Row>
        <Key android:keyLabel="　" android:keyHeight="0px" android:keyEdgeFlags="left"  android:keyWidth="0px" android:horizontalGap="20%p"/>
        <Key android:keyLabel="Y" />
        <Key android:keyLabel="X" />
        <Key android:keyLabel="C" />
        <Key android:keyLabel="V" />
        <Key android:keyLabel="B" />
        <Key android:keyLabel="N" />
        <Key android:keyLabel="M" android:keyEdgeFlags="right" />
    </Row>
    <Row>
        <Key android:keyLabel="　" android:keyHeight="0px" android:keyWidth="0px" android:horizontalGap="25%p"/>
        <Key android:codes="55001"  android:keyEdgeFlags="left"  android:keyIcon="@drawable/white_space_keyboard" android:keyWidth="50%p" />
    </Row>
</Keyboard>

For additional information, the keyboardView is in a fragment included in a slidingPaneLayout. Any ideas what's going on here? Thank you in advance!

Philiz Philiz · Accepted Answer · 2019-03-13T11:17:53

I've found a solution. Get the fragment container's width once available. Set new width to all keys. Invalidate keys to force the keyboard to redraw. For the padding-left on row 2,3 and 4, I just added a number of keys with height = 0 before the first key of each line.

//Here we wait for the fragment width to be available
currentView.post(new Runnable() {
        @Override
        public void run() {
            //Set the new width to the keys of the keyboard
            fixKeyboard(mKeyboard, currentView.getWidth());
            //Force redraw the keyboard
            mKeyboardView.invalidateAllKeys();
        }
    });
//...

private void fixKeyboard(Keyboard k, int dw)
{
    List<Keyboard.Key> keys = k.getKeys();

    int key_width = (dw / 11) - 2; //-2 for margin-right
    int row_number = 0;
    int pos_y = 0;
    int key_index_in_row = 0;
    for (Keyboard.Key key : keys)
    {
        if (key.y != pos_y)
        {
            pos_y = key.y;
            row_number++;
            key_index_in_row = 0;
        }

        //Space key
        if(row_number == 3 && key_index_in_row == 3)
        {
            key.width = 5 * key_width;
        }

        //Delete key
        else if(row_number == 0 && key_index_in_row == 10)
        {
            key.width = key_width + 4; //Slightly larger
        }
        else
        {
            key.width = key_width;
        }

        key.gap = 0;

        key.x = key_width * key_index_in_row;
        key_index_in_row++;
    }
}

With this XML

<?xml version="1.0" encoding="utf-8"?>
<Keyboard xmlns:android="http://schemas.android.com/apk/res/android"
android:keyWidth="8.5%p"
android:keyHeight="7%p"
android:keyEdgeFlags="left">

<Row>
    <Key android:keyLabel="Q" android:keyEdgeFlags="left" />
    <Key android:keyLabel="W" />
    <Key android:keyLabel="E" />
    <Key android:keyLabel="R" />
    <Key android:keyLabel="T" />
    <Key android:keyLabel="Z" />
    <Key android:keyLabel="U" />
    <Key android:keyLabel="I" />
    <Key android:keyLabel="O" />
    <Key android:keyLabel="P" />
    <Key android:codes="55000"  android:keyIcon="@drawable/del_keyboard" android:isRepeatable="true" android:keyWidth="15%p" android:keyEdgeFlags="right" />
</Row>
<Row>
    <Key android:keyLabel="　" android:keyHeight="0px" android:keyWidth="0px" android:keyEdgeFlags="left"/>
    <Key android:keyLabel="A" />
    <Key android:keyLabel="S" />
    <Key android:keyLabel="D" />
    <Key android:keyLabel="F" />
    <Key android:keyLabel="G" />
    <Key android:keyLabel="H" />
    <Key android:keyLabel="J" />
    <Key android:keyLabel="K" />
    <Key android:keyLabel="L" android:keyEdgeFlags="right" />
</Row>
<Row>
    <Key android:keyLabel="　" android:keyHeight="0px" android:keyEdgeFlags="left"  android:keyWidth="0px"/>
    <Key android:keyLabel="　" android:keyHeight="0px" android:keyWidth="0px"/>
    <Key android:keyLabel="Y" />
    <Key android:keyLabel="X" />
    <Key android:keyLabel="C" />
    <Key android:keyLabel="V" />
    <Key android:keyLabel="B" />
    <Key android:keyLabel="N" />
    <Key android:keyLabel="M" android:keyEdgeFlags="right" />
</Row>
<Row>
    <Key android:keyLabel="　" android:keyHeight="0px" android:keyWidth="0px" android:keyEdgeFlags="left"/>
    <Key android:keyLabel="　" android:keyHeight="0px" android:keyWidth="0px"/>
    <Key android:keyLabel="　" android:keyHeight="0px" android:keyWidth="0px"/>
    <Key android:codes="55001"  android:keyEdgeFlags="left"  android:keyIcon="@drawable/white_space_keyboard" android:keyWidth="50%p" />
</Row>

Android KeyboardView does not respect key width

1 Answers