New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Compose Foundation

ClickableText

Common

A continent version of [BasicText] component to be able to handle click event on the text.

This is a shorthand of [BasicText] with [pointerInput] to be able to handle click event easily.

Last updated:

Installation

dependencies {
   implementation("androidx.compose.foundation:foundation:1.7.0-beta04")
}

Overloads

@Deprecated("Use Text or BasicText and pass an AnnotatedString that contains a LinkAnnotation"
@Composable
fun ClickableText(
    text: AnnotatedString,
    modifier: Modifier = Modifier,
    style: TextStyle = TextStyle.Default,
    softWrap: Boolean = true,
    overflow: TextOverflow = TextOverflow.Clip,
    maxLines: Int = Int.MAX_VALUE,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    onClick: (Int) -> Unit
)

Parameters

namedescription
textThe text to be displayed.
modifierModifier to apply to this layout node.
styleStyle configuration for the text such as color, font, line height etc.
softWrapWhether the text should break at soft line breaks. If false, the glyphs in the text will be positioned as if there was unlimited horizontal space. If [softWrap] is false, [overflow] and [TextAlign] may have unexpected effects.
overflowHow visual overflow should be handled.
maxLinesAn optional maximum number of lines for the text to span, wrapping if necessary. If the text exceeds the given number of lines, it will be truncated according to [overflow] and [softWrap]. If it is not null, then it must be greater than zero.
onTextLayoutCallback that is executed when a new text layout is calculated. A [TextLayoutResult] object that callback provides contains paragraph information, size of the text, baselines and other details. The callback can be used to add additional decoration or functionality to the text. For example, to draw selection around the text.
onClickCallback that is executed when users click the text. This callback is called with clicked character's offset.
@Deprecated("Use Text or BasicText and pass an AnnotatedString that contains a LinkAnnotation"
@Composable
@ExperimentalFoundationApi // when removing this experimental annotation,
fun ClickableText(
    text: AnnotatedString,
    onHover: ((Int?) -> Unit),
    modifier: Modifier = Modifier,
    style: TextStyle = TextStyle.Default,
    softWrap: Boolean = true,
    overflow: TextOverflow = TextOverflow.Clip,
    maxLines: Int = Int.MAX_VALUE,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    onClick: (Int) -> Unit
)

Parameters

namedescription
textThe text to be displayed.
modifierModifier to apply to this layout node.
styleStyle configuration for the text such as color, font, line height etc.
softWrapWhether the text should break at soft line breaks. If false, the glyphs in the text will be positioned as if there was unlimited horizontal space. If [softWrap] is false, [overflow] and [TextAlign] may have unexpected effects.
overflowHow visual overflow should be handled.
maxLinesAn optional maximum number of lines for the text to span, wrapping if necessary. If the text exceeds the given number of lines, it will be truncated according to [overflow] and [softWrap]. If it is not null, then it must be greater than zero.
onTextLayoutCallback that is executed when a new text layout is calculated. A [TextLayoutResult] object that callback provides contains paragraph information, size of the text, baselines and other details. The callback can be used to add additional decoration or functionality to the text. For example, to draw selection around the text.
onHoverCallback that is executed when user hovers over the text with a mouse or trackpad. This callback is called with the hovered character's offset or null if the cursor is no longer hovering this.
onClickCallback that is executed when users click the text. This callback is called with clicked character's offset.

Code Examples

ClickableText

@Suppress("Deprecation"
@Composable
@Sampled
fun ClickableText() {
    ClickableText(
        text = AnnotatedString("Click Me"),
        onClick = { offset ->
            Log.d("ClickableText", "$offset -th character is clicked.")
        }
    )
}

LongClickableText

@Composable
@Sampled
fun LongClickableText(
    text: AnnotatedString,
    modifier: Modifier = Modifier,
    style: TextStyle = TextStyle.Default,
    softWrap: Boolean = false,
    overflow: TextOverflow = TextOverflow.Clip,
    maxLines: Int = Int.MAX_VALUE,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    onLongClick: (offset: Int) -> Unit
) {
    val layoutResult = remember { mutableStateOf<TextLayoutResult?>(null) }
    val gesture = Modifier.pointerInput(onLongClick) {
        detectTapGestures(
            onLongPress = { pos ->
                layoutResult.value?.let { layout ->
                    onLongClick(layout.getOffsetForPosition(pos))
                }
            }
        )
    }

    Text(
        text = text,
        modifier = modifier.then(gesture),
        style = style,
        softWrap = softWrap,
        overflow = overflow,
        maxLines = maxLines,
        onTextLayout = {
            onTextLayout(it)
            layoutResult.value = it
        }
    )
}