Animate character-by-character the appearance of text

You can animate, character-by-character, the appearance of text, so it looks like a streaming typing effect, similar to what a typewriter would produce.

Version compatibility

This implementation requires that your project minSDK be set to API level 21 or higher.


Animate text character-by-character

This code animates text character-by-character. It tracks an index to control how much of the text is revealed. The displayed text updates dynamically to show only the characters up to the current index. Finally, the variable runs the animation when it changes.

Key points about the code

  • BreakIterator correctly iterates over characters regardless of how they are stored. For example, animated emojis are made up of multiple characters; BreakIterator ensures that they're handled as a single character, so that the animation isn't broken.
  • LaunchedEffect starts a coroutine to introduce the delay between the characters. You can replace the code block with a click listener–or any other event–to trigger animation.
  • The Text composable re-renders every time the value of substringText is updated.


Figure 1. Text and emoji animated character-by-character.

Parent collections

Text is a central piece of any UI. Find out different ways you can present text in your app to provide a delightful user experience.
This series of videos introduces various Compose APIs, quickly showing you what’s available and how to use them.

Have questions or feedback

Go to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts.