5

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?

enter image description here

Jalson1982
  • 287
  • 4
  • 14

1 Answers1

9

You can do it by using Modifier.offset{} and 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)
    }
}

enter image description here

Thracian
  • 43,021
  • 16
  • 133
  • 222
  • I think the key here is `offset` modifier should come before `size` or rather be the very first modifier. Also, you can simply put `.offset(16.dp, (-16).dp)`, no need to do dp to px conversion – Kshitij Patil Nov 04 '22 at 14:16
  • `I think the key here is offset modifier should come before size or rather be the very first modifier.` This is not true. If you put `Modifier.offset` after other Modifiers you simply don't move shadow, background and initial padding but only only the size and drawing of vector drawable. `no need to do dp to px conversion ` the reason for using `Modifier.offset{}` over `Modiifer.offset()` is it doesn't invoke composition phase on recompositions. Sure in this instance it's not required since fixed value is used but prefer it whenever something changes frequently – Thracian Nov 04 '22 at 14:33
  • https://developer.android.com/jetpack/compose/performance/bestpractices#defer-reads – Thracian Nov 04 '22 at 14:33
  • Order of modifiers matter the one one top effect the one below or the ones after that modifier for most of the modifiers. https://stackoverflow.com/a/74145347/5457853 – Thracian Nov 04 '22 at 14:35