New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Wear Material 3 Compose

TimeText

Android

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 90 degrees 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.colors.primary color.

For more information, see the Curved Text guide.

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

Last updated:

Installation

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

Overloads

@Composable
fun TimeText(
    modifier: Modifier = Modifier,
    curvedModifier: CurvedModifier = CurvedModifier.sizeIn(maxSweepDegrees = 90f),
    timeSource: TimeSource = TimeTextDefaults.timeSource(timeFormat()),
    timeTextStyle: TextStyle = TimeTextDefaults.timeTextStyle(),
    contentPadding: PaddingValues = TimeTextDefaults.contentPadding(),
    content: TimeTextScope.() -> Unit
)

Parameters

namedescription
modifierThe modifier to be applied to the component.
curvedModifierThe [CurvedModifier] used to restrict the arc in which [TimeText] is drawn.
timeSource[TimeSource] which retrieves the current time and formats it.
timeTextStyle[TextStyle] for the time text itself.
contentPaddingThe spacing values between the container and the content.
contentThe content of the [TimeText].

Code Examples

TimeTextClockOnly

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

TimeTextWithStatus

@Composable
@Sampled
fun TimeTextWithStatus() {
    val leadingTextStyle = TimeTextDefaults.timeTextStyle(
        color = Color.Green
    )
    TimeText {
        text("ETA 12:48", leadingTextStyle)
        separator()
        time()
    }
}

TimeTextWithIcon

@Composable
@Sampled
fun TimeTextWithIcon() {
    TimeText {
        time()
        separator()
        composable {
            Icon(
                imageVector = Icons.Filled.Favorite,
                contentDescription = "Favorite",
                modifier = Modifier.size(13.dp)
            )
        }
    }
}