In this Jetpack compose tutorial we will learn How to create Spannable text and make text selectable in Android application using Jetpack Compose.
Text is a composable function that display text to the user and it has a property called "textStyle" which can be used to control its look,If we want to apply several style to a particular text at character level then we can use SpanStyle and we have to use Annotated String for that.
What we will cover
- How to create Text Spannable with Jetpack compose
- How to Make Text Selectable with Jetpack compose
We already know how to set Text style,color with Jetpack compose, now to make text spannable we will apply the Spanstyle on the text
|
withStyle(style = SpanStyle(color = Color.Blue,fontSize = 40.sp)) { append("S") }
|
Let's get started
Step 1: Create android application in android studio
Step 2: Follow step for setup Jetpack Compose with Android Studio
Step 3:Lets add one simple example
Text(
buildAnnotatedString {
withStyle(style = SpanStyle(color = Color.Blue,fontSize = 40.sp)) {
append("S")
}
withStyle(style = SpanStyle(color = Color.Red,fontSize = 30.sp)) {
append("pa")
}
withStyle(style = SpanStyle(fontWeight = FontWeight.SemiBold, color = Color.DarkGray)) {
append("nnable")
}
withStyle(style = SpanStyle(color = Color.Blue,fontSize = 40.sp)) {
append(" S")
}
withStyle(style = SpanStyle(background = Color.Yellow,fontSize = 25.sp)) {
append("tring")
}
}
)
|
To make text selectable we need to wrap the whole text inside SelectionContainer
SelectionContainer(content = {
Text(".....")
})
|
Full code
package com.example.jetpack
import android.os.Bundle
import android.view.WindowManager
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.selection.SelectionContainer
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.jetpack.ui.theme.JetPackTheme
import com.example.jetpack.widget.SpannableStringDemo
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE)
setContent {
MaterialTheme {
// A surface container using the 'background' color from the theme
Surface(color = MaterialTheme.colors.background) {
SpannableStringDemo()
}
}
}
}
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
JetPackTheme {
SpannableStringDemo()
}
}
@Composable
fun SpannableStringDemo() {
Column(
modifier = Modifier
.fillMaxWidth()
.fillMaxHeight()
.padding(16.dp)
) {
Text(text = "Below given text are selectable")
SelectionContainer(content = {
Text(
buildAnnotatedString {
withStyle(style = SpanStyle(color = Color.Blue,fontSize = 40.sp)) {
append("S")
}
withStyle(style = SpanStyle(color = Color.Red,fontSize = 30.sp)) {
append("pa")
}
withStyle(style = SpanStyle(fontWeight = FontWeight.SemiBold, color = Color.DarkGray)) {
append("nnable")
}
withStyle(style = SpanStyle(color = Color.Blue,fontSize = 40.sp)) {
append(" S")
}
withStyle(style = SpanStyle(background = Color.Yellow,fontSize = 25.sp)) {
append("tring")
}
}
)
})
}
}
|
.jpg) |
