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
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") } } ) }) } } |
Article Contributed By :
|
|
|
|
4298 Views |