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.

CodePudding user response：

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")
}