# TimeText

## Functions summary

|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimeText.composable#TimeText(androidx.compose.ui.Modifier,androidx.wear.compose.foundation.CurvedModifier,kotlin.Float,androidx.compose.ui.graphics.Color,androidx.wear.compose.material3.TimeSource,androidx.compose.foundation.layout.PaddingValues,kotlin.Function2)( modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, curvedModifier: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/CurvedModifier, maxSweepAngle: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, backgroundColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, timeSource: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimeSource, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, content: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/CurvedScope.(https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Layout to show the current time and a label, they will be drawn in a curve, following the top edge of the screen. |

## Functions

### TimeText

Artifact: [androidx.wear.compose:compose-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material3/TimeText.kt+function:TimeText)

```
@Composable
fun TimeText(
    modifier: Modifier = Modifier,
    curvedModifier: CurvedModifier = CurvedModifier,
    maxSweepAngle: Float = TimeTextDefaults.MaxSweepAngle,
    backgroundColor: Color = TimeTextDefaults.backgroundColor(),
    timeSource: TimeSource = LocalTimeSource.current,
    contentPadding: PaddingValues = TimeTextDefaults.ContentPadding,
    content: CurvedScope.(String) -> Unit = { time -> timeTextCurvedText(time) }
): Unit
```

Layout to show the current time and a label, they will be drawn in a curve, following the top edge of the screen.

Note that Wear Material UX guidance recommends that time text should not be larger than `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimeTextDefaults#MaxSweepAngle()` of the screen edge, which is enforced by default. It is recommended that additional content, if any, is limited to short status messages before the time using the MaterialTheme.colorScheme.primary color.

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

A simple `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimeText.composable#TimeText(androidx.compose.ui.Modifier,androidx.wear.compose.foundation.CurvedModifier,kotlin.Float,androidx.compose.ui.graphics.Color,androidx.wear.compose.material3.TimeSource,androidx.compose.foundation.layout.PaddingValues,kotlin.Function2)` which shows the current time:

```kotlin
import androidx.wear.compose.material3.TimeText

// TimeText displays the current time by default.
TimeText()
```

![TimeTextClockOnly Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_TimeTextClockOnly_CompositeImage.png)

A `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimeText.composable#TimeText(androidx.compose.ui.Modifier,androidx.wear.compose.foundation.CurvedModifier,kotlin.Float,androidx.compose.ui.graphics.Color,androidx.wear.compose.material3.TimeSource,androidx.compose.foundation.layout.PaddingValues,kotlin.Function2)` with a short app status message shown:

```kotlin
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.TimeText
import androidx.wear.compose.material3.TimeTextDefaults
import androidx.wear.compose.material3.timeTextCurvedText
import androidx.wear.compose.material3.timeTextSeparator

val style = TimeTextDefaults.timeTextStyle()
val primaryStyle = TimeTextDefaults.timeTextStyle(color = MaterialTheme.colorScheme.primary)
TimeText { time ->
    timeTextCurvedText("ETA 12:48", style = primaryStyle)
    timeTextSeparator(style)
    timeTextCurvedText(time)
}
```

![TimeTextWithStatus Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_TimeTextWithStatus_CompositeImage.png)

A `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimeText.composable#TimeText(androidx.compose.ui.Modifier,androidx.wear.compose.foundation.CurvedModifier,kotlin.Float,androidx.compose.ui.graphics.Color,androidx.wear.compose.material3.TimeSource,androidx.compose.foundation.layout.PaddingValues,kotlin.Function2)` with a long status message, that needs ellipsizing:

```kotlin
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.foundation.CurvedModifier
import androidx.wear.compose.foundation.weight
import androidx.wear.compose.material3.TimeText
import androidx.wear.compose.material3.TimeTextDefaults
import androidx.wear.compose.material3.curvedText
import androidx.wear.compose.material3.timeTextCurvedText
import androidx.wear.compose.material3.timeTextSeparator

val style = TimeTextDefaults.timeTextStyle()
TimeText { time ->
    curvedText(
        "Long status that should be ellipsized.",
        CurvedModifier.weight(1f),
        overflow = TextOverflow.Ellipsis,
    )
    timeTextSeparator(style)
    timeTextCurvedText(time)
}
```

![TimeTextWithStatusEllipsized Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_TimeTextWithStatusEllipsized_CompositeImage.png)

| Parameters |
|---|---|
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | The modifier to be applied to the component. |
| `curvedModifier: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/CurvedModifier = CurvedModifier` | The `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/CurvedModifier` used to restrict the arc in which `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimeText.composable#TimeText(androidx.compose.ui.Modifier,androidx.wear.compose.foundation.CurvedModifier,kotlin.Float,androidx.compose.ui.graphics.Color,androidx.wear.compose.material3.TimeSource,androidx.compose.foundation.layout.PaddingValues,kotlin.Function2)` is drawn. |
| `maxSweepAngle: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = TimeTextDefaults.MaxSweepAngle` | The default maximum sweep angle in degrees. |
| `backgroundColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = TimeTextDefaults.backgroundColor()` | The background color of the arc drawn behind the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimeText.composable#TimeText(androidx.compose.ui.Modifier,androidx.wear.compose.foundation.CurvedModifier,kotlin.Float,androidx.compose.ui.graphics.Color,androidx.wear.compose.material3.TimeSource,androidx.compose.foundation.layout.PaddingValues,kotlin.Function2)`. |
| `timeSource: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimeSource = LocalTimeSource.current` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimeSource` which retrieves the current time and formats it. Defaults to the current `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#LocalTimeSource()`. |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = TimeTextDefaults.ContentPadding` | The spacing values between the container and the content. |
| `content: https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/CurvedScope.(https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = { time -> timeTextCurvedText(time) }` | The content of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/TimeText.composable#TimeText(androidx.compose.ui.Modifier,androidx.wear.compose.foundation.CurvedModifier,kotlin.Float,androidx.compose.ui.graphics.Color,androidx.wear.compose.material3.TimeSource,androidx.compose.foundation.layout.PaddingValues,kotlin.Function2)` - displays the current time by default. This lambda receives the current time as a String and should display it using curvedText. Note that if long curved text is included here, it should specify `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/package-summary#(androidx.wear.compose.foundation.CurvedModifier).weight(kotlin.Float)` on it so that the space available is suitably allocated. |