Enable Interactive Text in Jetpack Compose

Jetpack Compose with Material 3 enables text selection and clickable links for better user engagement. Use these APIs for copyable text or actionable content.

Something Else

Explore text selection and links with code examples. We’ll cover enabling selection, disabling parts, and adding URLs.

1. Selectable Text: Easy Copy-Paste

Wrap text in SelectionContainer to enable selection.

@Composable
fun SelectableTextExample() {
    SelectionContainer {
        Text("This text is selectable")
    }
}
  

Why Try It: Allows copying. Use for articles or lists.

---

2. Disable Selection: Protect Specific Parts

Use DisableSelection to block copying in areas.

@Composable
fun PartiallySelectableTextExample() {
    SelectionContainer {
        Column {
            Text("This text is selectable")
            Text("This one too")
            Text("This one as well")
            DisableSelection {
                Text("But not this one")
                Text("Neither this one")
            }
            Text("But again, you can select this one")
            Text("And this one too")
        }
    }
}
  

Why Try It: Protects content. Use for headers or legal text.

---

3. Clickable Links: Add URL Actions

Attach LinkAnnotation.Url for clickable text.

@Composable
fun AnnotatedStringWithLinkExample() {
    Text(
        buildAnnotatedString {
            append("Go to the ")
            withLink(
                LinkAnnotation.Url(
                    "https://developer.android.com/",
                    TextLinkStyles(style = SpanStyle(color = Color.Blue))
                )
            ) {
                append("Android Developers ")
            }
            append("website, and check out the")
            withLink(
                LinkAnnotation.Url(
                    "https://developer.android.com/jetpack/compose",
                    TextLinkStyles(style = SpanStyle(color = Color.Green))
                )
            ) {
                append("Compose guidance")
            }
            append(".")
        }
    )
}
  

Why Try It: Opens URLs. Use for docs with external links.

---

4. Custom Click Handlers: Log and Respond

Extend LinkAnnotation for custom actions.

@Composable
fun AnnotatedStringWithListenerExample() {
    val uriHandler = LocalUriHandler.current
    Text(
        buildAnnotatedString {
            append("Build better apps faster with ")
            val link = LinkAnnotation.Url(
                "https://developer.android.com/jetpack/compose",
                TextLinkStyles(SpanStyle(color = Color.Blue))
            ) {
                val url = (it as LinkAnnotation.Url).url
                // log some metrics
                uriHandler.openUri(url)
            }
            withLink(link) { append("Jetpack Compose") }
        }
    )
}
  

Why Try It: Adds logic like analytics. Use for tracked links.

---

Which Feature Fits Your Needs?

Guide to text interaction APIs.

Feature	When to Use
SelectionContainer	Copying text from articles or lists
DisableSelection	Protecting headers or legal text
LinkAnnotation.Url	Clickable external links in docs
Custom LinkAnnotation	Tracked or logged clicks

Tips to Get Started Right

• Enable Selection Wisely: Wrap key text in SelectionContainer.
• Style Links: Use TextLinkStyles for consistency.
• Add Handlers: Log in onClick for insights.
• Test States: Check selection on devices.
• Keep It Intuitive: Use for multi-selections over switches.

FAQ

What’s the Easiest Way to Start?

Use SelectionContainer around Text.

---

How Do I Avoid Copying Certain Parts?

Wrap in DisableSelection.

---

Can I Customize Link Behavior?

Yes! Use LinkAnnotation with custom actions.