Clickable SpannableText in Jetpack Compose
<p>Previously I have posted an article how we can span a text in jetpack compose . <a href="https://medium.com/@shmehdi01/spannable-text-in-jetpack-compose-a6ec33a20ec2" rel="noopener">See here</a></p>
<p>In compose if you want to make a text clickable either you can us <em>Modifer.clickable</em> on a Text or <strong>ClickableText</strong><em>.</em></p>
<p>But We’ll use ClickableText because it also give the offset of character when you click.</p>
<p>e.g</p>
<pre>
ClickableText("Hello", onClick = { offset ->
println("You clicked on offset $offset")
})</pre>
<p>In above code snippet if you click on ‘e’ of Hello, the output will be <em>You clicked on offset 1.</em></p>
<p>This will be helpful when you want click on span text we can easily find clickable span area.</p>
<p>Let’s create a AnnotatedString (Span text)</p>
<pre>
ClickableText(text = buildAnnotatedString {
append("I have read ")
withStyle(style = SpanStyle(color = Color.Red), ) {
append("Terms and Condition")
}
append(" and ")
withStyle(style = SpanStyle(color = Color.Red), ) {
append("Privacy policy")
}
}, onClick = {
println("Clicked offset $it")
})</pre>
<p>Output:</p>
<p><img alt="Output of above code snippet" src="https://miro.medium.com/v2/resize:fit:574/1*q_iGfDM2eQoPYJuZ_T6WGg.png" style="height:112px; width:638px" /></p>
<p>Now we will detect our span area, So what we do inside the withStyle scope we will add new line <em>pushStringAnnotation</em> it will hold the the annotated string and we can find it later.</p>
<p>Also I’m refactoring the above code in such sequence manner for better under standing.</p>
<p><a href="https://medium.com/@shmehdi01/clickable-spannabletext-in-jetpack-compose-c24514c34f27">Visit Now</a></p>