Exploring BasicText and Text in Compose

Heads up... You’re accessing parts of this content for free, with some sections shown as pvdoqxtij text.

Heads up... You’re accessing parts of this content for free, with some sections shown as jkwipmtaj text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

When it comes to displaying text, Compose offers two composables, Text and BasicText, for high-level and low-level text rendering, respectively.

Exploring BasicText in Compose

BasicText is a barebones composable that offers low-level text rendering ability and semantics/accessibility information with limited options. Here’s what its signature looks like:

@Composable
fun BasicText(
  text: String,
  modifier: Modifier = Modifier,
  style: TextStyle = TextStyle.Default,
  onTextLayout: ((TextLayoutResult) -> Unit)? = null,
  overflow: TextOverflow = TextOverflow.Clip,
  softWrap: Boolean = true,
  maxLines: Int = Int.MAX_VALUE,
  minLines: Int = 1,
  color: ColorProducer? = null
)

Heads up... You’re accessing parts of this content for free, with some sections shown as zbmavrqij text.

Heads up... You’re accessing parts of this content for free, with some sections shown as jggefknod text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Exploring Text in Compose

Before learning how to use the Text Composable, you’ll examine its signature and see how much it differs from BasicText.

@Composable
fun Text(
  text: String,
  modifier: Modifier = Modifier,
  color: Color = Color.Unspecified,
  fontSize: TextUnit = TextUnit.Unspecified,
  fontStyle: FontStyle? = null,
  fontWeight: FontWeight? = null,
  fontFamily: FontFamily? = null,
  letterSpacing: TextUnit = TextUnit.Unspecified,
  textDecoration: TextDecoration? = null,
  textAlign: TextAlign? = null,
  lineHeight: TextUnit = TextUnit.Unspecified,
  overflow: TextOverflow = TextOverflow.Clip,
  softWrap: Boolean = true,
  maxLines: Int = Int.MAX_VALUE,
  minLines: Int = 1,
  onTextLayout: ((TextLayoutResult) -> Unit)? = null,
  style: TextStyle = LocalTextStyle.current
)

Using Text

The simplest way to display text in compose is by using the Text composable and passing a string as a parameter.

@Composable
fun HelloCompose() {
  Text("Hello Compose")
}

Heads up... You’re accessing parts of this content for free, with some sections shown as gwgerlqud text.

Heads up... You’re accessing parts of this content for free, with some sections shown as czkurgpah text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now
@Composable
fun HelloCompose() {
  Text(stringResource(R.string.hello_compose))
}
@Composable
fun StyledText() {
  val annotatedString = buildAnnotatedString {
    append("This is ")
    withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
      append("bold text")
    }
    append(" and this is not.")
  }

  Text(text = annotatedString)
}

Styling Text

Some common options to style your text would be to change the color, font size, and font weight.

@Composable
fun RedBoldBigText() {
  Text(
    text = "Hello World",
    color = Color.Red,
    fontSize = 30.sp,
    fontWeight = FontWeight.Bold
  )
}

Skewing Your Text

To skew your text, you can use the style property along with a textGeometricTransform as shown below.

@Composable
fun SlantedText() {
  Text(
    modifier = Modifier.width(150.dp),
    textAlign = TextAlign.Center,
    text = "Slanted",
    color = Color.Blue,
    fontSize = 30.sp,
    style = TextStyle(
      textGeometricTransform = TextGeometricTransform(
        scaleX = 0.5f,
        skewX = 1.3f
      )
    ),
    fontWeight = FontWeight.Bold
  )
}

Heads up... You’re accessing parts of this content for free, with some sections shown as mvhaggnug text.

Heads up... You’re accessing parts of this content for free, with some sections shown as jtduslfil text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Adding Shadow to Your Text

The style parameter of the text composable lets you configure multiple parameters, such as shadow.

@Composable
fun ShadowText() {
  val offset = Offset(5.0f, 10.0f)
  Text(
    text = "I got shadows!",
    style = TextStyle(
      fontSize = 24.sp,
      shadow = Shadow(
        color = Color.Gray, offset = offset, blurRadius = 3f
      )
    )
  )
}

Using Gradient as Text Color

Using the style parameter, you can also opt for using a gradient as the text color. Here’s what using a gradient as the text color looks like:

@Composable
fun GradientText() {
  val gradientColors = listOf(Color.Cyan, Color.Magenta, Color.Red)

  Text(
    text = "Here's a text with a gradient color!",
    style = TextStyle(
      brush = Brush.linearGradient(
        colors = gradientColors
      )
    )
  )
}

Styling Paragraphs

Now that you’ve covered how to style individual blocks of text, it’s time to look at how to style paragraphs.

@Composable
fun ParagraphStylingExample() {
  Text(
    buildAnnotatedString {
      withStyle(style = ParagraphStyle(lineHeight = 30.sp)) {
        withStyle(
          style = SpanStyle(
            color = Color.Blue, shadow = Shadow(
              color = Color.Gray,
              offset = Offset(5.0f, 10.0f),
              blurRadius = 3f
            )
          )
        ) {
          append(
            "This paragraph has a shadow under it. Looks funky\n"
          )
        }
        withStyle(
          style = SpanStyle(
            fontWeight = FontWeight.Bold, color = Color.Red
          )
        ) {
          append("This paragraph is just bold.\n")
        }
        append("Finally here is an unstyled paragraph")
      }
    }
  )
}

Heads up... You’re accessing parts of this content for free, with some sections shown as fbsossduk text.

Heads up... You’re accessing parts of this content for free, with some sections shown as pgjizvzil text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

See forum comments
Download course materials from Github
Previous: Introduction Next: Using Text Composable in App