Typewriter animation in Jetpack Compose

Make Apps Simple
Published in
2 min readAug 15, 2022


Typewrite animation using Jetpack Compose based on Flutter animated_text_kit package.

Typewriter Animation UI

There are a lot of cool text animations in the Flutter animated_text_kit package. We are going to create the Typewriter animation using Jetpack Compose.

The basic logic is simple. Given a list of strings, loop through the strings and then create substrings from them increasing character by character.

This is how we will be using TypewriterText .

Let’s now see how TypewriterText is implemented.

Seems like we are done. But if you run this, you would see an issue.

Emoji issues

You can see that we see an unidentified character symbol before the emoji is displayed properly.

Unicode replacement character
Unicode replacement character

This is because emojis are made up of multiple characters.

Emoji Compatibility

To fix the emoji display, we can use .codePoints() from String in Kotlin.

Change the texts like this.

Note: codePoints() requires API level 24. So the emoji issue will be fixed only for API 24 and above devices.

Complete code

Please comment with your valuable feedback. It would help me to improvise.

Kindly 👏👏👏 if this was useful.

If you like this article and you would be interested to know more about other text animations, please follow.



Make Apps Simple