HOW TO: Making a custom keyboard with Vanilla App Inventor

SOME NOTES BEFORE I START THIS TUTORIAL


I'm not shouting by using Caps, it's just that I'm trying to emphasize stuff.

This tutorial has been built up from many solutions here and there. Each old tutorial bits was taken to construct this, and some help from moderators have also been used!

You need an extension to create a basic keyboard if you are using a textBox

Design the keyboard however you want

Set your TextBox to MultiLine for the custom keyboard's Enter / Return key to work.

MultiLine :ballot_box_with_check:

You might want to use these symbols on your keyboard

Key Name Symbol
Backspace
Enter / Return

Big thanks to @gordonlu310 and @TIMAI2 and @ChrisWard!!


Hello! This tutorial will teach you how to create a custom keyboard from scratch in MIT App Inventor 2.

So let's begin!

First, design the keyboard. I designed it like this

After you finish your design, name your buttons properly, and let's move on to the blocks!

Big thanks to @gordonlu310 for helping me reduce the keyboard code!

The '\n' will leave a new line. You can see that in
blocks (7)

This is how the Enter / Return key works!


How does the Backspace key work? Let's see!

It first, segments the text, then the text pointer or cursor moves to the end! (It's not visible when you set the TextBox to ReadOnly mode, BUT DO NOT UNCHECK IT THOUGH!) and then finally, it removes the last character with the 'Length' block.


The rest of the keys just add a character to the end of the TextBox text :wink:!

So the credit for caps lock key goes to @ChrisWard :
Post #8


I am not a great expert at explaining things :sweat_smile:!


Test it on your phone and you get the output as...


Thanks! Please do not hesitate to reply and help me to improve this tutorial!


Oh, I almost forgot to put the AIA download link :sweat_smile:! Here it is:
CustomKeyboardTest.aia (9.7 KB)

2 Likes

A good start :slight_smile:

Missed a few tricks:

  1. Use the anyComponent blocks and a list of the button components to reduce block combing
  2. Consider using a label instead of a textbox ?
  3. Functionality to edit in the middle of a text (without deleting everything from the end)
  4. Display a cursor ...
  5. Switch between upper and lower case
7 Likes

You can easily replace these blocks with these blocks, but nice tutorial.

Not tested these, but pretty sure they work.

image

image

2 Likes

Also, I think you need to enable the Scrollable function in Screen1.

1 Like

you're right, but the designer was giving me some trouble so i did not enable it :wink:!

1 Like

The Textbox is scrollable, though it's a pity that it is not obvious to the User.

Just implementing my own custom keyboard. Backspace is not often from the very end of the text, it's usually applied where the User has placed the cursor - snag is, how do we know where the cursor is programmatically?

Edit:

getSelectionStart()

Edit2: Looks like Taifun's Textbox extension can report cursor position:

1 Like

It's just a matter of using a variable to store the current state. This is my code, I have two lists of characters, one uppercase, one lowercase. I don't use text on the buttons, I use images such that the vertical height of the characters uses more of the available vertical space on the button (= bigger characters without needing bigger buttons).

1 Like

Textbox scrolling is an issue, it allows the text to be longer vertically than the vertical height of the box - good. Once the text is longer than the vertical height of the box, you can't see what you are typing in - bad. There must be a way to auto-scroll such that the current line of text being entered can be seen. If you manually scroll up, set the cursor position, start typing, the text actually scrolls down so you cannot see your typing going in!

1 Like

Mods, you can edit the topic since it has been now a wiki to add your codes and solutions also.

(and I apologize for bumping)

(and also type your username before adding the solution in the main topic so I can give you credit)