CurvedText is a component allowing developers to easily write curved text following the curvature a circle (usually at the edge of a circular screen).
CurvedTextDemo
@Composable
fun CurvedTextDemo() {
CurvedLayout() {
curvedColumn(angularAlignment = CurvedAlignment.Angular.Center) {
curvedRow {
curvedText("Red", color = Color.Red)
curvedText(
"White On Green",
color = Color.White,
background = Color.Green,
modifier = CurvedModifier.padding(angular = 5.dp),
)
curvedText("Big", fontSize = 24.sp)
curvedText(
"Extra Bold",
fontWeight = FontWeight.ExtraBold,
modifier = CurvedModifier.padding(angular = 5.dp),
)
}
curvedRow {
curvedText("Default")
curvedText(
"Italic",
fontStyle = FontStyle.Italic,
modifier = CurvedModifier.padding(angular = 5.dp),
)
curvedText("Monospaced", fontFamily = FontFamily.Monospace)
}
}
}
}
CurvedTextProviderDemo
@Composable
fun CurvedTextProviderDemo() {
CompositionLocalProvider(
LocalContentColor provides Color.Cyan,
LocalContentAlpha provides 0.5f,
LocalTextStyle provides TextStyle(fontFamily = FontFamily.Serif),
) {
val greenStyle = LocalTextStyle.current.copy(color = Color.Green)
CurvedLayout {
curvedText("Serif Cyan 50%")
curvedText("Green", style = CurvedTextStyle(greenStyle))
}
}
ProvideTextStyle(
value =
TextStyle(color = Color.Green, background = Color.White, fontWeight = FontWeight.Bold)
) {
CurvedLayout(anchor = 90f) { curvedText("Green On White") }
}
}