Emoji picker

[dessalines]

This could either be done by implementing an already existing android emoji picker, or by trying to build a custom one into thumb key.

I'm leaning toward the former, so I don't have to maintain it, and solve all the emoji related issues that might come up.

edit:

Unfortunately the former solution isn't working for the existing 2 emoji picker libraries I've tried. There appear to be no good jetpack compose emoji pickers yet.

[dessalines]

I'm leaning now toward integrating this into thumb-key's 3x3 grid layout.

Categories and searching might make this pretty difficult tho.

[breversa]

What about resizing the spacebar to make room for an emoji picker button to the left side of it?

This would keep the spacebar in the center of the screen, without overly decreasing the usability of the spacebar.

[dessalines]

No, it'd be a swipe, probably off the numeric button.

[jm355]

I don't think either categories or searching would be necessary right away, if you could just scroll through all the emojis

[Limfjorden]

No, it'd be a swipe, probably off the numeric button.

What about having it in place of the settings button? That button takes up a lot of space for something you might only use when just starting out.

[jm355]

Maybe the best bet would be an option for what the top right button is with settings as the default

[Limfjorden]

Yea, maybe you could choose to have a hold button for switching keyboards and emojis (the "globe"), if people like that feature from usual mobile keyboard. Though I don't know if holding-buttons will be a thing in this keyboard, since swipes are supposed to replace that I think.

[domportera]

I'm personally a big fan of the way AnySoftKeyboard does it. Signal has a similar flow built-in too. Basically, you just type a : and then type the name of the emoji, and relevant results fill a horizontal list on top of the keyboard (though in this case, maybe on the vertical sides?).

Seems like the best deal for usability-to-ease-of-implementation. Maybe instead of a colon there is a designated emoji key swipe.

for tagging all the emojis ahead of time, we could set up a firepad or similar to allow anyone to add relevant tags to any/all emojis

[domportera]

I actually found that google has an Emoji2 library with an emoji picker view

I havent scrubbed the source/licenses/etc, and i dont know if it supports search in any straightforward or roundabout way, but it could be worth a try if it passes the sniff test

[dessalines]

I tried my best to ask how to use that, but no one could answer me, because it has no docs.

https://stackoverflow.com/questions/75815462/how-do-i-use-android-emoji2-emoji-picker-in-jetpack-compose

[jm355]

https://stackoverflow.com/questions/70903309/how-to-display-emoji-in-jetpack-compose is this helpful?

[dessalines]

Nope

[KraXen72]

Basically, you just type a : and then type the name of the emoji, and relevant results fill a horizontal list on top of the keyboard (though in this case, maybe on the vertical sides?).

this is also what discord does, and its a pretty good full replacement for an emoji search, actually.
i would still love to see a full list of emoji when needed, because not always i know what they are called.
and what would be really useful is, upon swiping to the emoji key, you'd have a horizontal bar of your 9-12 recent emoji / possibly custom selected, favorite emoji you don't need to type out.

[dessalines]

I agree that it should be a filterable thing. I'd much rather someone just create a multi-purpose emoji picker in jetpack compose, that I could include, rather than having to build and support a custom one inside thumbkey, that would have to have sections, be scrollable, searchable, etc.

[jm355]

Did you see the emoji2 emojipicker sample app? https://android.googlesource.com/platform/frameworks/support/+/refs/heads/androidx-main/emoji2/emoji2-emojipicker/samples

Found under version 1.4 here, they have a short section on how to use the library. I'm guessing you saw it but it looks like it might be what you're looking for https://developer.android.com/jetpack/androidx/releases/emoji2#version_14_2

[KraXen72]

any progress on this? currently, i have ta switch keyboards each time i want to type emoji, which is non-ideal.

[dessalines]

No, I'm very busy with other things.

[KraXen72]

understandable, thanks for the update. good luck!

[sslater11]

@dessalines
Hey, I've managed to get the emoji2 picker working in thumbkey, just got to clean up the code before I submit a PR.

I've also gotta work on the actual toggle to switch to it, and add an icon.

Please notice that I'm temporarily using the numberpad key to toggle it. I also have to press the back button, which closes the keyboard, so I'm thinking I'll add a back button on the right hand side? Think I'll add a backspace key on the right side too.

There's also the matter of where we should put the emoji button
I think we need a plan for where to put all the modifier keys, because I want access other ones like undo/redo.

I think the shift key is in the wrong place, because it's on a letter. On my personal layout, I have only letters on those 9 keys, and keep modifiers separate. I also have a letter assigned to the swipe that is the shift key on all your layouts.

Modifiers we need:

Backspace
Enter

Shift / Caps lock
Emoji Picker
Number pad

Select all
Cut
Copy
Paste
Undo
Redo

Settings
Move Keyboard
Change layout
Keyboard Switcher

I'm thinking we spread these out over the 2 buttons Settings and Enter

[dessalines]

Nice! IMO the emoji button could replace the settings button, and make settings a swipe (this also makes accidentally going into the settings less of a problem).

It'd be nice to group these, so have settings-related things (settings button, keyboard switcher, move keyboard) as swipes off the emoji key on the top right.

Then the number key could have the action-related things as swipes, so Copy, paste, etc.

[sslater11]

