HOW TO: Making a custom keyboard with Vanilla App Inventor

[AyProductions]

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

[SOLVED] Extension Suggestion: Hide System Keyboard

A quick fix to reduce the extension's size. Updated extension: io.mohamed.hidesystemkeyboard.aix (4.2 KB) Thanks @TIMAI2 Yes, It would indeed. But it would also disable the ability to use the cursor and select the text, etc.. ( without showing the keyboard ).

Design the keyboard however you want

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

MultiLine

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

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 !

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

HOW TO: Making a custom keyboard with Vanilla App Inventor

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). [Snap2]

---

I am not a great expert at explaining things !

---

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 ! Here it is:
CustomKeyboardTest.aia (9.7 KB)

[TIMAI2]

A good start

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

[gordonlu310]

@AyProductions

blocks689×5438 491 KB

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

Not tested these, but pretty sure they work.

[gordonlu310]

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

[AyProductions]

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

[ChrisWard]

@gordonlu310

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

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

[ChrisWard]

@gordonlu310

Not tested these, but pretty sure they work.

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:

Get Cursor Position in Android in Edit Text?

getSelectionStart()

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

App Inventor Extensions: Textbox | Pura Vida Apps

[ChrisWard]

@AyProductions

But the Caps Lock key does not work. Can you please help me??

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

[ChrisWard]

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!

[AyProductions]

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)