Hello I'm starting with Compose and want to replicate Google Home's full screen clock screensaver c...

# compose

[timrijckaert]

Hello

I'm starting with Compose and want to replicate Google Home's full screen clock screensaver called Eclipse - Dark
https://i2.wp.com/9to5google.com/wp-content/uploads/sites/4/2019/01/lenovo_smart_clock_11.jpg?w=2000&quality=82&strip=all&ssl=1

However I'm completely stuck which composable to use.
I started with a Row with some weighted `Text`'s inside, however how can I make the Row clip the Text?
Do I need a fixed width - height for the Row and calculate the TextStyle fontSize manually or is there a better alternative?

@Composable
fun Eclipse() {
    Row(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .width(IntrinsicSize.Min)
            .background(Color.Black)
    ) {
        EclipseIntTile(0, modifier = Modifier.weight(1F))
        EclipseIntTile(4, modifier = Modifier.weight(1F))
        EclipseIntTile(5, modifier = Modifier.weight(1F))
        EclipseIntTile(2, modifier = Modifier.weight(1F))
    }
}

@Composable
fun EclipseIntTile(i: Int, modifier: Modifier = Modifier) {
    Text("$i", modifier = modifier, style = TextStyle(fontSize = 140.sp, color = Color.White))
}

Any pointers?

Thanks

[timrijckaert]

[Jelle Fresen [G]]

Use Modifier.clipToBounds() and TextAlign.Center

[Jelle Fresen [G]]

Any you can drop the height and width modifiers

[Jelle Fresen [G]]

@Composable
fun ClippedTextDemo() {
    Row {
        val modifier = Modifier.weight(1f).clipToBounds()
        val textStyle = LocalTextStyle.current.copy(
            fontSize = 240.sp,
            textAlign = TextAlign.Center
        )
        Text("0", modifier, style = textStyle)
        Text("4", modifier, style = textStyle)
        Text("5", modifier, style = textStyle)
        Text("2", modifier, style = textStyle)
    }
}

[Jelle Fresen [G]]

[timrijckaert]

Just saw this thanks!