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

textThe text to display
modifierThe CurvedModifier to apply to this curved text.
maxSweepAngleThe default maximum sweep angle in degrees. For screens without scrollable content, CurvedTextDefaults.StaticContentMaxSweepAngle may be used instead.
backgroundThe background color for the text.
colorColor to apply to the text. If Color.Unspecified, and style has no color set, this will be LocalContentColor.
fontSizeThe size of glyphs to use when painting the text. See TextStyle.fontSize.
fontFamilyThe font family to be used when rendering the text.
fontWeightThe thickness of the glyphs, in a range of 1, 1000. see FontWeight
fontStyleThe typeface variant to use when drawing the letters (e.g. italic).
fontSynthesisWhether to synthesize font weight and/or style when the requested weight or style cannot be found in the provided font family.
letterSpacingThe amount of space (in em or sp) to add between each letter, when text is going clockwise.
letterSpacingCounterClockwiseThe 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.
styleSpecifies the style to use.
angularDirectionSpecify 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.
overflowHow visual overflow should be handled.