Compose Preview Device Annotation

---

Description

I think is important to know and have tools that allow us to test our UIs with different screen sizes/font scales, etc to have that feedback immediately.

And although there are some preview annotations like @PreviewFontScale and @PreviewScreenSizes they are quite wide in their scope i.e. ScreenSizes comes with desktop, tablet and foldable, which is not normally the main target of my apps.

This custom preview is a small subset of test cases that might apply to many of our apps, it comes with groups so that you can preview your UIs with either different device sizes and font sizes without having an overwhelming amount of previews.

You can also combine it with the built-in annotations that I’ve mentioned before, so when you’re ready to quickly glance on how it looks in other formats, you can just select “all”.

@Preview(name = "Low-end Phone", group = "Devices", device = "id:small_phone")
@Preview(name = "Mid-range Phone", group = "Devices", device = PHONE)
@Preview(name = "High-end Phone", group = "Devices", device = "id:pixel_9_pro_xl")
@Preview(name = "small font", group = "Font", fontScale = 0.7f)
@Preview(name = "normal font", group = "Font", fontScale = 1f)
@Preview(name = "large font", group = "Font", fontScale = 1.5f)
@Preview(name = "larger font", group = "Font", fontScale = 1.8f)
annotation class DevicePreviews