Build apps faster with over 150+ styled components and screens! Check it out →

TimeText

Android

Component in Wear Material 3 Compose

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 [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 guide.

Last updated:

Installation

dependencies {
   implementation("androidx.wear.compose:compose-material3:1.0.0-alpha32")
}

Overloads

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

Parameters

namedescription
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.
timeSource[TimeSource] 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 [CurvedModifier.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 primaryStyle =
        TimeTextDefaults.timeTextStyle(color = MaterialTheme.colorScheme.primaryContainer)
    TimeText { time ->
        curvedText("ETA 12:48", style = primaryStyle)
        timeTextSeparator()
        curvedText(time)
    }
}

TimeTextWithStatusEllipsized

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