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)?

score 5 · Accepted Answer · answered Sep 10 '13 at 16:47

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

Thats great, but what if I want a general level of gabs between keys (defined on keyboard) and I want custom defined space between keys to both right and left side... — Warpzit, Dec 08 '15 at 10:34

score 4 · Answer 2 · answered Jun 23 '15 at 12:21

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>

score 1 · Answer 3 · answered Feb 05 '16 at 17:14

1

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.

answered Feb 05 '16 at 17:14

trans

1,411
1
13
13

Couldn't agree more. I resent having to write my own keyboard library - yet I can't seem to think of a better option. Spacing is a complete mess. I had to design separate layouts for portrait and landscape - and my users still reported problems - like disappearing keys on certain platforms. – Melllvar Jan 25 '19 at 04:13

score 0 · Answer 4 · answered Dec 16 '16 at 07:25

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>

Spacing in custom keyboard

4 Answers4