I have comment box and need to put icon on specific position ( bottom right ). I need to make something like position absolute where my icon button need to be bottom right inside comment box. Here is image what I am trying to achieve. Any help or idea?

CodePudding user response：

You can do it by using Modifier.offset{} after putting your Icon inside a Box with Modifier.align(Alignment.BottomEnd)

@Composable
private fun Test() {
    Column(modifier = Modifier.padding(10.dp)) {
        Box(
            modifier = Modifier
                .width(200.dp)
                .background(Color.LightGray.copy(alpha = .5f), RoundedCornerShape(8.dp))
                .padding(4.dp)
        ) {
            Column(
                modifier = Modifier.fillMaxWidth()

            ) {
                Text("Title", fontSize = 20.sp)
                Text("Comment")
            }

            val offsetInPx = with(LocalDensity.current) {
                16.dp.roundToPx()
            }

            Icon(
                imageVector = Icons.Default.Settings,
                contentDescription = null,
                modifier = Modifier
                    .offset {
                        IntOffset(-offsetInPx, offsetInPx)
                    }
                    .shadow(2.dp, RoundedCornerShape(40))
                    .background(Color.White)
                    .padding(horizontal = 10.dp, vertical = 4.dp)
                    .size(30.dp)
                    .align(Alignment.BottomEnd),
                tint = Color.LightGray

            )
        }
        Spacer(modifier = Modifier.height(4.dp))
        Text("Reply", color = Color.Blue)
    }
}