This maybe a silly question, but I’m just starting with Compose. What material compose component can...

# compose

[streetsofboston]

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)?

[zoha131]

Why do you need material component? Why you can’t use Text for that?

[streetsofboston]

For theming. I have MaterialTheme.

[Zach Klippenstein (he/him) [MOD]]

Text is already kind of material, it interacts with material colors

[streetsofboston]

It does…? I saw weird colors… let me check again.

[Zach Klippenstein (he/him) [MOD]]

It should use content color I believe - some of that color stuff has broken before though, so there might be a bug?

[streetsofboston]

It (Text) does not pick up the text-colors and such. TextField does it correctly

[Zach Klippenstein (he/him) [MOD]]

It should at least pick a color that contrasts with surface color

[streetsofboston]

I was half correct 🙂; Text does pick up the color in the app itself. But it has trouble in the preview in the IDE

[Sean McQuillan [G]]

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

[Sean McQuillan [G]]

To the original question, for undecorated text display, Text is the right composable.

[Zach Klippenstein (he/him) [MOD]]

Oh right, surface does the wiring, not the theme.

[Sean McQuillan [G]]

You can also specify the contentColor manually if needed

[Sean McQuillan [G]]

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 🙂 )

[streetsofboston]

Thank you @Sean McQuillan [G]! Wrapping it in a simple Surface { … } did the trick

[Sean McQuillan [G]]

In JetNews we made a composable ThemedPreview that does exactly this (apply a theme & surface) – probably a good pattern to consider.

@Preview
@Composable
fun MyPreview() {
   ThemedPreview { MyComposable }
}

[streetsofboston]

I made something similar:

@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))

[Sean McQuillan [G]]

Reasonable way to do it

[Sean McQuillan [G]]

I've not quite settled on a pattern for "when should I paint the screen background" yet tbh

[streetsofboston]

You mean the ’background` or the ‘surface’?

[Sean McQuillan [G]]

The Surface

[Sean McQuillan [G]]

(which is the material way to paint a background + other material stuff)

[streetsofboston]

Yup…. IIRC, it seems to be defined in the Material Design specs what is a surface (and onSurface) and what is background ….

[Sean McQuillan [G]]

Ah, probably. I am definitely a "patterns" person when it comes to using Material.

[Sean McQuillan [G]]

So I may have some words off here 🙂

[streetsofboston]

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?

[Sean McQuillan [G]]

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).

[Sean McQuillan [G]]

contentColor is the foundation level API, and Surface which is in Material modifies it

[streetsofboston]

Found it:

- 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