Icon Button Shrinks When placed inside another composable

Question

I'm trying to make a clickable Icon button in jetpack compose but when I place the Icon button inside a box composable it's too tiny it cannot be clearly seen but when I display it as an Icon it works at the correct size

My Inquiry is how I can display an Icon button without it shrinking inside a composable

here's the code that shrinks the Icon

Box(
    modifier = Modifier
       .width(45.dp)
       .height(45.dp)
       .padding(
           top = 0.dp,
           start = 1.dp
        )
       .border(1.dp, color = Color.Green)
    ) {
       IconButton(
           modifier = Modifier
               .size(45.dp)
               .padding(0.dp),
               onClick = {
                   //
               }
          ) {
              Icon(
                   painter = painterResource(id = MessageTopReaction),
                   contentDescription = null,
                   modifier = Modifier
                      .padding(15.dp),
                      tint = Color.Red
                   )
            }
         }

but this code makes the Icon appear with the right size but is not clickable

                        Box(
                            modifier = Modifier
                                .width(45.dp)
                                .height(45.dp)
                                .padding(
                                    top = 0.dp,
                                    start = 1.dp
                                )
                                .border(1.dp, color = Color.Green)
                        ) {
                            Icon(
                                    painter = painterResource(id = MessageTopReaction),
                                    contentDescription = null,
                                    modifier = Modifier
                                    .padding(15.dp),
                                    tint = Color.Red
                                )
                        }

Answer 1

The issue in your code is that the nested padding and size modifiers are causing the icon to shrink. By changing to fillMaxSize() we can ensure that components expand to fill their containers without impacting the clickable area.

The changes you can make are:

1. Replacing .size(45.dp) with fillMaxSize() on iconButton to make it fill the box.

   IconButton(
        modifier = Modifier
            .fillMaxSize() // Fill the Box instead of using size
            .padding(0.dp),
        onClick = {
            //
        }
    )
   

2.Change fillMaxSize() on icon aswell to make it fill to iconbutton

3.Adjust the icon's padding to (10.dp)

Icon(
            painter = painterResource(id = MessageTopReaction),
            contentDescription = null,
            modifier = Modifier
                .fillMaxSize() // Fill the IconButton
                .padding(10.dp), // Adjust padding as needed
            tint = Color.Red
        )