My Goal
I have gotten a simple Photoshop File I want to recreate what I see there Pixel by Pixel. My Target Device will NEVER change the Display Resolution or anything else.
It should be pretty simple right? The values in Pixel are clear
- width = 111
- height = 66
- padding after divider = 15
- padding after "PM" = 15
- padding between "TIME" and "PM" = 8
- pixelSize for "TIME" = 24
- pixelSize for "PM" = 15
My Code:
Row(
modifier = Modifier
.width(PixelToDp(111))
.height(PixelToDp(66))
.fillMaxSize()
.background(colorResource(R.color.black)),
horizontalArrangement = Arrangement.Start,
verticalAlignment = Alignment.CenterVertically
) {
Image(
painter = painterResource(id = R.drawable.statusbar_splitline),
contentDescription = null,
modifier = Modifier.padding(end = PixelToDp(pixelSize = 15))
)
Row(
verticalAlignment = Alignment.CenterVertically
) {
BentleyText(
text = "12:34",
pixelSize = 24,
modifier = Modifier.padding(end = PixelToDp(pixelSize = 8))
)
BentleyText(
text = "PM", pixelSize = 15,
modifier = Modifier
.padding(end = PixelToDp(pixelSize = 15))
.width(IntrinsicSize.Min) //this is something im trying?
)
}
}
Where I convert Pixel to SP for Text related stuff
@Composable
fun BentleyText(
text: String,
modifier: Modifier = Modifier,
color: Color = colorResource(id = R.color.white),
pixelSize: Int = 14
) {
val pixelSizeInSp = with(LocalDensity.current) { pixelSize.toSp() }
Text(
text,
modifier = modifier,
fontFamily = Font(R.font.bentleyw1g_smcon_light_mib3).toFontFamily(),
fontStyle = Font(R.font.bentleyw1g_smcon_light_mib3).style,
fontWeight = Font(R.font.bentleyw1g_smcon_light_mib3).weight,
color = color,
fontSize = pixelSizeInSp
)
}
Where I convert Pixel to DP for everything else
@Composable
fun PixelToDp(pixelSize: Int): Dp {
return with(LocalDensity.current) { pixelSize.toDp() }
}
Problem
I try to use the exact same values as shown here but everything is way off. First the Font Size doesn't match my Photoshop file's fontSize. Second the gap after the padding is also way off. The only thing that seems to be correct is the Width and the Height.
The preview shows me this Lines(Guides)
Can anyone help me understand Jetpack Compose with this trivial task?
