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

modifierThe modifier to be applied to the component.
curvedModifierThe CurvedModifier used to restrict the arc in which TimeText is drawn.
maxSweepAngleThe default maximum sweep angle in degrees.
backgroundColorThe background color of the arc drawn behind the TimeText.
timeSourceTimeSource which retrieves the current time and formats it.
contentPaddingThe spacing values between the container and the content.
contentThe 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)
    }
}