Using a custom keyboard in B4A?

nfordbscndrd

Well-Known Member
Licensed User
Longtime User
I've been trying to use a custom keyboard and not getting anywhere. I'm using a label for the text field and am able to process keypresses on my keyboard, but I can't handle these things:

1. Move the cursor to the point touched by the user.
2. Have a blinking cursor or any cursor which doesn't take up a whole character space (e.g.: spa|ce). Using the default keyboard, the cursor is flush up against the character on its left.
3. Get a label to look like an EditText box, though I haven't tried putting a transparent label over an EditText box.

The only thing I've found on the forums is a Hebrew keyboard, but it has even more problems than those above.
 

Erel

B4X founder
Staff member
Licensed User
Longtime User
Apparently the cursor doesn't appear when InputType is NONE. You can use the Phone library to hide the keyboard.
Try the attached project. Note that I'm handling EditText_Click event. This event doesn't appear in the list but is actually available for all views.

SS-2011-09-14_09.32.44.png
 

Attachments

  • Keyboard.zip
    10.1 KB · Views: 635
Upvote 0

nfordbscndrd

Well-Known Member
Licensed User
Longtime User
I tried your app first on a 10" tablet running 3.1. I typed a bunch of numbers in and then touched to the middle of them to move the cursor and a keyboard popped up and all the text was highlighted. I quit and recompiled several times and it worked perfectly each time -- the cursor moved and the keyboard never showed up again.

I uninstalled it from the tablet, compiled it again, and when the app started, the Android keyboard was open. After I closed it, the app worked w/o the keyboard showing up again.

Compiled to a 7" tablet running 2.2, typed some characters, but every time I touched the middle, a keyboard would start to pop up then disappeared. The cursor stayed at the end. Quit and recompiled and never saw the keyboard again, but the cursor never moved. Uninstalled, recompiled, saw the keyboard once before it disappeared but again, the cursor never moved.

I'm trying to work out a method using a series of labels to cover an EditText which is set to no keyboard. For example, if the EditText view is 10 characters wide and 200 pixels wide, I use ten 20-pixel wide labels across it. The cursor is a 1-pixel wide label which overlaps the last 2 pixels of the label touched. When a key on the custom keyboard is touched, the characters after the cursor are moved over one label and the new character is put in the label to the right of the cursor, then the cursor moves to its right.

When a left or right arrow is touched, the cursor labels just moves left or right one charater label width. If backspace is touched, the characters to the right of the cursor all move left 1 label and the cursor moves 1 character left.

I don't see any reason this shouldn't work, but it's not working perfectly yet for some reason.
 
Upvote 0

nfordbscndrd

Well-Known Member
Licensed User
Longtime User
I've got the custom keyboard working in my app. It works just as described in my previous post. I'm on my way out just now, but first chance I get I'll upload a sample app with just the keyboard code. Meanwhile, here is what it looks like (not cleaned up for production yet):

customkybd.jpg
 
Upvote 0

nfordbscndrd

Well-Known Member
Licensed User
Longtime User
Attached is an app to demonstrate interfacing with a custom keyboard. It's more complex than I was hoping, so if someone has an easier way (that still has the features below), feel free to say so.

Features:

In order to have it look like a keyboard, I used ImageViews for the keys with the keyfaces drawn on them. A more flexible way is to use the included blank key graphic for each of the keys, then put a transparent label over each key's ImageView to print the keyface on. (If it is possible to print the keyfaces over ImageViews without using labels, I'm not familiar with how. I've never used Canvas, for example.)

The features include the appearance of editing on your device's usual EditText, including a regular-looking, blinking cursor, the ability to touch the text to move the cursor, left and right cursor buttons, etc.

(The screenshot in the previous post is not how this example app looks. I've extracted just the two edit boxes and the keyboard.)
 

Attachments

  • CustomKeyboard.zip
    83 KB · Views: 751
Last edited:
Upvote 0

nfordbscndrd

Well-Known Member
Licensed User
Longtime User
I just ran the app on a 4" emulator and saw that Android is not adjusting the size of the views down for some reason, so I'll have to fix something up. The code still works, but you can't try it out 100% on a phone.

Edit:
Attached update to previous post which fits on 480x320x1.5 as well as 800x480x1 and 1280x800x1.
 
Last edited:
Upvote 0

Djembefola

Active Member
Licensed User
Longtime User
Nice, thank you for sharing. The only feature i'm missing is a visual feedback, when a keyboard key is pressed.
 
Upvote 0

nfordbscndrd

Well-Known Member
Licensed User
Longtime User
Nice, thank you for sharing. The only feature i'm missing is a visual feedback, when a keyboard key is pressed.

It should be easy to add that in any number of ways. Also, for audio/tactile feedback, see this page.

Another feature I thought about adding is "Select all", but the code was long enough without getting into a lot of bonus stuff that's easy enough for anyone to add.
 
Last edited:
Upvote 0
Top