Hi everyone. I want to create a UI for a screen wh...

# compose

[Naveen]

Hi everyone. I want to create a UI for a screen which needs to be pixel perfect for all the mobile devices using jetpack compose.
Question: Do I have to use different dimens.xml folder structure to achieve this or is there a better jetpack compose solution available? What are the available solutions other than multiple dimens.xml files ?

[Ian Lake]

There are over 5,000 Android devices, each with a different combination of screen size, density, and physical size. And that's not counting multi-window where your app could be literally any size. How exactly does your approach actually scale?

[Naveen]

What if I only want to target portrait mode in mobile phones excluding foldables. The app doesn't get used in landscape as well, just the portrait mode of mobile phones. Can i make perfect UI targeting just these specific screens?

[Ian Lake]

Oh, I wasn't even talking about different configurations and the vast majority of those 5,000 devices are mobile phones excluding foldables.

[Ian Lake]

a perfect UI is one that adapts to the user's device. Maybe it would be better to explain what requirements you have that led you to thinking about a "pixel perfect UI"

[Mohit]

@Naveen I got what you are asking for. Jetpack compose doesn't use dimens.xml but dp. You will need to create your own measuring unit which extends dp to adjust according to different screen config. Let me know if you need any help with it

[Naveen]

@Ian Lake I understand that adaptability is generally preferred. In my case, I'm working on an app where precise visual alignment and sizing are crucial to the user experience and brand identity. For example, we have specific requirements for [describe a particular UI element or layout that needs precise positioning].
While I recognize the diversity of Android devices, our target audience primarily uses a narrow range of popular smartphone models in portrait mode. We want to ensure a consistent, high-quality visual experience across these devices.
That said, I'm open to approaches that can achieve this precision while still maintaining some flexibility. Do you have any suggestions for balancing exact visual specifications with adaptability in Jetpack Compose? I'm particularly interested in techniques that don't rely solely on multiple dimens.xml files.

[Naveen]

@Mohit thanks for the reply. Do you know any github repo that I can check which follows similar solution which you've suggested or any article where I can read more about this solution?

[Ian Lake]

I think you'll need to be way more specific on what you are doing

[Mohit]

@Naveen I will add an article soon

[Naveen]

@Ian Lake Sorry for the confusion but let me try to explain it in depth:

So I just started working on an Android app which doesn’t have figma designs available but I’m trying to make every text and button visible equally on different screen sizes with different resolutions(different pixel densities). I am targeting mobile devices for now and that too in portrait mode only.

So for example if there is a button with height 32dp in a device of 160dpi, then to show this button in 240dpi device this height should be (32 * 1.5 = 48dp) and so on for other device densities. To achieve this in xml layouts we tend to create multiple dimens.xml folder for each pixel density group (e.g. mdpi/values/dimens.xml, hdpi/values/dimens.xml and so on).

My doubt:
Do we have to follow same solution for jetpack compose UI as well or there is a better way to make this button appear as of same height in different screen with their respective pixel densities? Also if there is any better way to handle this using constraintlayout or anything else will be of great help.

Please let me know if you have got my question otherwise i can go more in depth.

[Ian Lake]

You should have never, ever been declaring different sizes per density. That was always the wrong thing to do even in the XML days. That's what dp is doing for you - it is a scaling unit that means everything is the same physical size no matter the density of the display.

[Siyamed]

Add on top user's choice of display and font size

[Naveen]

@Ian Lake I have text “A” shown in the middle of the screen with the following code:

Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center
) {
    Text(text = "A", style = TextStyle(color = Color.Red, fontSize = 305.sp))
}

and running on 2 devices with 6inch screen but different resolutions:

Left: 1080x2160
Right: 720x1440

As you can see the text “A” does appear larger on the left one but I want to have this text to take equal amount of height as it takes on right device. How can i achieve this ?

[Ian Lake]

What do you want a 6" and 5" device side by side to look like? It sounds like what you're actually looking for is sizes relative to the total screen size (e.g., 60% of the screen width, etc.). That would be much more aligned with the general guidance

[Naveen]

Yes that’s what my question was. I kind of understood now. Thanks for guiding me @Ian Lake