👋Hey Composers (Android developers)😄, finally wait is over and Jetpack Compose 1.0.0 is here 🎉. In this article, we’ll see how to use InlineTextContent to use composable in the text line in Jetpack Compose.

⚡Introduction ️

While developing Android applications, we sometimes may have a design-use-case that we need a design that aligns with the Text component. See below diagram 👇 (Forgive me for my bad design and example 😬)

Here’s what I want to explain from this diagram:

1. Showing user presence (online/offline) ahead of user’s name
2. Showing some shapes with text (just for example)
3. Adding a divider/separator between social links.

Let’s see then how to implement UI 3️⃣

💻Implementation

Okay. So we have to design a UI where we want to show three text items i.e. LinkedIn / Twitter / Portfolio and have separator in between these items. We know we can build divider UI using Box with Shape as a clip. So let’s do that.

Basically, we can do these things by using Row, right? So what’s an advantage here? So the advantage is the size of composable always remains with the size of text and we can control it. You’ll see how we provide size to inline composable content in some time 👇.

Jetpack Compose comes with foundation group which provides ready to use building blocks and extend foundation to build your own design system pieces. InlineTextContent is part of foundation group. Let’s directly see code and step-by-step understand what is what and why!

Let’s first create a Composable function with basic setup of showing text.