Okay I have it working now, but not made any git commits at all, just wanted to check if you like it.

I forgot to show in the demo that you can swipe up on the emoji key to get into the settings.
1m30s long demo lol.

I have changed the functionality of the "Select All and Copy" button to just "Select All, as we now have select all, cut, copy, and paste. I've kept the code for selectAllAndCopy(), because it could be handy, even though it's now unused.

Added undo and redo, it just sends ctrl-z and ctrl-shift-z to the editor, which is what Florisboard does as they said it's the easiest way.

Emoji Key:
Swipe up:    Settings
Swipe left:  Change layout
Swipe right: Move keyboard


Number Pad Key:
Swipe up left:    Select All
Swipe up:         Shift

Swipe left:       Undo
Swipe right:      Redo

Swipe down left:  Cut
Swipe down:       Copy
Swipe down right: Paste

TODO: I still need to remove the settings button (SETTINGS_KEY_ITEM) from all the layouts and change them to the new EMOJI_KEY_ITEM button, and obviously check that there's no problems with the layouts.

As you can tell, there's quite a few changes. I can add it all with like 2-3 large git commits, or I can break it down into like 5-6 if that'd make it easier for you to review.

There's only one thing I don't like. To add the keyboard keys on the emoji view, I've copied and pasted the large KeyboardKey() function call, so we have a 55 line function call repeated twice. I couldn't think of a way to limit it to just once as we can't put it into a function as we need access to variables.

Oh also, in the demo there's toast popups which tell us when we copy/paste/cut/undo/redo. I'm going to remove those as they are too slow. If you undo, redo, copy and paste really quickly, the popups take ages to clear off the screen as they're queued. We're better off without. I'll keep the 'copy' one as that's essential, but the rest of the actions you see on the screen anyway, so don't need a popup for.

EDIT: Do you want the Undo/Redo as a separate PR? Or should I just do a single PR?
Any changes you want me to do?

[KraXen72]

this is really cool!

• i think the shift key should be left where it is for now, as many people are already used to it and it's in many layouts.
• the emoji icon is way too big & colorful imo. maybe use the Material Icons mood icon (smiley face) instead
• emoji category text has poor visibility. (it should be the same color as letter labels, or some of the other used text colors) .
• having copy up and paste down was really good UX. i am not sure you should change that. maybe keep the layout on number key as (top: select all & copy, right: redo, bottom: paste, left: undo)? i don't know about cut, maybe a down swipe from setting? not sure.

These are just my suggestions. I'm quite fond of the current shift & copy+paste ux myself, and i hope others will agree. But great work on the emoji picker!!

[dessalines]

This looks really good! Go ahead and open up a large PR and I can comment on the individual items there.

I agree also with @KraXen72 , that the shift should probably exist within the existing keyboards as it does now, because not all languages even have a CAPS/SHIFTED mode.

Oh also, in the demo there's toast popups which tell us when we copy/paste/cut/undo/redo. I'm going to remove those as they are too slow. If you undo, redo, copy and paste really quickly, the popups take ages to clear off the screen as they're queued. We're better off without. I'll keep the 'copy' one as that's essential, but the rest of the actions you see on the screen anyway, so don't need a popup for.

Seems fine to me. Anything that's immediately recognizeable probably doesn't need even a short toast.

Also agree that the emoji icon is too colorful, and the one @KraXen72 linked is much better.

There's only one thing I don't like. To add the keyboard keys on the emoji view, I've copied and pasted the large KeyboardKey() function call, so we have a 55 line function call repeated twice. I couldn't think of a way to limit it to just once as we can't put it into a function as we need access to variables.

Once you open the PR, I can see if there's a cleaner way to do that.

[sslater11]

@dessalines @KraXen72
I've changed the emoji key's icon to the one shown 😄.

I'll be honest, not sure how to change the text colour in the emoji picker, it's something I can look into, but I don't think it's a major issue right now. I noticed it myself, then forgot all about it haha.

In the future I may even change this to another emoji picker. I found one that looks really good and has the ability to search emojis, so we could get the feature where you type a colon then the emoji name to find it.
I think this looks better than the emoji2 picker I've got working with thumbkey https://github.com/vanniktech/Emoji

How about this for the key layouts?

Emoji Key:
Swipe up:    Settings
Swipe left:  Change layout
Swipe right: Move keyboard


Number Pad Key:
Swipe up left:    Select All
Swipe up:         Copy
Swipe up right:   Cut

Swipe left:       Undo
Swipe right:      Redo

Swipe down left:  
Swipe down:       Paste
Swipe down right:

I still need to tidy the code and stuff so it may be a few days, and I have a lot on at the moment too, but I will try to do a PR as soon as I can 😄.

[dessalines]

I'd tried to use that emoji library initially, but it doesn't support jetpack compose

Those seem fine for the layouts 👍

[sslater11]

I'm gonna put the new IME switcher as the emoji key swipe down.

Emoji Key:
Swipe up:    Settings
Swipe down:  IME Switcher
Swipe left:  Change layout
Swipe right: Move keyboard

I'll work on getting a PR done on Tuesday-Thursday, I'll have plenty of time then.

[dessalines]

If you merge from main, you'll see I added an IME switcher function, so that parts done. But feel free to place the actual key anywhere you see fit.