How to place items in row and one each above like position absolute with JetpackCompose?

Question

I need to make layout that looks like this:

So I need to position two avatars in row while first avatar is going over second one. Also, icon for back is positioned on top of first avatar. I need basically something like position absolute but can not find how to do this with Jetpack compose.

Answer 1

You can use Box and zIndex to reach this result,

try this code you will get a result like that

Row(
    verticalAlignment = Alignment.CenterVertically,
    modifier = Modifier
        .background(Color.Yellow)
        .padding(20.dp)
) {
    Box {
        Box(
            contentAlignment = Alignment.TopStart,
            modifier = Modifier
                .height(30.dp)
                .zIndex(3f)
        ) {
            Icon(
                imageVector = Icons.Rounded.ArrowBack,
                contentDescription = "ArrowBack",
                modifier = Modifier
                    .size(20.dp)
                    .clip(RoundedCornerShape(20.dp))
                    .background(Color.Gray)
                    .zIndex(2f)
                    .border(1.dp, Color.White, RoundedCornerShape(20.dp))
                    .padding(3.dp)
            )
        }

        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier
                .padding(start = 10.dp)
                .size(30.dp)
                .clip(RoundedCornerShape(20.dp))
                .background(Color.Gray)
                .zIndex(2f)
                .border(1.dp, Color.White, RoundedCornerShape(20.dp))
                .padding(6.dp)
        ) {
            Icon(
                imageVector = Icons.Rounded.Person,
                contentDescription = "Person",
                modifier = Modifier
                    .size(30.dp)
            )
        }
        
        Box(
            modifier = Modifier
                .padding(start = 30.dp)
                .size(30.dp)
                .clip(RoundedCornerShape(20.dp))
                .background(Color.Gray)
                .zIndex(1f)
                .border(1.dp, Color.White, RoundedCornerShape(20.dp))
                .padding(6.dp)
        ) {
            Icon(
                imageVector = Icons.Rounded.Person,
                contentDescription = "Person",
                modifier = Modifier
                    .size(30.dp)
            )
        }
    }



    Spacer(modifier = Modifier.width(6.dp))
    Text(text = "17 other answers")
}