@Composable fun BottomStrip() { Row(modifier = Modifier .fillMaxWidth() .height(70.dp) .background(color = colorResource(id = R.color.cgux_background_grey)), horizontalArrangement = Arrangement.End, verticalAlignment = Alignment.CenterVertically) { Image( painter = painterResource(id = R.drawable.cgux_ic_keyboard_16), modifier = Modifier .width(36.dp) .height(36.dp) .border(BorderStroke(1.dp, colorResource(id = R.color.cgux_primary_500_base))) .padding(5.dp) .clickable {}, contentDescription = "Expandable Image", colorFilter = ColorFilter.tint( colorResource(id = R.color.cgux_primary_500_base)) ) } Hi all, I have a composable function as above . My idea is to align image to right of Row with some padding on all sides of Image. I also have to create border around image , which I did using border modifier. The problem I'm facing is when I set border to Image , the padding is lost which means I don't see padding for Image. Image touch right end of the screen. Is there a way we can have padding for border as well. #compose #android #kotlin }#compose #android #kotlin

Please don’t cross post in several channels!

If I'm understanding you right, it sounds like you want to have padding between the outside of your image border and the row. If you want that, put a padding modifier before your width and height modifiers. This will shift the layout prior to it being sized. Something like

Image(
    painter = painterResource(id = R.drawable.cgux_ic_keyboard_16),
    modifier = Modifier
        .padding(25.dp)
        .width(36.dp)
        .height(36.dp)
        .border(BorderStroke(1.dp, colorResource(id = R.color.cgux_primary_500_base)))
        .padding(5.dp)
        .clickable {},
    contentDescription = "Expandable Image",
    colorFilter = ColorFilter.tint( colorResource(id = R.color.cgux_primary_500_base))
)

It’s already solved over here https://kotlinlang.slack.com/archives/C0B8M7BUY/p1676030069537479

The way that I read that is

.padding(25.dp)   // Adjust where the layout is starting
.width(36.dp)     // Set the width of the layout
.height(36.dp)    // Set the height of the layout
.border(BorderStroke(1.dp, colorResource(id = R.color.cgux_primary_500_base))) // Draw the border around the shifted and sized area
.padding(5.dp)    // Add padding within the image

That’s why, @B Chandrasaimohan cross posting is not a good idea. Answers get lost somewhere.

There really should be a way for these to be deleted to avoid this problem. Does anyone hold that power?