Applying KeyboardView in android

Question

I am trying to make a custom keypad layout that has 3 keys the left , a space , 3 keys in the middle , a space and one key. Shown by plus signs, a row on the keyboard should look like :

+++=+++=+

where plus signs are the keys and = represents the spaces. My xml code is :

<?xml version="1.0" encoding="utf-8"?>
<Keyboard xmlns:android="http://schemas.android.com/apk/res/android"
android:keyWidth="12.50%p"
android:keyHeight="8.9%p">


<Row>
    <Key android:codes="1"      android:keyLabel="sin"                          android:isRepeatable="true"   android:keyEdgeFlags="left" />
    <Key android:codes="2"      android:keyLabel="cos"                      android:isRepeatable="true" />
    <Key android:codes="3"      android:keyLabel="tan"                      android:isRepeatable="true"
         android:horizontalGap="6.25%p"  />
    <Key android:codes="-1"     android:keyLabel="DRAW"                     android:isRepeatable="true"   android:keyWidth="25%p"     />
    <Key android:codes="22"     android:keyLabel="x\u207F"                  android:isRepeatable="true"
         android:horizontalGap="6.25%p" />
    <Key android:codes="-2"     android:keyIcon="@drawable/delete_symbol"   android:isRepeatable="true"   android:keyEdgeFlags="right"/>
</Row>
<Row>
    <Key android:codes="4"      android:keyLabel="asin"     android:isRepeatable="true"     android:keyEdgeFlags="left" />
    <Key android:codes="5"      android:keyLabel="acos"     android:isRepeatable="true" />
    <Key android:codes="6"      android:keyLabel="atan"     android:isRepeatable="true" 
         android:horizontalGap="6.25%p" />
    <Key android:codes="36"     android:keyLabel="sinh"        android:isRepeatable="true"  />
    <Key android:codes="37"     android:keyLabel="cosh"        android:isRepeatable="true" />
    <Key android:codes="38"     android:keyLabel="tanh"        android:isRepeatable="true"
         android:horizontalGap="6.25%p" />
    <Key android:codes="21"     android:keyLabel="\u00F7"   android:isRepeatable="true"   android:keyEdgeFlags="right" />
</Row>
<Row>
    <Key android:codes="42"      android:keyLabel="asinh"    android:isRepeatable="true"     android:keyEdgeFlags="left" />
    <Key android:codes="43"      android:keyLabel="acosh"      android:isRepeatable="true" />
    <Key android:codes="44"      android:keyLabel="atanh"      android:isRepeatable="true"  
        android:horizontalGap="6.25%p" />
    <Key android:codes="33"     android:keyLabel="7"        android:isRepeatable="true"      />
    <Key android:codes="34"     android:keyLabel="8"        android:isRepeatable="true" />
    <Key android:codes="35"     android:keyLabel="9"        android:isRepeatable="true" 
        android:horizontalGap="6.25%p"/>
    <Key android:codes="20"     android:keyLabel="\u00D7"   android:isRepeatable="true"    android:keyEdgeFlags="right" />   
</Row>

<Row>
    <Key android:codes="10"     android:keyLabel="\u221a"    android:keyEdgeFlags="left"     android:isRepeatable="true" />
    <Key android:codes="11"     android:keyLabel="e^("      android:isRepeatable="true" />
    <Key android:codes="12"     android:keyLabel="ln("      android:isRepeatable="true" 
        android:horizontalGap="6.25%p" />
    <Key android:codes="30"     android:keyLabel="4"        android:isRepeatable="true"      />
    <Key android:codes="31"     android:keyLabel="5"        android:isRepeatable="true" />
    <Key android:codes="32"     android:keyLabel="6"        android:isRepeatable="true"
        android:horizontalGap="6.25%p" />
    <Key android:codes="19"     android:keyLabel="\u2212"        android:isRepeatable="true"      android:keyEdgeFlags="right" />
</Row>

<Row>
    <Key android:codes="40"     android:keyLabel="log"      android:isRepeatable="true"     android:keyEdgeFlags="left" />
    <Key android:codes="41"     android:keyLabel="abs"   android:isRepeatable="true" />
    <Key android:codes="13"     android:keyIcon="@drawable/italic_x"        android:isRepeatable="true" 
        android:horizontalGap="6.25%p"/>
    <Key android:codes="27"     android:keyLabel="1"        android:isRepeatable="true"      />
    <Key android:codes="28"     android:keyLabel="2"        android:isRepeatable="true" />
    <Key android:codes="29"     android:keyLabel="3"        android:isRepeatable="true" 
        android:horizontalGap="6.25%p"/>
    <Key android:codes="18"     android:keyLabel="+"       android:isRepeatable="true"      android:keyEdgeFlags="right" />
</Row>

<Row>
    <Key android:codes="-3"     android:keyIcon="@drawable/keyboard_done"     android:isRepeatable="true"     android:keyWidth="25%p"         android:keyEdgeFlags="left"   />   
    <Key android:codes="19"     android:keyLabel="(-)"        android:isRepeatable="true" 
        android:horizontalGap="6.25%p" />
    <Key android:codes="16"     android:keyLabel="("        android:isRepeatable="true"      />
    <Key android:codes="26"     android:keyLabel="0"        android:isRepeatable="true" />
    <Key android:codes="17"     android:keyLabel=")"        android:isRepeatable="true" 
        android:horizontalGap="6.25%p" />
    <Key android:codes="23"     android:keyLabel="."        android:isRepeatable="true"     android:keyEdgeFlags="right" />
</Row>

On android 4.4 ; specifically Samsung Galaxy s4 and s5 , the custom keypad appears nicely. On Samsung galaxy s3 and the rest of devices with screen size less than 5inches, the keypad is distorted and looks like :

++=++++++

The reasoning behind my xml code for the custom keypad layout is this : - i have 7 keys in a row - each key takes up 12.5% of the screen width (making a total of 87.5% for 7 keys) - each of the 2 main spaces (= sign in my illustration) take up 6.25% of screen width. - the above make a total of 100% screen width

So according to my reasoning, the xml file i have posted should work across all devices. But this is not happening.

As I was searching for a solution on Google, i came through some information that there's a bug in the keyboardview. The bug was described as :

NOTE When we add a horizontalGap in pixels, this interferes with keyWidth in percentages adding up to 100%
NOTE When we have a horizontalGap (on Keyboard level) of 0, this make the horizontalGap (on Key level) to move from after the key to before the key... (I consider this a bug)

Can someone please help

Spaxr Spaxr · Accepted Answer · 2015-03-28T15:57:45

Yes, this is a bug in Android, but fortunately there is a workaround.

The solution is to add an empty key with horizontalGap > 0 and width = 0 between the keys where you need an empty space. This empty key will be the only one with a horizontalGap; all the other keys shouldn't have this attribute.

Here is my own example of three visible keys with spaces between them:

<Row>
    <Key android:codes="1" android:keyLabel="First key" android:keyEdgeFlags="left" />
    <Key android:codes="-999" android:keyLabel="" android:keyWidth="0%p" android:horizontalGap="2.0%p" />
    <Key android:codes="2" android:keyLabel="Second key" />
    <Key android:codes="-999" android:keyLabel="" android:keyWidth="0%p" android:horizontalGap="2.0%p" />
    <Key android:codes="3" android:keyLabel="Third key" android:keyEdgeFlags="right"/>
</Row>

Applying KeyboardView in android

1 Answers