https://kotlinlang.org logo
#compose
Title
# compose
b

B Chandrasaimohan

02/10/2023, 12:19 PM
@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
🧵 3
c

Chrimaeon

02/10/2023, 12:47 PM
Please don’t cross post in several channels!
d

Dave Scheck

02/10/2023, 2:34 PM
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
Copy code
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))
)
c

Chrimaeon

02/10/2023, 2:36 PM
d

Dave Scheck

02/10/2023, 2:37 PM
The way that I read that is
Copy code
.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
Glad we came to the same solution
c

Chrimaeon

02/10/2023, 2:38 PM
That’s why, @B Chandrasaimohan cross posting is not a good idea. Answers get lost somewhere.
s

Stylianos Gakis

02/10/2023, 2:43 PM
There really should be a way for these to be deleted to avoid this problem. Does anyone hold that power?
4 Views