I've continued my journey with Compose and Canvas! After exploring drawing and animating shapes, I wanted to learn more about text. Bi-visibility Day was coming, so I drew a small animation to publish on Instagram. The final animation looks like this:
In this blog post, we will look at how to add text to Canvas and position and animate it. We're also utilizing custom Google Fonts in the drawing.
If you're interested in reading the first two posts, here are the links:
Before We Start
Before we start drawing, I want to say a few words about the design. It has the moon in the waning crescent phase, with a dashed line to complete it to the full moon shape. The text says, "Not a phase".
Now, if you're familiar with the discrimination and stereotypes bisexuals face, you probably already know what all of this means. But for those who are not, one of the stereotypes is that bisexuality is "just a phase on the way to being straight/gay".
But it's not - it's an (umbrella) term for people who feel attraction towards their own and other genders. And even if a bi person is in a monogamous relationship with a person from one gender, it doesn't make them straight/gay. They're still bi.
So yeah, we're here. We exist.
Now, let's get to the coding part.
Drawing the Text
Measuring
Drawing text on Canvas is a two-step process: First, measure the text and then draw it. To start with measuring, we'll need a TextMeasurer, and with Compose-code, we have this neat remember-function we can use:
val textMeasurer = rememberTextMeasurer()
For measuring, TextMeasurer has a function measure, which takes in the text as either AnnotatedString or String, and a bunch of other (mainly) optional parameters that affect the size of the text. Things like density, layoutDirection, style, fontFamilyResolver, and others.
We will divide the text into two strings, as we want to animate and position them a bit differently. As both of our texts are just simple strings with one style, we can use the String-version for both. The first version of the "Not"-text looks like this:
val notText =
textMeasurer.measure(
text = "Not",
style =
MaterialTheme.typography.titleSmall.copy(
brush = Brush.linearGradient(
colors = Colors.biFlag
),
),
)
For the measure-function, we pass in the text and then styles. We want to use the theme typography here for straightforwardness, so we copy the small title styles and add a brush to have a linear gradient as the text color. Here, we're using the bi-flag colors pink, purple, and blue.
The second text is pretty similar:
val phaseText =
textMeasurer.measure(
text = "a phase",
style =
MaterialTheme.typography.titleLarge.copy(
brush =
Brush.linearGradient(
colors = Colors.biFlag,
),
fontSize = 30.sp,
),
)
For this text, we're utilizing the large title styles from the theme. In addition to gradient colors, we're setting the font size to 30 sp to make the text bigger.
Alright, now we have everything we need from the measuring step. Next up is drawing the texts on canvas.
Drawing
Compose Canvas has a method called drawText for drawing text. It takes in a TextLayoutResult, which is the type that measure function returns. In addition, it takes other parameters meant for styling and positioning the text on Canvas.
For the notText we defined in the previous subsection, the drawText would look like this:
drawText(
textLayoutResult = notText,
topLeft =
Offset(
size.width * 0.25f,
size.height * 0.6f,
),
)
We pass in the text layout result, and then we define the topLeft offset to position the text correctly.
The other text is a bit different. We want to position it relative to the notText, so we use notText for calculating the correct position:
drawText(
textLayoutResult = phaseText,
topLeft =
Offset(
x = size.width * 0.35f,
y = (size.height * 0.6f + notText.size.height * 0.7f),
),
)
So here, we define the y-offset to be the same as for the notText, and then we add 70% of the height of the notText. This could be the whole height, but I wanted to keep less break between the texts.
After these steps, our text looks like this:
. However, I accidentally found that Android Studio lets you add Google Fonts as XML files straightforwardly. Here's how it happens:
- Go to Resource Manager and select the "Font"-tab.
- Click the "+" button to add new resource.
- Select "More Fonts...".
- Find the Google Font you want to use, select weights, and press OK.
- Let Android Studio add everything needed, like the certification for fonts.
However, previews don't work correctly if you do it this way and don't import the ttf-files for fonts. So, if you rely on previews when developing, importing those files should resolve the issue.
After the font is available, the next thing to do is to use it in the styles. Here's the code for the font families we're going to use:
val PoppinsFontFamily =
FontFamily(
Font(R.font.poppins_bold, FontWeight.Bold),
)
val DamionFontFamily =
FontFamily(
Font(R.font.damion, FontWeight.Normal),
)
Then we add the font families to both texts - Damion for the "Not" text and Poppins to the "a phase"-text:
val notText =
textMeasurer.measure(
text = "Not",
style =
MaterialTheme.typography.titleSmall.copy(
...
fontFamily = DamionFontFamily
),
)
And
val phaseText =
textMeasurer.measure(
text = "a phase",
style =
MaterialTheme.typography.titleLarge.copy(
...
fontFamily = PoppinsFontFamily
),
)
After these changes, the drawing looks like this:
.
Wrapping Up
In this blog post, we've looked into adding text to Canvas, using custom Google Fonts, and animating colors. There was a lot to cover, but the end result is pretty nice!
I hope you've enjoyed this blog post and learned something. If you want to share your learnings, post on the social media of your choosing, or let me know in the comments if you're reading this on Dev or Medium.
SOCIAL SHARE CARD GENERATOR