TimeText

Composable Component

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

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

Parameters
modifier The modifier to be applied to the component.
curvedModifier The CurvedModifier used to restrict the arc in which TimeText is drawn.
maxSweepAngle The default maximum sweep angle in degrees.
backgroundColor The background color of the arc drawn behind the TimeText.
timeSource TimeSource which retrieves the current time and formats it.
contentPadding The spacing values between the container and the content.
content The content of the TimeText - 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 androidx.wear.compose.foundation.weight on it so that the space available is suitably allocated.

Code Examples

TimeTextClockOnly

@Composable
fun TimeTextClockOnly() {
    // TimeText displays the current time by default.
    TimeText()
}

TimeTextWithStatus

@Composable
fun TimeTextWithStatus() {
    val style = TimeTextDefaults.timeTextStyle()
    val primaryStyle =
        TimeTextDefaults.timeTextStyle(color = MaterialTheme.colorScheme.primaryContainer)
    TimeText { time ->
        timeTextCurvedText("ETA 12:48", style = primaryStyle)
        timeTextSeparator(style)
        timeTextCurvedText(time)
    }
}

TimeTextWithStatusEllipsized

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