How to create Spannable text in Jetpack compose and make text selectable?

Last updated Sep 04, 2021

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")
      }
      }
      )

    })
  }
}

Article Contributed By :

3579 Views

Projects By category