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>

Answer 2

Try this one...

<?xml version="1.0" encoding="utf-8"?>
 <Keyboard
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:keyHeight="@dimen/key_height"
   android:keyWidth="10%p"
   android:horizontalGap="2dp"
   android:verticalGap="10px">
 <Row>
    <Key
        android:keyEdgeFlags="left"
        android:keyLabel="q"
        android:popupCharacters="1"
        android:popupKeyboard="@xml/popup_keyboard" />
    <Key
        android:keyLabel="w"
        android:popupCharacters="2"
        android:popupKeyboard="@xml/popup_keyboard" />
    <Key
        android:keyLabel="e"
        android:popupCharacters="3ëèéê"
        android:popupKeyboard="@xml/popup_keyboard" />
    <Key
        android:keyLabel="r"
        android:popupCharacters="4"
        android:popupKeyboard="@xml/popup_keyboard" />
    <Key
        android:keyLabel="t"
        android:popupCharacters="5"
        android:popupKeyboard="@xml/popup_keyboard" />
    <Key
        android:keyLabel="y"
        android:popupCharacters="6"
        android:popupKeyboard="@xml/popup_keyboard" />
    <Key
        android:keyLabel="u"
        android:popupCharacters="7úùûū"
        android:popupKeyboard="@xml/popup_keyboard" />
    <Key
        android:keyLabel="i"
        android:popupCharacters="8"
        android:popupKeyboard="@xml/popup_keyboard" />
    <Key
        android:keyLabel="o"
        android:popupCharacters="9œôóō"
        android:popupKeyboard="@xml/popup_keyboard" />
    <Key
        android:horizontalGap="3%p"
        android:keyEdgeFlags="right"
        android:keyLabel="p"
        android:popupCharacters="0"
        android:popupKeyboard="@xml/popup_keyboard" />
</Row>

<Row>
    <Key
        android:horizontalGap="1.2%p"
        android:keyEdgeFlags="left"
        android:keyLabel="a"
        android:popupCharacters="æáãäāȁȃå"
        android:popupKeyboard="@xml/popup_keyboard" />
    <Key
        android:keyLabel="s"
        android:popupCharacters="ϐ"
        android:popupKeyboard="@xml/popup_keyboard" />
    <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:keyEdgeFlags="right"
        android:keyLabel="l" />
</Row>

<Row>
    <Key
        android:codes="-1"
        android:isModifier="true"
        android:isSticky="true"
        android:keyEdgeFlags="left"
        android:keyIcon="@drawable/ic_keyboard_capslock_black_24dp"
        android:keyWidth="15%p" />
    <Key android:keyLabel="z" />
    <Key android:keyLabel="x" />
    <Key
        android:keyLabel="c"
        android:popupCharacters="ç"
        android:popupKeyboard="@xml/popup_keyboard" />
    <Key android:keyLabel="v" />
    <Key android:keyLabel="b" />
    <Key
        android:keyLabel="n"
        android:popupCharacters="ñ"
        android:popupKeyboard="@xml/popup_keyboard" />
    <Key android:keyLabel="m" />
    <Key
        android:horizontalGap="2.5%p"
        android:codes="-5"
        android:isRepeatable="true"
        android:keyEdgeFlags="right"
        android:keyIcon="@drawable/ic_backspace_black_24dp"
        android:keyWidth="15%p" />
</Row>

<Row android:rowEdgeFlags="bottom">
    <Key
        android:codes="-2"
        android:keyEdgeFlags="left"
        android:keyLabel="\?123"
        android:keyWidth="15%p" />
    <Key
        android:codes="-10000"
        android:keyIcon="@drawable/ic_insert_emoticon_black_24dp" />

   <!-- <Key
        android:codes="-101"
        android:keyIcon="@drawable/ic_language_24dp"
        />-->
    <Key
        android:codes="32"
        android:isRepeatable="true"
        android:keyIcon="@drawable/ic_space_bar_black_24dp"
        android:keyWidth="45%p" />
    <Key
        android:keyLabel="."
        android:keyWidth="15%p"
        android:popupKeyboard="@xml/popup_symbols" />
    <Key
        android:horizontalGap="2.5%p"
        android:codes="10"
        android:keyEdgeFlags="right"
        android:keyIcon="@drawable/ic_next_circle_filled_45dp"
        android:keyWidth="15%p" />
</Row>
</Keyboard>