Known direct subclasses
CommonStyle

The CommonStyle is the style all style types must be converted to be resolved by the StyleResolver.

Style

Transitionary modifier.


A base type for custom styles including CommonStyle. A design system is expected to have multiple style types that each derive from CustomStyle, one that is used by most components in the system, and a set of component specific style types. These types allow the style types to only surface the properties, states, and subcomponents a design system, and its components, supports. These members are accessed through the CustomStyleScope, the class passed as the ScopeT parameter, that is created at the same time. The CustomStyleScope has custom extension functions (such a background, minSize, etc.) that set the design system defined StyleProperty.

To be resolved by a StyleResolver, a CustomStyle must be converted to a CommonStyle first. A CustomStyle is expected to implement a toCommonStyle() extension function that implements a boilerplate conversion. See the sample for an example of how this is done.

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.style.CustomStyle
import androidx.compose.foundation.style.Style
import androidx.compose.foundation.style.StyleScope
import androidx.compose.foundation.style.StyleStateKey
import androidx.compose.foundation.style.rememberUpdatedStyleState
import androidx.compose.foundation.style.state
import androidx.compose.foundation.style.styleable
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color

// Create a new StyleStateKey
val playingStateKey = StyleStateKey(false)

// In the module scope are the following declarations:
//
//    // A custom style scope which has all the properties of StyleScope
//    interface MediaPlayerStyleScope : StyleScope
//
//    // A custom style type
//    fun interface MediaPlayerStyle : CustomStyle<MediaPlayerStyleScope> {
//        companion object : MediaPlayerStyle {
//            override fun MediaPlayerStyleScope.applyStyle() { }
//        }
//    }

// Introduce a function to convert the custom style to a Style
fun MediaPlayerStyle.toStyle(): Style = Style {
    val scope = object : StyleScope by this, MediaPlayerStyleScope {}
    with(scope) { applyStyle() }
}

// Introduce an extension function to read the style state. This will only be
// available in a MediaPlayerStyle.
fun MediaPlayerStyleScope.playerPlaying(block: () -> Unit) {
    state(playingStateKey, block)
}

// The MediaPlayer composable
@Suppress("UNUSED_PARAMETER")
@Composable
fun MediaPlayer(
    url: String,
    modifier: Modifier = Modifier,
    style: MediaPlayerStyle = MediaPlayerStyle,
    playing: Boolean = true,
) {
    val styleState =
        rememberUpdatedStyleState(null) { state -> state[playingStateKey] = playing }
    Box(modifier = modifier.styleable(styleState, style.toStyle())) {
        // Implementation of the media player
    }
}

// Using the style in a composable that sets the state.
MediaPlayer(
    url = "https://example.com/media/video",
    style = {
        borderColor(Color.Gray)

        // This only sets the border color to green when the media player is playing
        playerPlaying { borderColor(Color.Green) }
    },
)
See also
CommonStyle

Summary

Public functions

Unit
ScopeT.applyStyle()

The single abstract method used to invoke the lambda.

Cmn

Public functions

ScopeT.applyStyle

fun ScopeT.applyStyle(): Unit

The single abstract method used to invoke the lambda. The lambda has ScopeT as its receiver (i.e.this) type.