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

dimsuz

05/27/2021, 5:24 PM
I have a
Copy code
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?
c

Chris Sinco [G]

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

dimsuz

05/27/2021, 7:00 PM
@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
Copy 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?
c

Chris Sinco [G]

05/27/2021, 8:01 PM
Interesting - yes please verify on device in case it’s just Preview
d

dimsuz

05/27/2021, 9:24 PM
c

Chris Sinco [G]

05/27/2021, 11:23 PM
Thanks! Triaged
2 Views