Typewriter animation in Jetpack Compose
Typewrite animation using Jetpack Compose based on Flutter animated_text_kit package.
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.
You can see that we see an unidentified character symbol before the emoji is displayed properly.
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.
