https://kotlinlang.org logo
#compose
Title
# compose
m

martinsumera

02/28/2022, 2:44 PM
Isn't there a way how to predefine multiple preview annotations and apply them on the preview composable? It would be much easier to to use something like
Copy code
@MyCustomPreviews("component name")
which be equivalent of the following code
Copy code
@Preview(name = "ProgressButtonPreview")
@Preview(name = "ProgressButtonPreview - night", uiMode = Configuration.UI_MODE_NIGHT_YES)
@Preview(name = "ProgressButtonPreview - scaled font", fontScale = 3f)
@Preview(name = "ProgressButtonPreview - en", locale = en)
...
@Preview(name = "ProgressButtonPreview - api 26", apiLevel = 31)
e

Eric Chee

02/28/2022, 7:14 PM
You chould probably make a Live Template in android studio. The component name just becomes a variable you fill in
So it’d look something like this. And then allows you to type in whatever name of your component you want
c

Chris Sinco [G]

02/28/2022, 8:23 PM
There is not a way to do this now, but we are looking into evolving the Preview APIs to scale better with generating multiple Previews of the same Composable without having the need to duplicate annotations over and over.
💯 3
Would you say you repeat similar annotations with similar parameters across many different Composables? And is this in context of say a design system and/or screens?
m

martinsumera

03/01/2022, 2:17 PM
Yes. I repeat mutliple previews with the same parameters over and over. It is happening in the context of the design system, where I want to see dark mode version, version with scaled font, sometimes with different screen sizes. But it is also happening in the context of the screens where I want to see different screen sizes, dark mode version and version with scaled font. And when we talk about improving Preview API. It would be nice be able automatically wrap all previews (or just previews with some flag) with custom component. I'm using this to set theme and to add padding to the previews because it looks nicer and you can see it with the background. My previews looks like this right now. It is not very maintanable https://gist.github.com/SumeraMartin/b8f0e609a92353fbee35f5974f687788 Something like this would be much better https://gist.github.com/SumeraMartin/42ddfaa4448b85087b0d5ef2d8efe406
@Chris Sinco [G]
c

Chris Sinco [G]

03/02/2022, 6:58 PM
Gotcha thanks for the context and snippets!
On wrapping components automatically, how do you do that today? Curious if that can be solved by having a top-level function that always wraps things and is available to all files/modules
m

martinsumera

03/04/2022, 3:05 PM
I don't do that automatically. I do it with a component that I manually add to every preview. I'm calling it
Showcase
. It is in the snippets.