---
title: "curvedText"
description: "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.

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 with an alpha of [LocalContentAlpha]- this allows this
[curvedText] or element containing this [curvedText] to adapt to different background colors and
still maintain contrast and accessibility.

For samples explicitly specifying style see:


For examples using CompositionLocal to specify the style, see:


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

<div class='type'>Function</div>


<a id='references'></a>
<div class='sourceset sourceset-android'>Android</div>


```kotlin
public fun CurvedScope.curvedText(
    text: String,
    modifier: CurvedModifier = CurvedModifier,
    background: Color = Color.Unspecified,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontFamily: FontFamily? = null,
    fontWeight: FontWeight? = null,
    fontStyle: FontStyle? = null,
    fontSynthesis: FontSynthesis? = null,
    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.

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 with an alpha of `LocalContentAlpha`- this allows this
`curvedText` or element containing this `curvedText` to adapt to different background colors and
still maintain contrast and accessibility.

For samples explicitly specifying style see:


For examples using CompositionLocal to specify the style, 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. |
| 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. |
| 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. |




<div class='sourceset sourceset-android'>Android</div>


> **Deprecated** This overload is provided for backwards compatibility with Compose for Wear OS 1.0. A newer overload is available with additional font parameters.

```kotlin
public fun CurvedScope.curvedText(
    text: String,
    modifier: CurvedModifier = CurvedModifier,
    background: Color = Color.Unspecified,
    color: Color = Color.Unspecified,
    fontSize: 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.

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 with an alpha of `LocalContentAlpha`- this allows this
`curvedText` or element containing this `curvedText` to adapt to different background colors and
still maintain contrast and accessibility.


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. |
| 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`. |
| 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
### CurvedTextDemo
```kotlin
@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
```kotlin
@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") }
    }
}
```