https://kotlinlang.org logo
Channels
Powered by
#compose
Title
# compose
s

streetsofboston

10/02/2020, 8:47 PM
This maybe a silly question, but I’m just starting with Compose. What material compose component can be used for a Label, a read-only TextField (no cursor, no focus, no keyboard pop-up)?
z

zoha131

10/02/2020, 8:49 PM
Why do you need material component? Why you can’t use 
Text
for that?
s

streetsofboston

10/02/2020, 8:50 PM
For theming. I have MaterialTheme.
z

Zach Klippenstein (he/him) [MOD]

10/02/2020, 8:50 PM
Text
is already kind of material, it interacts with material colors
s

streetsofboston

10/02/2020, 8:51 PM
It does…? I saw weird colors… let me check again.
z

Zach Klippenstein (he/him) [MOD]

10/02/2020, 8:52 PM
It should use content color I believe - some of that color stuff has broken before though, so there might be a bug?
s

streetsofboston

10/02/2020, 8:52 PM
It (Text) does not pick up the text-colors and such. TextField does it correctly
z

Zach Klippenstein (he/him) [MOD]

10/02/2020, 8:53 PM
It should at least pick a color that contrasts with surface color
s

streetsofboston

10/02/2020, 8:55 PM
I was half correct 🙂; Text does pick up the color in the app itself. But it has trouble in the preview in the IDE
s

Sean McQuillan [G]

10/02/2020, 9:03 PM
Text will read the contentColor of the current call position. This means that something above it needs to define contentColor or it will default to a constant color. In a 
@Preview
the easiest way to do this by surrounding the call with 
Surface
which both applies a background and specifies a (onSurface I believe) contrasting contentColor. Note that applying a 
MaterialTheme
is not enough to set the 
contentColor
To the original question, for undecorated text display, 
Text
is the right composable.
z

Zach Klippenstein (he/him) [MOD]

10/02/2020, 9:06 PM
Oh right, surface does the wiring, not the theme.
s

Sean McQuillan [G]

10/02/2020, 9:06 PM
You can also specify the contentColor manually if needed
The full system here: 
MaterialTheme
a definition of theming values used by the material system 
Emphasis
and Material Components, the Material system for modifying contentColor (this is used by 
ProvideEmphasis
, 
Surface
etc and will call through to set content color – it reads from 
MaterialTheme
and the current contentColor as appropriate) 
contentColor
an ambient that describes the "default" color to make things in the current call position to contrast with the background. This is used by both Material and Foundation. (edit: done making edits 🙂 )
s

streetsofboston

10/02/2020, 9:27 PM
Thank you @Sean McQuillan [G]! Wrapping it in a simple 
Surface { … }
did the trick
s

Sean McQuillan [G]

10/02/2020, 9:30 PM
In JetNews we made a composable 
ThemedPreview
that does exactly this (apply a theme & surface) – probably a good pattern to consider.
Copy code
@Preview
@Composable
fun MyPreview() {
   ThemedPreview { MyComposable }
}
s

streetsofboston

10/02/2020, 9:33 PM
I made something similar:
Copy code
@Composable
fun WearOSPrototypeTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    themeColors: Colors = if (darkTheme) DarkColorPalette else LightColorPalette,
    themeParameters: ThemeParameters = ThemeParameters(themeColors, null, null),
    content: @Composable() () -> Unit
) {
    val (tColors, tTypography, tShapes) = themeParameters

    MaterialTheme(
        colors = tColors ?: MaterialTheme.colors,
        typography = tTypography ?: MaterialTheme.typography,
        shapes = tShapes ?: MaterialTheme.shapes
    ) {
        Surface(content = content)
    }
}
For the preview, you can call it like this 
WearOSPrototypeTheme(darkTheme = true) { ... }
(or provide the 
themeColors
instead). For the actual app: 
WearOSPrototypeTheme(themeParameters = createMdcTheme(ContextAmbient.current))
👍 1
s

Sean McQuillan [G]

10/02/2020, 9:34 PM
Reasonable way to do it
I've not quite settled on a pattern for "when should I paint the screen background" yet tbh
s

streetsofboston

10/02/2020, 9:34 PM
You mean the ’background` or the ‘surface’?
s

Sean McQuillan [G]

10/02/2020, 9:35 PM
The 
Surface
(which is the material way to paint a background + other material stuff)
s

streetsofboston

10/02/2020, 9:36 PM
Yup…. IIRC, it seems to be defined in the Material Design specs what is a surface (and onSurface) and what is background ….
s

Sean McQuillan [G]

10/02/2020, 9:36 PM
Ah, probably. I am definitely a "patterns" person when it comes to using Material.
So I may have some words off here 🙂
s

streetsofboston

10/02/2020, 9:40 PM
But if I understand correctly, the choice of colors for a composable (eg text color) is based on the current color-set (contentColor) of the Surface that contains that composable (directly or indirectly), correct?
👍 1
s

Sean McQuillan [G]

10/02/2020, 9:41 PM
Yep, the 
contentColor
is an ambient, which means it's value is derived by some parent that set the ambient. 
Surface
has the effect of specifying 
contentColor
(as does e.g. 
Toolbar
last I checked).
contentColor
is the foundation level API, and 
Surface
which is in Material modifies it
s

streetsofboston

10/02/2020, 9:45 PM
Found it:
Copy code
- Surface colors affect surfaces of components, such as cards, sheets, and menus.
- The background color appears behind scrollable content.
https://material.io/design/color/the-color-system.html#color-theme-creation
🤗 1
6 Views
Powered by