Writing a customized format in Compose is a good way to fine-tune how your app’s UI seems, and it isn’t as daunting because it may appear. When you’ve written your customized logic, you must also write assessments for it! Nonetheless, in writing these assessments, you would possibly uncover some odd conduct of these assessments generally passing and generally failing, relying on the machine you’re operating on.
Let’s soar in to research a easy (however flaky!) take a look at for verifying the conduct of a Compose format:
The intent of this take a look at is to verify {that a} Column containing 6 Spacers which might be every 10dp excessive, finally ends up being 60dp excessive.
The Column’s coordinates are retrieved with Modifier.onPlaced to confirm placement, and the density of the machine’s display screen is equally retrieved from LocalDensity.present.
The ensuing coordinates are expressed in an integer variety of pixels, so we convert our anticipated 60dp to pixels, utilizing the density to spherical to an integer with roundToPx().
All of these steps appear innocuous sufficient, so let’s run the take a look at. Success… or perhaps failure. This take a look at could or could not cross, relying on the machine we’re operating the take a look at on. Let’s take a better take a look at what’s occurring.
Totally different units have completely different bodily screens (and a few may need multiple), which implies that they will have each completely different show bodily sizes and completely different show densities. On many units, customers may also change the efficient show density themselves utilizing a “Show measurement” possibility.
To make sure that the consumer interface has a constant obvious measurement throughout completely different units, you must specify dimensions of normal UI elements utilizing density-independent-pixels, or dp. For textual content, you must use scalable pixels, or sp, which takes into consideration the consumer’s most popular textual content measurement.
Jetpack Compose has a built-in Dp sort and associated strategies, which provides conversion strategies between dp and the underlying pixels, utilizing a Density object. This Density object (which might be retrieved with LocalDensity.present in a @Composable perform) is set by the machine the UI is operating on. Density.density is the float scaling issue utilized to dp values. A Density.density issue of 1.0 implies that 1dp shall be transformed to 1px, whereas a Density.density issue of two.0 implies that 1dp shall be transformed to 2px. For some practical values: the Pixel Watch has a default density issue of two.0, the Pixel 7 Professional has default issue of two.625, and a 4K Android TV has a default density issue of 4.0.
With this information in thoughts, let’s take a step-by-step take a look at how the format within the take a look at is computed.
The Column will lay out all of its kids one-by-one in a vertical column, and its measurement will due to this fact be the sum of its kids’s measurement.
Every of the Column’s 6 kids is similar: a Spacer that’s 10dp excessive. When the Spacer is measured, its specified measurement is transformed from dps to pixels, and its ensuing measurement shall be an integer variety of pixels.
This conversion is finished with the Density.density issue from dp to pixels, after which rounded to the closest integer utilizing roundToPx.
That is executed for every of the Spacers, and since each is equivalent, the ensuing peak of the Column in pixels shall be 6 occasions the peak of any specific Spacer.
Working by means of an instance:
If there’s a density issue of two.0, then every Spacer can have a peak of 20px, and the Column can have a peak of 120px. This matches our anticipated peak of roundToInt(60 * 2.0) = 120px.
This conversion was easy, and we didn’t need to spherical since our density was an integer. Nonetheless, the density might not be an integer! The default density for a tool may very well be a wide range of non-integer values, and this quantity can change for a similar machine primarily based on the consumer’s settings.
Let’s attempt once more, this time with a scaling issue of 1.75. Now every Spacer can have a peak of roundToInt(10 * 1.75) = 18px, so the Column can have a peak of 18 * 6 = 108px. That is completely different than our anticipated peak of roundToInt(60 * 1.75) = 105px, so our take a look at will fail. As a result of the peak of every Spacer was rounded as much as 18px, the Column finally ends up being 3px taller than we’d in any other case anticipate. Making an attempt to transform again to dp to check doesn’t assist right here both: 108px is simply over 61.7dp, so our Column finally ends up being about 1.7dp taller than we anticipated.
Whereas the take a look at above doesn’t appear to have any points at first look, it could cross or fail relying on the machine the take a look at is operating on. The typed Dp values in Compose assist to make sure APIs are utilizing the proper unit, however they don’t change the basic strategy of how the items are used and transformed to show elements to the consumer. Relying on the machine and density issue, intermediate rounding implies that dimension values could not properly multiply. A Column with 6 Spacers which might be every 10dp excessive might not be 60dp excessive. The true conduct is that the Column needs to be 6 occasions the rounded peak of every Spacer in pixels:
In case you are writing a customized format and testing it, be conscious of how completely different machine densities would possibly have an effect on how rounding accumulates in a manner that could be noticeable. Then, both write assessments that account for and confirm that conduct, or enable for a sure margin of error by not relying on the precise measurements. In any other case, this rounding could trigger assessments for customized layouts to frustratingly have completely different conduct when run throughout completely different emulators or bodily units.
