How to convert Dp to pixels in Android Jetpack Compose?

Question

Most of Jetpack Compose API uses Dp as a dimensions unit, but sometimes a pixel value is required. How can I convert a dp value to px? Just for an example there's graphicsLayer() modifier that accepts translationX/Y arguments in pixels.

Answer 1

There're toPx() and roundToPx() methods defined by Density interface, you can use it like this:

import androidx.compose.ui.platform.LocalDensity

val pxValue = with(LocalDensity.current) { 16.dp.toPx() }

// or

val pxValue = LocalDensity.current.run { 16.dp.toPx() }

Such an expression might look confusing if you're new to Kotlin language so let's break it down and see how it works. toPx() is an extension function of Dp class, you can think of it as a Dp class method. But since toPx() is defined inside Density interface, you cannot use it unless you provide a density as a receiver. And at last you can get the current density from an CompositionLocal named LocalDensity.

Answer 2

@Valeriy's answer is definitely the correct way to do it but if you want it slightly less verbose or you have a lot of converting to do you can create extension functions:

@Composable
fun Dp.dpToPx() = with(LocalDensity.current) { this@dpToPx.toPx() }


@Composable
fun Int.pxToDp() = with(LocalDensity.current) { this@pxToDp.toDp() }

This lets you convert your dp straight to px and vice versa.

val dpValue = 16.dp
val pxConverted = dpValue.dpToPx()

val pxValue = 100
val dpConverted = pxValue.pxToDp()