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?
1 Answer
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)
}
}
-
I think the key here is
offset
modifier should come beforesize
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 Nov 4, 2022 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 putModifier.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 usingModifier.offset{}
overModiifer.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– ThracianNov 4, 2022 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. stackoverflow.com/a/74145347/5457853– ThracianNov 4, 2022 at 14:35