IconButton's content are not centered in Jetpack Compose

Question

I am trying to build the following component.

Following is my code,

    @Composable
    fun View(modifier: Modifier = Modifier){

        Row(modifier = Modifier
          .fillMaxWidth()
          .padding(16.dp),
        horizontalArrangement = Arrangement.spacedBy(10.dp),
        verticalAlignment = Alignment.CenterVertically) {

        IconButton(onClick = { /*TODO*/ },
            modifier = Modifier
                .background(shape = roundShape, color = Color.Blue)
                .size(40.dp)) {
            Icon(
                painter = painterResource(id = R.drawable.ic_microphone_2),
                contentDescription = null,
                tint = Color.White
            )
        }

        BasicTextField(
            value = "",
            onValueChange = {  },
            modifier=Modifier
                .height(40.dp)
                .fillMaxWidth()
                .border(1.dp,Color.Gray,roundShape)
        )
    }

The content of the IconButton is no longer centered after switching the LayoutDirection to Rtl.

CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl) {
            View()
}

this is the result of my code.

Using `Icons.Filled.Mic` instead of `R.drawable.ic_microphone_2` do you have the same issue? — Gabriele Mariotti, Oct 12 '22 at 10:30
I've tried your code with Icons.Filled.Mic and I am not able to replicate your issue (both Rtl and Ltr). Which version of material compose are you using? — Gabriele Mariotti, Oct 12 '22 at 10:45

score 0 · Answer 1 · answered Oct 12 '22 at 11:14

@Composable
fun IconView(modifier: Modifier = Modifier) {

Row(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp),
    horizontalArrangement = Arrangement.spacedBy(10.dp),
    verticalAlignment = Alignment.CenterVertically
) {

    Box(modifier =  Modifier
        .background(shape = RoundedCornerShape(20.dp), color = Color.Blue)
        .size(50.dp).clickable {


        }
    ){
        Icon(
            modifier = Modifier.align(alignment = Center),
            painter = painterResource(id = android.R.drawable.ic_menu_call),
            contentDescription = null,
            tint = Color.White
        )
    }


    BasicTextField(
        value = "",
        onValueChange = { },
        modifier = Modifier
            .height(40.dp)
            .fillMaxWidth()
            .border(1.dp, Color.Gray, RoundedCornerShape(20.dp))
    )
  }

}

Don't use iconButton as parent use Box and align child Icon to center. I Hope it will help you. Cheers

The `IconButton` is a `Box` with `contentAlignment = Alignment.Center` — Gabriele Mariotti, Oct 12 '22 at 11:57
I used box with rtl and i got icon in center. i copied your code as it is just replaced icon button with box — Syed Ibrahim, Oct 12 '22 at 13:02
yes, this works but I want to solve the IconButton's issue and know why is this happening. — Maryam Memarzadeh, Oct 17 '22 at 05:36

IconButton's content are not centered in Jetpack Compose

1 Answers1