@Composable fun BottomStrip() { Row(modifier =...

# compose

[B Chandrasaimohan]

@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

[Chrimaeon]

Please don’t cross post in several channels!

[Dave Scheck]

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

[Chrimaeon]

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

[Dave Scheck]

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

[Dave Scheck]

Glad we came to the same solution

[Chrimaeon]

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

[Stylianos Gakis]

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