soft keyboard transition ... how does WhatsApp do it?

Question

I've been working on a messaging app, and was just wondering if anyone had some insight in to soft keyboard transitioning.

As it stands, I have what is essentially my own input method (a layout at the bottom of the screen) for sending smiley faces, scribbles, things like that. My problem is that when the soft keyboard is toggled, i get some serious rubber banding and black boxes remaining during the keyboard transition.

I noticed WhatsApp does what is essentially a perfect transition between the soft keyboard and their own emoji keyboard, and in fact stops any soft keyboard animation (black area seen behind the keyboard) from taking place at all!

The closest thing I've come up with is a layout that crops anything that would be covered by the keyboard from re-rendering, but this doesn't seem to work all that great, and is nowhere near as smooth as WhatsApp.

Any help would be appreciated!

tl;dr how do i replicate whatsapp's emoji keyboard?

Answer 1

Whatsapp SEEMS to transition to a new keyboard, but in reality it doesn't quite do that.

It actually creates a custom dialog over the keyboard with their Emojis. This is why it smoothly transitions from the normal keyboard to the emoji one. You can check this for yourself by opening your keyboard, then opening the emoji screen, and finally select the input method from your notification bar. You'll see the new input screen is shown behind the emoji screen.