Thread
#compose
    d

    dimsuz

    1 year ago
    I have a
    Button { 
     Text(...)
     Icon() // 24x24dp
    }
    Altough button content is a
    RowScope
    with
    verticalArrangement = CenterVertical
    ,
    Text
    seems to not be vertically centered, you can see it's shifted down compared to Icon. Why is that and how can I fix this?
    Chris Sinco [G]

    Chris Sinco [G]

    1 year ago
    That shouldn’t be happening. Can you paste your full code snippet here?
    I tried to repro in beta07 but could not
    Code
    Button(
        onClick = { },
        modifier = Modifier
            .height(72.dp)
            .fillMaxWidth(),
        shape = MaterialTheme.shapes.medium
    ) {
        Text("Log in".toUpperCase())
        Icon(
            imageVector = Icons.Default.Face,
            contentDescription = null
        )
    }
    For a second I thought it might be a bug with the locale, but doesn’t seem to be
    d

    dimsuz

    1 year ago
    @Chris Sinco [G] took me a while, but it seems I've uncovered some text rendering related bug in Compose. The key is to have some multiple lines spanning button and an external Roboto.ttf font (from Google fonts). Here's the code
    private val Roboto = FontFamily(
      Font(R.font.roboto_medium, FontWeight.Medium),
    )
    
    @Composable
    fun CustomButton(
      text: String,
    ) {
      androidx.compose.material.Button(
        onClick = { },
        modifier = Modifier.heightIn(min = 56.dp).fillMaxWidth(),
        shape = MaterialTheme.shapes.medium,
      ) {
        Text(
          text = text,
          textAlign = TextAlign.Center,
          style = TextStyle(
            fontFamily = Roboto,
            fontWeight = FontWeight.Medium,
            fontSize = 16.sp,
          )
        )
        Icon(
          Icons.Filled.Face,
          contentDescription = null
        )
      }
    }
    
    @Preview(showBackground = true, widthDp = 360)
    @Composable
    fun StoryBookButtons1() {
      Column(
        horizontalAlignment = Alignment.CenterHorizontally
      ) {
        CustomButton(
          text = "A very very very long button not fitting one one line",
        )
        CustomButton(
          text = "Continue",
        )
      }
    }
    here's the result
    (updated code snippet, added
    val Roboto
    )
    Here's the ttf in question
    If you remove the first button,
    Continue
    becomes v-centered again. If you use another font (from MaterialTheme), bug is not reproducable either
    Note that I use Studio preview, didn't check on the real device yet. Can it be a Studio rendering bug?
    Chris Sinco [G]

    Chris Sinco [G]

    1 year ago
    Interesting - yes please verify on device in case it’s just Preview
    d

    dimsuz

    1 year ago
    Chris Sinco [G]

    Chris Sinco [G]

    1 year ago
    Thanks! Triaged