Create Composables with Jetpack Compose

Open the Starter project in the 04-use-text directory of the m3-cjp-materials repo in Android Studio Jellyfish or later.

Wait for the project to build. This is the same project you worked on in previous lessons. In this demo, you’ll work on styling the text and showing a repo link for each GitHub repo card.

Open MainActivity.kt. You’ll notice multiple tasks mentioned as TODOs. You’ll tackle each, one at a time.

First up, make the repo name semi-bold. Replace the Text composable displaying the repo name with the following code:

Text(
  text = repo.name,
  fontSize = 16.sp,
  fontWeight = FontWeight.SemiBold
)

Build and run the app. Now, the repo name should be bold and have a higher font size.

Next, update the font size for the repo description. Modify the Text composable as shown:

repo.description?.let {
  Text(
    text = it,
    fontSize = 14.sp
  )
}

Finally, show the link for the repo and decorate it with an underline. To do so, add the following snippet after the description clause:

Text(
  text = repo.htmlUrl,
  fontSize = 14.sp,
  fontWeight = FontWeight.Light,
  textDecoration = TextDecoration.Underline
)

Here, you’re using the light font weight and decorating the text with a text decoration of underline.

Build and run the app. You should see the repo link show up with an underline below it.

That concludes this demo. Continue with the lesson for a summary.