Menu
Is there a way to write text on a custom path with jetpack compose right now?
Here is an example image of what I want to achieve:
589
First we read bitmap from resources. This bitmap is immutable, so we create mutable copy. Then we create Paint object and set them text size, color, shadow, etc. Now we are ready to draw!
To read value entered in TextField in Android Compose, declare a variable, and assign this variable the value in the TextField whenever there is a change in the value. The same process holds for reading value entered in OutlineTextField composable.
A LazyColumn is a vertically scrolling list that only composes and lays out the currently visible items. It's similar to a Recyclerview in the classic Android View system.
Type your text in the text box. Click Curved text on the left tools menu. Arc it as much as you want, or make circle text.
At the moment, you cannot draw text directly on the Jetpack Compose canvas. To do so, you have to access the native canvas from the Android framework to draw some text on it.
With Jetpack Compose, there is a Composable that is part of the UI component library called Canvas to unleash the power of drawing in your application. We are going to draw a smiley face with simple shapes (circle, arc and rectangles) to show its capabilities. The onDraw lambda on the Canvas give us access to the DrawScope.
To do so, you have to access the native canvas from the Android framework to draw some text on it. On the onDraw lambda of the Canvas component, you can call the function drawIntoCanvas to access the underlying Canvas with nativeCanvas (quite helpful if you can to reuse some draw logic you implemented in previous Android apps).
Sadly, though, there is no drawText (). That's too bad. But wait, Android's native canvas class ( android.graphics.Canvas) does have several drawText () versions, one of the simplest ones being drawText (String text, float x, float y, Paint paint). Let's see if we can utilize this.
We use nativeCanvas to draw a text using Path in Compose, like how we do normally in Custom Views.
Ex:
@Composable
fun ArcTextExample() {
val paint = Paint().asFrameworkPaint()
Canvas(modifier = Modifier.fillMaxSize()) {
paint.apply {
isAntiAlias = true
textSize = 24f
typeface = Typeface.create(Typeface.DEFAULT, Typeface.BOLD)
}
drawIntoCanvas {
val path = Path()
path.addArc(RectF(0f, 100f, 200f, 300f), 270f, 180f)
it.nativeCanvas.drawTextOnPath("Hello World Example", path, 0f, 0f, paint)
}
}
}
Note:
we should use android.graphics.Path
And the result will be like:
136
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
