curvedText

Function

Android

public fun CurvedScope.curvedText(
    text: String,
    modifier: CurvedModifier = CurvedModifier,
    maxSweepAngle: Float = CurvedTextDefaults.ScrollableContentMaxSweepAngle,
    background: Color = Color.Unspecified,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontFamily: FontFamily? = null,
    fontWeight: FontWeight? = null,
    fontStyle: FontStyle? = null,
    fontSynthesis: FontSynthesis? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    letterSpacingCounterClockwise: TextUnit = TextUnit.Unspecified,
    style: CurvedTextStyle? = null,
    angularDirection: CurvedDirection.Angular? = null,
    overflow: TextOverflow = TextOverflow.Clip,
): Unit

CurvedText is a component allowing developers to easily write curved text following the curvature a circle (usually at the edge of a circular screen). CurvedText can be only created within the CurvedLayout to ensure the best experience, like being able to specify to positioning.

Note that Wear Material UX guidance recommends that curvedText should not exceed the sweep angle CurvedTextDefaults.ScrollableContentMaxSweepAngle on screens with scrollable content such as lists. This limit is enforced by default. For screens without scrollable content, CurvedTextDefaults.StaticContentMaxSweepAngle may be used instead.

The default style uses the LocalTextStyle provided by the MaterialTheme / components, converting it to a CurvedTextStyle. Note that not all parameters are used by curvedText.

If you are setting your own style, you may want to consider first retrieving LocalTextStyle, and using TextStyle.copy to keep any theme defined attributes, only modifying the specific attributes you want to override, then convert to CurvedTextStyle

For ease of use, commonly used parameters from CurvedTextStyle are also present here. The order of precedence is as follows:

If a parameter is explicitly set here (i.e, it is not null or TextUnit.Unspecified), then this parameter will always be used.
If a parameter is not set, (null or TextUnit.Unspecified), then the corresponding value from style will be used instead.

Additionally, for color, if color is not set, and style does not have a color, then LocalContentColor will be used.

For samples using curved text in a CurvedLayout see:

For more information, see the Curved Text(https://developer.android.com/training/wearables/compose/curved-text) guide.

Parameters


text	The text to display
modifier	The `CurvedModifier` to apply to this curved text.
maxSweepAngle	The default maximum sweep angle in degrees. For screens without scrollable content, `CurvedTextDefaults.StaticContentMaxSweepAngle` may be used instead.
background	The background color for the text.
color	`Color` to apply to the text. If `Color.Unspecified`, and `style` has no color set, this will be `LocalContentColor`.
fontSize	The size of glyphs to use when painting the text. See `TextStyle.fontSize`.
fontFamily	The font family to be used when rendering the text.
fontWeight	The thickness of the glyphs, in a range of `1, 1000`. see `FontWeight`
fontStyle	The typeface variant to use when drawing the letters (e.g. italic).
fontSynthesis	Whether to synthesize font weight and/or style when the requested weight or style cannot be found in the provided font family.
letterSpacing	The amount of space (in em or sp) to add between each letter, when text is going clockwise.
letterSpacingCounterClockwise	The amount of space (in em or sp) to add between each letter, when text is going counterClockwise. Note that this usually needs to be bigger than `letterSpacing` to account for the fact that going clockwise, text fans out from the baseline while going counter clockwise text fans in.
style	Specifies the style to use.
angularDirection	Specify if the text is laid out clockwise or anti-clockwise, and if those needs to be reversed in a Rtl layout. If not specified, it will be inherited from the enclosing `curvedRow` or `CurvedLayout` See `CurvedDirection.Angular`.
overflow	How visual overflow should be handled. Note that this takes into account only explicit size curved modifiers in this element, to size this element matching the parent's, add a CurvedModifier.weight here.

Code Examples

CurvedTextBottom

@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,
            )
        }
    }
}

CurvedTextTop

@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")
        }
    }
}