curvedText examples in Wear Material 3 Compose

CurvedText is a component allowing developers to easily write curved text following the curvature of a circle (usually at the edge of a circular screen).

CurvedTextTop

@Sampled
@Composable
fun CurvedTextTop() {
    val backgroundColor = MaterialTheme.colorScheme.onPrimary
    val customColor = MaterialTheme.colorScheme.tertiaryDim
    CurvedLayout {
        curvedRow(CurvedModifier.background(backgroundColor, Round)) {
            curvedText("Calling", color = customColor)
            curvedBox(CurvedModifier.angularSizeDp(5.dp)) {}
            curvedText("Camilia Garcia")
        }
    }
}

CurvedTextBottom

@Sampled
@Composable
fun CurvedTextBottom() {
    val backgroundColor = MaterialTheme.colorScheme.onPrimary
    CurvedLayout(anchor = 90f, angularDirection = CurvedDirection.Angular.Reversed) {
        curvedRow(CurvedModifier.background(backgroundColor, Round)) {
            curvedComposable {
                Icon(
                    Icons.Filled.Warning,
                    contentDescription = "Warning",
                    modifier = Modifier.size(ButtonDefaults.IconSize),
                )
            }
            curvedText(
                "Network lost",
                maxSweepAngle = CurvedTextDefaults.StaticContentMaxSweepAngle,
                overflow = TextOverflow.Ellipsis,
            )
        }
    }
}