Android: custom keyboard row is not centered

Question

I am experimenting with creating a custom keyboard for Android. I am using the soft keyboard sample app as a starting point. My problem is that I am unable to center a row in the keyboard while other samples that I found on the net clearly work.

My XML file looks like the following:

<?xml version="1.0" encoding="utf-8"?><Keyboard xmlns:android="http://schemas.android.com/apk/res/android"
android:horizontalGap="@dimen/horizontal_gap"
android:keyHeight="@dimen/key_height"
android:keyWidth="10%p"
android:verticalGap="@dimen/vertical_gap" >
<Row>
    <Key
        android:codes="49"
        android:keyEdgeFlags="left"
        android:keyLabel="1" />
    <Key
        android:codes="50"
        android:keyLabel="2" />
    <Key
        android:codes="51"
        android:keyLabel="3" />
    <Key
        android:codes="52"
        android:keyLabel="4" />
    <Key
        android:codes="53"
        android:keyLabel="5" />
    <Key
        android:codes="54"
        android:keyLabel="6" />
    <Key
        android:codes="55"
        android:keyLabel="7" />
    <Key
        android:codes="56"
        android:keyLabel="8" />
    <Key
        android:codes="57"
        android:keyLabel="9" />
    <Key
        android:codes="48"
        android:keyEdgeFlags="right"
        android:keyLabel="0" />
</Row>
<Row>
    <Key
        android:codes="1"            
        android:keyEdgeFlags="left"
        android:keyLabel="q" />
    <Key
        android:codes="2"
        android:keyLabel="w" />
    <Key
        android:codes="3"
        android:keyLabel="e" />
    <Key
        android:codes="4"
        android:keyLabel="r" />
    <Key
        android:codes="5"
        android:keyLabel="t" />
    <Key
        android:codes="6"
        android:keyLabel="y" />
    <Key
        android:codes="-5"
        android:isRepeatable="true"
        android:keyEdgeFlags="right"
        android:keyIcon="@drawable/sym_keyboard_delete" />
</Row>
<Row>
    <Key
        android:codes="99"
        android:keyEdgeFlags="left"
        android:keyLabel="c" />
    <Key
        android:codes="32"
        android:isRepeatable="true"
        android:keyIcon="@drawable/sym_keyboard_space"
        android:keyWidth="30%p" />
    <Key
        android:codes="63"
        android:keyLabel="\?"
        android:keyWidth="@dimen/small_buttons" />
    <Key
        android:codes="33"
        android:keyLabel="!"
        android:keyWidth="@dimen/small_buttons" />
    <Key
        android:codes="46"
        android:keyLabel="."
        android:keyWidth="@dimen/small_buttons" />
    <Key
        android:codes="44"
        android:keyEdgeFlags="right"
        android:keyLabel=","
        android:keyWidth="@dimen/small_buttons" />
</Row></Keyboard>

What's missing in order to make the second and the third rows centered?

Thanks in advance.

Answer 1

The top row has 10 keys while the second and third row have only 7 and 6 keys, respectively. Since the keyWidth is defined as 10%, those 10 keys fill the whole space. But, the second row and third row having 7 and 6 keys, respectively, only fill the 70% and 60% of whole space which means that they look aligned to the left with vacant space on the right. To make the keys alinged at the middle of the row, the first key of the second row should have 15% horizontal gap and third row 20% in order to shift the left side to the center.

Please correct the first portion of the second row and third row as follows :

<Row>
    <Key
        android:horizontalGap="15%"
        android:codes="1"            
        android:keyEdgeFlags="left"
        android:keyLabel="q" />

......

<Row>
    <Key
        android:horizontalGap="20%"
        android:codes="99"
        android:keyEdgeFlags="left"
        android:keyLabel="c" />