Spacing in custom keyboard

Question

When making a custom keyboard I can get a leading space (space to the left) of a key by using android:horizontalGap="6.25%p.
How do I get trailing space (space to the right)?

Answer 1

android:horizontalGap="6.25%p.

It creates the gap, which is before the key that carries the horizontalGap attribute. ie. leading space (space to the left) of a key.

eg.

<Row>        
    <Key android:codes="69"    android:keyLabel="E" android:horizontalGap="6.25%p" />
    <Key android:codes="70"    android:keyLabel="F" />        
</Row>

Now add a horizontalGap (on Keyboard level) that is greater than 0, the horizontalGap (on Key level) no longer creates a gap before but now after the key that carries the horizontalGap attribute. ie. trailing space (space to the right) of a key

Answer 2

For me on Android 5.1 android:horizontalGap attribute works in following way:

• If you have in the row sum of all android:keyWidth more than 100 then gap is displayed after key for which it was specified.
• If the sum is less then 100 then then the gap is before the key

For example. In this case it is before

<Row>
    <Key android:codes="97" android:keyLabel="a" android:horizontalGap="5%p" android:keyEdgeFlags="left"/>
    <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"/>
    <Key android:codes="66" android:keyIcon="@drawable/enter_key" android:keyWidth="20%p" android:isRepeatable="true" android:keyEdgeFlags="right"/>
</Row>

And when I change only one value the gap appears after:

<Row>
    <Key android:codes="97" android:keyLabel="a" android:horizontalGap="5%p" android:keyEdgeFlags="left"/>
    <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"/>
    <Key android:codes="66" android:keyIcon="@drawable/enter_key" android:keyWidth="22%p" android:isRepeatable="true" android:keyEdgeFlags="right"/>
</Row>

Answer 3

I had this problem too. I never found a good solution. Android's Keyboard layout API sucks. If I were doing this all over again I would not have used it and instead created my own UI from scratch interfacing with InputMethod directly.

In any case, my hack solution was to add an extra key at the bottom of the layout with a 100% width and only 1dp height. The button does absolutely nothing and the height is so small the user doesn't see it. But the width of the key fixes the gap issue.

Answer 4

The only workaround is to specify correct keyWidth so that sum of keyWidth in a row is less or equal than 100%. (Thanks @Lemberg for your observation)

For my example I divided 100 by 12 (number of max keys in a row) which is 8.(3) thus correct horizontalGap for 11 key row would be 8.33/2. (4.165 + 11*8.33 + 4.165 = 99.96 ~ 100)

<Keyboard xmlns:android="http://schemas.android.com/apk/res/android"
       android:keyWidth="8.33%p"
  ...
  <Row>
        <Key android:codes="4304" android:keyLabel="ა" android:horizontalGap="4.165%p" android:keyEdgeFlags="left" />
        <Key android:codes="4321" android:keyLabel="ს" />
        <Key android:codes="4307" android:keyLabel="დ" />
        <Key android:codes="4324" android:keyLabel="ფ" />
        <Key android:codes="4306" android:keyLabel="გ" />
        <Key android:codes="4336" android:keyLabel="ჰ"/>
        <Key android:codes="4335" android:keyLabel="ჯ"/>
        <Key android:codes="4313" android:keyLabel="კ"/>
        <Key android:codes="4314" android:keyLabel="ლ"/>
        <Key android:codes="4329" android:keyLabel="ჩ"/>
        <Key android:codes="4319" android:keyLabel="ჟ" android:keyEdgeFlags="right"/>
  </Row>