← Back to Wear Material
TimeText
Overview
Code Examples
Video
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
This composable supports additional composable views to the left and to the right of the clock: Start Content and End Content. startCurvedContent, endCurvedContent and textCurvedSeparator are used for Round screens. startLinearContent, endLinearContent and textLinearSeparator are used for Square screens. For proper support of Square and Round screens both Linear and Curved methods should be implemented.
Note that Wear Material UX guidance recommends that time text should not be larger than 90 degrees of the screen edge on round devices and prefers short status messages be shown in start content only using the MaterialTheme.colors.primary color for the status message.
For more information, see the Curved Text(https://developer.android.com/training/wearables/components/curved-text) guide.
A TimeText with a short app status message shown in the start content:
Overloads
TimeText
@Composable
public fun TimeText(
modifier: Modifier = Modifier,
timeSource: TimeSource = TimeTextDefaults.timeSource(timeFormat()),
timeTextStyle: TextStyle = TimeTextDefaults.timeTextStyle(),
contentPadding: PaddingValues = TimeTextDefaults.ContentPadding,
startLinearContent: (@Composable () -> Unit)? = null,
startCurvedContent: (CurvedScope.() -> Unit)? = null,
endLinearContent: (@Composable () -> Unit)? = null,
endCurvedContent: (CurvedScope.() -> Unit)? = null,
textLinearSeparator: @Composable () -> Unit = { TextSeparator(textStyle = timeTextStyle) },
textCurvedSeparator: CurvedScope.() -> Unit = {
CurvedTextSeparator(curvedTextStyle = CurvedTextStyle(timeTextStyle))
},
)
Parameters
Name | Description |
---|---|
modifier | Current modifier. |
timeSource | TimeSource which retrieves the current time and formats it. |
timeTextStyle | Optional textStyle for the time text itself |
contentPadding | The spacing values between the container and the content |
startLinearContent | a slot before the time which is used only on Square screens |
startCurvedContent | a slot before the time which is used only on Round screens |
endLinearContent | a slot after the time which is used only on Square screens |
endCurvedContent | a slot after the time which is used only on Round screens |
textLinearSeparator | a separator slot which is used only on Square screens |
textCurvedSeparator | a separator slot which is used only on Round screen |