📏 Adopt all the values to dp instead of px

[moazelsawaf]

Hello Dear,

I would like to suggest you adopting all the values to density-independent pixels (dp) instead of pixels (px) as on bubble, closeBubble, and closablePerimeter to allow more responsive and convenient experience.

For example, the onMove(x ,y), onMove(x ,y), and onMove(x ,y) callbacks are given they x and y values in px so it would be difficult to use these values while considering dp as convention.

Also while defining the startLocation of the bubble, it is defined with pixel (px) value instead of dp, so it would be different across different devices due to different pixel densities.

For me, as an autor of dash_bubble Flutter plugin, I have added two helper methods to do that conversion for me, so that the end developer is just using and excepting dp values as per the Flutter convention.

Here are the two methods I have added:

/** Convert pixels (px) to density-independent pixels (dp).
 * @param px The pixel value to convert.
 * @return The converted dp value.
 */
fun pxToDp(px: Double): Double {
    return px / Resources.getSystem().displayMetrics.density
}

/** Convert density-independent pixels (dp) to pixels (px).
 * @param dp The dp value to convert.
 * @return The converted px value.
 */
fun dpToPx(dp: Double): Double {
    return dp * Resources.getSystem().displayMetrics.density
}

I hope you like the suggestion and I am waiting for your feedback 🙏🏻

Thanks 🙏🏻❤

[TorryDo]

Hi @moazelsawaf,

AFAIK, using dp values for positioning the floating view on the screen is not necessary because its position is calculated in pixels and is not dependent on the device's screen density.

Using dp values for sizing the view is appropriate, as it helps to ensure that the view will be displayed consistently across devices with varying screen densities. Using dp for positioning the view would not offer any significant benefits and could potentially introduce compatibility issues.

If you have any articles or resources to share about the benefits of using dp values for positioning views, I would be happy to take a look and learn more.

Thank you for your suggestion!

[moazelsawaf]

I have designed an image that illustrates a good example that would clarify my point about the benefits of adopting dp values for all the measurements 📏

Here is a very minimal UI composed of an AppBar with a height of 56 dp and a bubble with a size of 60 dp, if I have developed this UI on an MDPI device and decided to position the bubble under the AppBar by some pixels and moved to devices with higher DPI, then I would find that the position has changed! The bubble gets higher once I increase the DPI! 💥

This is because the 100px in an example does not take the same space in all devices, in higher DPI devices it would take a smaller space, and in lower DPI devices, it would take a larger space, that's why we use dp instead of px, to multiply the px value with a factor to get the same size in all the different DPIs 📱

Because of that, I see the need of adopting dp values for all the measurements, because if you decided all the pixel values to be perfectly aligned and then moved to another device with different DPI, all the px values would badly surprise you! 😢

The same concept applies for all the px values, not just the startLocation values. ✅

Thanks 🙏🏻❤

[TorryDo]

that makes sense, I'll consider if it can be implemented in the next version.

Thank you!

[moazelsawaf]

Great ❤️
You're always welcome 🙏🏻❤️

[moazelsawaf]

I can see now the startLocation() is using dp values instead of px in v0.5.2 ❤

But what about the x and y values of the callbacks? would they remain in px or you are planning to convert them into dp?

[TorryDo]

Since the onTouch() method of the View is using px values, I think it's better (for now) to keep using them (I plan to accept View/Composable as a parameter in setupBubble() ).
Of course, supporting dp values is not difficult, but I need time to think about how to implement it properly so that people won't have to deal with deprecated methods over time. 😅

And yes, dp support for callbacks is on my plan.

Thank you! 💖

[moazelsawaf]

Great ❤
Thank you so much 🙏🏻❤