What's the equivalent of TextClock in Jetpack Compose?

Question

TextClock is a widget for Android XML layouts which keeps and displays time on it's own. You just have to add the format and timezone.

Right now I don't see an equivalent in Jetpack Compose. Should I implement it by my own with a Text composable and some time formatting libraries? Should I inflate a TextClock and make use of the backwards compatibility? Or is there a ready to use component?

Answer 1

I started with using the original TextView by adding it via the AndroidView composable. It does work but I would still appreciate an answer without "legacy" code.

@Composable
private fun TextClock(
    modifier: Modifier = Modifier,
    format12Hour: String? = null,
    format24Hour: String? = null, 
    timeZone: String? = null,
) {
    AndroidView(
        factory = { context ->
            TextClock(context).apply {
                format12Hour?.let { this.format12Hour = it }
                format24Hour?.let { this.format24Hour = it }
                timeZone?.let { this.timeZone = it }
            }
        },
        modifier = modifier
    )
}

Answer 2

Here is my solution, which made styling possible.

@Composable
fun ClockText() {
    val currentTimeMillis = remember {
        mutableStateOf(System.currentTimeMillis())
    }

    LaunchedEffect(key1 = currentTimeMillis) {
        while (true) {
            delay(250)
            currentTimeMillis.value = System.currentTimeMillis()
        }
    }

    Box() {
        Text(
            text = DateUtils.formatDateTime(LocalContext.current, currentTimeMillis.value, DateUtils.FORMAT_SHOW_TIME),
            modifier = Modifier.padding(8.dp, 8.dp),
            color = MaterialTheme.colors.onBackground,
            style = MaterialTheme.typography.subtitle2
        )
    }
}

https://gist.github.com/dino-su/c8edf1c206dd974b282326f3b9641ccc

Answer 3

TextClock class exteds TextView class and TextView class extends View class. However Jetpack Compose is not based on 'Views'. So I tried to find ways to use Views in Compose and I cound find this link.

https://developer.android.com/jetpack/compose/interop/interop-apis#views-in-compose

The link explains about AndroidView composable. And in the TextClock page in Android document I could read 'honors 24-hour format system setting' therefore it would be enough to check user's setting is based on 12 hour format or not. My sample code is as below and Merry Christmas!

@Composable
fun MyTextClock() {
    AndroidView(factory = { context ->
        TextClock(context).apply {
            format12Hour?.let {
                this.format12Hour = "a hh: mm: ss"
            }
            timeZone?.let { this.timeZone = it }
            textSize.let { this.textSize = 24f }
        }
    })
}

@Preview(showBackground = true)
@Composable
fun MyTextClockPreview() {
    MyTextClock()
}