Does anyone have Idea, how I can achieve such desi...

# compose

[Ankit Shah]

Does anyone have Idea, how I can achieve such design in jetpack compose?

[Matti MK]

Looks to me like `Image`s, with offset on the x axis and CircleShape clip plus a stroke

[Matti MK]

Absolute 🍝, so if you end up improving please do share

val icons = listOf(
    <http://Icons.Rounded.Menu|Icons.Rounded.Menu>,
    Icons.Rounded.Email,
    Icons.Rounded.ExitToApp,
    Icons.Rounded.Home
)

val colors = listOf(
    Color.Yellow,
    Color.Green,
    Color.Red,
    Color.Blue
)

@Composable
fun FacesScreen(faceCount: Int = 12) {
    val faceCircleSize = 80.dp
    Row(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Gray),
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically
    ) {

        Row {
            repeat(icons.count()) { idx ->
                Box(
                    modifier = Modifier.offset(idx.dp * (-20))
                ) {
                    Box(
                        contentAlignment = Alignment.Center,
                        modifier = Modifier
                            .border(2.dp, color = Color.White, shape = CircleShape)
                            .clip(CircleShape)
                            .size(faceCircleSize)
                            .background(colors[idx])
                    ) {
                        Icon(
                            icons[idx],
                            contentDescription = "Localized description",
                            tint = Color.White,
                            modifier = Modifier.fillMaxSize().padding(12.dp)
                        )
                        if (idx == icons.count() - 1) {
                            Box(
                                contentAlignment = Alignment.Center,
                                modifier = Modifier
                                    .fillMaxSize()
                                    .background(brush = Brush.linearGradient(colors),  shape = CircleShape, alpha = 0.9f)
                            ) {
                                Text(text = "+$faceCount", color = Color.White, fontSize = 30.sp)
                            }
                        }
                    }
                }
            }
        }
    }
}

[Shakil Karim]

https://kotlinlang.slack.com/archives/CJLTWPH7S/p1622137078087800?thread_ts=1622125126.047600&cid=CJLTWPH7S

[Matti MK]

Great, thanks 👍 many things there that I’ve never even seen before 😅

[Ankit Shah]

yeah thanks a lot everyone, that helps

[Stylianos Gakis]

This feels like the perfect candidate for a custom Layout composable. Should be fairly straightforward to do and gives you full control

[Matti MK]

I’ve heard that the custom layouts are straightforward.

If you end up going with that route, I’d be very keen on seeing how the result looks like 👍

[Matti MK]

As a question: would the custom layout handle offsetting it’s elements (here the images) or would it also handle creation of those round elements?

[Stylianos Gakis]

My first thought is that the items themselves would have the circle shape and the MaterialTheme.color.background/surface border modifier and all the layout would do is work as a custom row implementation pretty much

[Colton Idle]

I think @Leland Richardson [G] has an example like this that he does in one of his streams

[tad]

You can also use BlendMode to cut out those strokes