TimeText

Component in Wear Material 3 Compose

Layout to show the current time and a label at the top of the screen. If device has a round screen, then the time will be curved along the top edge of the screen, if rectangular - then the text and the time will be straight.

Note that Wear Material UX guidance recommends that time text should not be larger than [TimeTextDefaults.MaxSweepAngle] of the screen edge on round devices, which is enforced by default. It is recommended that additional content, if any, is limited to short status messages before the [TimeTextScope.time] using the MaterialTheme.colorScheme.primary color.

For more information, see the Curved Text guide.

Different components of [TimeText] can be added through methods of [TimeTextScope].

Last updated: 2024-10-14 12:17

Installation

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

Overloads

@Composable
fun TimeText(
    modifier: Modifier = Modifier,
    curvedModifier: CurvedModifier = CurvedModifier,
    maxSweepAngle: Float = TimeTextDefaults.MaxSweepAngle,
    timeSource: TimeSource = TimeTextDefaults.rememberTimeSource(timeFormat()),
    timeTextStyle: TextStyle = TimeTextDefaults.timeTextStyle(),
    contentColor: Color = MaterialTheme.colorScheme.primary,
    contentPadding: PaddingValues = TimeTextDefaults.ContentPadding,
    content: TimeTextScope.() -> Unit
)

Parameters

name	description
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.
timeSource	[TimeSource] which retrieves the current time and formats it.
timeTextStyle	[TextStyle] for the time text itself.
contentColor	[Color] of content of displayed through [TimeTextScope.text] and [TimeTextScope.composable].
contentPadding	The spacing values between the container and the content.
content	The content of the [TimeText].

Code Examples

TimeTextClockOnly

@Composable
fun TimeTextClockOnly() {
    TimeText { time() }
}

TimeTextWithStatus

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