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

scana

05/10/2022, 12:26 PM
Hey guys, pretty broad question - assuming that I create my own CustomTheme (https://developer.android.com/jetpack/compose/themes/custom), how can I share it efficiently between screens, given that I migrate existing XML Fragment-based app to Compose? E.g. I migrate two separate screens to Compose, and they both are built like this:
Copy code
CustomTheme {
   // screen A content
}

CustomTheme {
  // screen B content
}
Won't this recreate my fonts/colors all over again? What would be the best approach here?
f

f.babic

05/10/2022, 12:29 PM
you could store/prepare the fonts/colors etc in your AppClass and then have your themes pull from a singular place so that it's not recreated every single time
s

scana

05/10/2022, 12:31 PM
This was actually my first approach as I kept all of typography styles and colors as static fields, but it seems that CompositionLocalProvider would be a better approach to e.g. share dark mode colors
But yeah, I'll try with just initialising fonts/colors set once and reusing it
f

f.babic

05/10/2022, 12:33 PM
Yeah you can use composition locals to provide some values, but you'd need to check if you already set the values or not, so you don't override them
f

Filip Wiesner

05/10/2022, 12:48 PM
Is this really a problem tho? The way you are doing it now looks fine to me 🤷
s

scana

05/10/2022, 12:50 PM
Design system at my company is a custom one and doesn't really follows material design practices. It is pretty big and I was wondering whether I could avoid re-creating tons of resources every time a screen is opened. But obviously forgot about the simplest solution 🤦
c

Chris Sinco [G]

05/10/2022, 7:58 PM
Won’t this recreate my fonts/colors all over again? What would be the best approach here?
If you follow the guide, you essentially would just redo the MaterialTheme solution with your own colors/typography/shape. The values of that get passed down to all hierarchies via CompositionLocals. There shouldn’t be any overhead to resources being recreated. You just wrap the UIs you need with
CustomTheme
which would all be derived from wherever you declare that information, e.g. ui.theme.CustomTheme.kt
If you haven’t already, I’d suggest looking at the Jetsnack sample that has a non-Material custom design system: https://github.com/android/compose-samples/tree/main/Jetsnack
Most folks just copy that implementation and add/change values as needed by their specific design system
Though you did mention XML Fragments - if you must share XML resources with your Compose theme, this adapter can be helpful: https://github.com/material-components/material-components-android-compose-theme-adapter
4 Views