Custom keyboard key width in Android

Question

I am working on a custom keyboard when I am trying to achieve a layout similar to Google Keyboard. Everything is working fine as the whole keyboard is completed with successfull inputs in both upper and smaller cases but I am facing issue with layout designing of the keyboard.

I am trying to achieve below layout :

Using below code :

<Keyboard xmlns:android="http://schemas.android.com/apk/res/android"
    android:keyWidth="10%p"
    android:horizontalGap="0px"
    android:verticalGap="0px"
    android:keyHeight="@dimen/_54sdp">
    <Row>
        <Key android:codes="113" android:keyLabel="q" android:keyEdgeFlags="left"/>
        <Key android:codes="119" android:keyLabel="w"/>
        <Key android:codes="101" android:keyLabel="e"/>
        <Key android:codes="114" android:keyLabel="r"/>
        <Key android:codes="116" android:keyLabel="t"/>
        <Key android:codes="121" android:keyLabel="y"/>
        <Key android:codes="117" android:keyLabel="u"/>
        <Key android:codes="105" android:keyLabel="i"/>
        <Key android:codes="111" android:keyLabel="o"/>
        <Key android:codes="112" android:keyLabel="p" android:keyEdgeFlags="right"/>
    </Row>
    <Row>
        <Key android:codes="97" android:keyLabel="a" android:keyEdgeFlags="left" android:horizontalGap="5%p"/>
        <Key android:codes="115" android:keyLabel="s"/>
        <Key android:codes="100" android:keyLabel="d"/>
        <Key android:codes="102" android:keyLabel="f"/>
        <Key android:codes="103" android:keyLabel="g"/>
        <Key android:codes="104" android:keyLabel="h"/>
        <Key android:codes="106" android:keyLabel="j"/>
        <Key android:codes="107" android:keyLabel="k"/>
        <Key android:codes="108" android:keyLabel="l"/>
    </Row>
    <Row>
        <Key android:codes="-1" android:keyIcon="@drawable/sym_keyboard_caps" android:keyEdgeFlags="left"/>
        <Key android:codes="122" android:keyLabel="z"/>
        <Key android:codes="120" android:keyLabel="x"/>
        <Key android:codes="99" android:keyLabel="c" />
        <Key android:codes="118" android:keyLabel="v"/>
        <Key android:codes="98" android:keyLabel="b"/>
        <Key android:codes="110" android:keyLabel="n"/>
        <Key android:codes="109" android:keyLabel="m"/>
        <Key android:codes="-5" android:keyIcon="@drawable/sym_keyboard_delete" android:keyWidth="20%p" android:isRepeatable="true"/>
    </Row>
    <Row android:rowEdgeFlags="bottom">
        <Key android:codes="-2" android:keyLabel="@string/key_label_symbols" android:horizontalGap="15%p" android:keyEdgeFlags="left" />
        <Key android:codes="47" android:keyLabel="/" android:horizontalGap="10%p"/>
        <Key android:codes="32" android:keyIcon="@drawable/sym_keyboard_space" android:keyWidth="50%p" android:isRepeatable="true"/>
        <Key android:codes="46" android:keyLabel="." android:horizontalGap="10%p"/>
        <Key android:codes="-4" android:keyIcon="@drawable/sym_keyboard_done" android:horizontalGap="15%p" android:keyEdgeFlags="right"/>
    </Row>
</Keyboard>

Issue is with the bottom row where width of keys for spacebar, ?123 and return key are not being adjusted as expected.

Ignore the drawables for now. I can not achieve proper spacing as I want the space bar to be biggest other splitted as shown in above layout.

Any ideas..??

Answer 1

Try this:

<Row android:rowEdgeFlags="bottom">
<Key android:codes="-2" android:keyLabel="123" android:keyWidth="10%p"/>
<Key android:codes="44" android:keyLabel="," android:keyWidth="12.5%p"/>
<Key android:codes="32" android:isRepeatable="true" android:keyLabel="SPACE" android:keyWidth="50%p"/>
<Key android:codes="46" android:keyLabel="." android:keyWidth="12.5%p"/>
<Key android:codes="10" android:keyWidth="15%p" android:keyIcon="@drawable/ic_keyboard_return" android:keyEdgeFlags="right"/>
</Row>