@ExperimentalFoundationStyleApi
sealed interface StyleScope : CompositionLocalAccessorScope, Density
A StyleScope is the receiver scope of a Style lambda. It allows defining the properties of a style that will be used by a styleable modifier to allow customizing the look of a composable component in its default state and in states like hover, pressed, or focused readable from the state property.
The properties set on a style scope affect the styled region of a component. A component creates a styled region by using the styleable modifier.
Properties
val state: StyleState
The state of the component. applying this style. For example, if a component is pressed the StyleState.isPressed will be true.
Custom states can be read from the state using the StyleStateKey for the state.
Functions
fun contentPaddingStart(value: Dp)
Sets the padding for the start edge of the component's content. Content padding is the space between the component's border (if any) and its content. The width/height of the component includes content padding.
This property is not inherited
Parameters
| value | The amount of padding to apply to the start edge. |
fun contentPaddingEnd(value: Dp)
Sets the padding for the end edge of the component's content. Content padding is the space between the component's border (if any) and its content. The width/height of the component includes content padding.
This property is not inherited
Parameters
| value | The amount of padding to apply to the end edge. |
fun contentPaddingTop(value: Dp)
Sets the padding for the top edge of the component's content. Content padding is the space between the component's border (if any) and its content. The width/height of the component includes content padding.
This property is not inherited
Parameters
| value | The amount of padding to apply to the top edge. |
fun contentPaddingBottom(value: Dp)
Sets the padding for the bottom edge of the component's content. Content padding is the space between the component's border (if any) and its content. The width/height of the component includes content padding.
This property is not inherited
Parameters
| value | The amount of padding to apply to the bottom edge. |
fun contentPaddingHorizontal(value: Dp)
Sets the padding for the horizontal (start and end) edges of the component's content. Content padding is the space between the component's border (if any) and its content. The width/height of the component includes content padding.
This property is not inherited
Parameters
| value | The amount of padding to apply to both start and end edges. |
fun contentPaddingVertical(value: Dp)
Sets the padding for the vertical (start and end) edges of the component's content. Content padding is the space between the component's border (if any) and its content. The width/height of the component includes content padding.
This property is not inherited
Parameters
| value | The amount of padding to apply to both top and bottom edges. |
fun contentPadding(value: Dp)
Sets the padding for all four edges (top, end, bottom, start) edges of the component's content. Content padding is the space between the component's border (if any) and its content. The width/height of the component includes content padding.
This property is not inherited
Parameters
| value | The amount of padding to apply to all four edges. |
fun contentPadding(start: Dp, top: Dp, end: Dp, bottom: Dp)
Sets the padding for all four edges (top, end, bottom, start) edges of the component's content. Content padding is the space between the component's border (if any) and its content. The width/height of the component includes content padding.
This property is not inherited
Parameters
| start | The padding for the start edge. |
| top | The padding for the top edge. |
| end | The padding for the end edge. |
| bottom | The padding for the bottom edge. |
fun contentPadding(horizontal: Dp, vertical: Dp)
Sets the padding for the vertical (top and bottom) and horizontal (start and end) edges of the component's content. Content padding is the space between the component's border (if any) and its content. The width/height of the component includes content padding.
This property is not inherited
Parameters
| vertical | The padding for the top and bottom edges. |
| horizontal | The padding for the start and end edges. |
fun externalPaddingStart(value: Dp)
Sets the external padding for the start edge of the component. The external padding is the space between the edge of the component and its border (if any). The width/height of the component includes external padding.
This property is not inherited
Parameters
| value | The amount of padding to apply to the start edge. |
fun externalPaddingEnd(value: Dp)
Sets the external padding for the end edge of the component. The external padding is the space between the edge of the component and its border (if any). The width/height of the component includes external padding.
This property is not inherited
Parameters
| value | The amount of padding to apply to the end edge. |
fun externalPaddingTop(value: Dp)
Sets the external padding for the top edge of the component. The external padding is the space between the edge of the component and its border (if any). The width/height of the component includes external padding.
This property is not inherited
Parameters
| value | The amount of padding to apply to the top edge. |
fun externalPaddingBottom(value: Dp)
Sets the external padding for the bottom edge of the component. The external padding is the space between the edge of the component and its border (if any). The width/height of the component includes external padding.
This property is not inherited
Parameters
| value | The amount of padding to apply to the bottom edge. |
fun externalPaddingHorizontal(value: Dp)
Sets the external padding for the horizontal (start and end) edges of the component. The external padding is the space between the edge of the component and its border (if any). The width/height of the component includes external padding.
This property is not inherited
Parameters
| value | The amount of padding to apply to both start and end edges. |
fun externalPaddingVertical(value: Dp)
Sets the external padding for the vertical (start and end) edges of the component. The external padding is the space between the edge of the component and its border (if any). The width/height of the component includes external padding.
This property is not inherited
Parameters
| value | The amount of padding to apply to both top and bottom edges. |
fun externalPadding(value: Dp)
Sets the external padding for all four edges (top, end, bottom, start) of the component. The external padding is the space between the edge of the component and its border (if any). The width/height of the component includes external padding.
This property is not inherited
Parameters
| value | The amount of padding to apply to all four edges. |
fun externalPadding(start: Dp, top: Dp, end: Dp, bottom: Dp)
Sets the external padding for all four edges (top, end, bottom, start) of the component. The external padding is the space between the edge of the component and its border (if any). The width/height of the component includes external padding.
This property is not inherited
Parameters
| start | The padding for the start edge. |
| top | The padding for the top edge. |
| end | The padding for the end edge. |
| bottom | The padding for the bottom edge. |
fun externalPadding(horizontal: Dp, vertical: Dp)
Sets the external padding for the vertical (top and bottom) and horizontal (start and end) edges of the component. The external padding is the space between the edge of the component and its border (if any). The width/height of the component includes external padding.
This property is not inherited
Parameters
| vertical | The padding for the top and bottom edges. |
| horizontal | The padding for the start and end edges. |
fun borderWidth(value: Dp)
Sets the width of the border around the component. The border is drawn on top of the background and the padded content. The border's width does not contribute to the component's layout size (width/height); it is rendered within the component's bounds This method only sets the width; color or brush must be set separately.
Specifying a Dp.Unspecified value will remove the border.
Specifying a Dp.Hairline or 0.dp value will create 1 pixel border regardless of density.
This property is not inherited
Parameters
| value | The width of the border. |
fun borderColor(value: Color)
Sets the color of the border around the component. The border is drawn on top of the background and the padded content. This method only sets the color; width must be set separately. The border's presence and appearance do not affect the component's layout size.
This property is not inherited
Parameters
| value | The color of the border. |
fun borderBrush(value: Brush)
Sets the brush used to paint the border around the component. The border is drawn on top of the background and the padded content. This method only sets the brush; width must be set separately. The border's presence and appearance do not affect the component's layout size.
This property is not inherited
Parameters
| value | The brush to paint the border (e.g., for gradients). |
fun border(width: Dp, color: Color)
Sets a solid border for the component with the specified width and color. The border is drawn on top of the background and the padded content. The border itself does not contribute to the component's layout size (width/height).
Specifying a Dp.Unspecified width will remove the border.
Specifying a Dp.Hairline or 0.dp width will create 1 pixel border regardless of density.
This property is not inherited
Parameters
| width | The width of the border. |
| color | The color of the border. |
fun border(width: Dp, brush: Brush)
Sets a border for the component with the specified width and brush. The border is drawn on top of the background and the padded content. The border itself does not contribute to the component's layout size (width/height).
Specifying a Dp.Unspecified width will remove the border.
Specifying a Dp.Hairline or 0.dp width will create 1 pixel border regardless of density.
This property is not inherited
Parameters
| width | The width of the border. |
| brush | The brush to paint the border (e.g., for gradients). |
fun width(value: Dp)
Sets the preferred width of the component. The actual size will also depend on the parent's constraints and other modifiers. The specified width includes both contentPadding and externalPadding.
This property is not inherited
Parameters
| value | The preferred width in Dp. |
fun height(value: Dp)
Sets the preferred height of the component. The actual size will also depend on the parent's constraints and other modifiers. The specified height includes both contentPadding and externalPadding.
This property is not inherited
Parameters
| value | The preferred height in Dp. |
fun size(width: Dp, height: Dp)
Sets the preferred width and height of the component. The actual size will also depend on the parent's constraints and other modifiers. The specified dimensions includes both contentPadding and externalPadding.
This property is not inherited
Parameters
| width | The preferred width in Dp. |
| height | The preferred height in Dp. |
fun size(value: Dp)
Sets the preferred width and height of the component to the same value. The actual size will also depend on the parent's constraints and other modifiers. The specified size includes any padding.
This property is not inherited
Parameters
| value | The preferred width and height in Dp. |
fun size(value: DpSize)
Sets the preferred width and height of the component using a DpSize object. The actual size will also depend on the parent's constraints and other modifiers. The specified size includes any padding.
This property is not inherited
Parameters
| value | The preferred size. |
fun width(@FloatRange(from = 0.0, to = 1.0) fraction: Float)
Sets the width of the component to a fraction of the parent's available width. The specified width includes any padding.
This property is not inherited
Parameters
| fraction | The fraction of the available width (e.g., 0.5f for 50%). |
fun height(@FloatRange(from = 0.0, to = 1.0) fraction: Float)
Sets the height of the component to a fraction of the parent's available height. The specified height includes any padding.
This property is not inherited
Parameters
| fraction | The fraction of the available height (e.g., 0.5f for 50%). |
fun left(value: Dp)
Offsets the component horizontally from its original calculated left position. Positive values shift the component to the right, negative to the left.
This property is not inherited
Parameters
| value | The amount to offset from the left edge. |
fun top(value: Dp)
Offsets the component vertically from its original calculated top position. Positive values shift the component downwards, negative upwards.
This property is not inherited
Parameters
| value | The amount to offset from the top edge. |
fun right(value: Dp)
Offsets the component horizontally from its original calculated right position. Positive values shift the component to the left (further from the right edge), negative to the right.
This property is not inherited
Parameters
| value | The amount to offset from the right edge. |
fun bottom(value: Dp)
Offsets the component vertically from its original calculated bottom position. Positive values shift the component upwards (further from the bottom edge), negative downwards.
This property is not inherited
Parameters
| value | The amount to offset from the bottom edge. |
fun minWidth(value: Dp)
Constrains the minimum width of the component. The component's width, including padding, will be at least this value.
This property is not inherited
Parameters
| value | The minimum width. |
fun minHeight(value: Dp)
Constrains the minimum height of the component. The component's height, including padding, will be at least this value.
This property is not inherited
Parameters
| value | The minimum height. |
fun minSize(size: DpSize)
Constrains the minimum size (width and height) of the component. The component's dimensions, including padding, will be at least these values.
This property is not inherited
Parameters
| size | The minimum size (DpSize). |
fun minSize(width: Dp, height: Dp)
Constrains the minimum width and height of the component. The component's dimensions, including padding, will be at least these values.
This property is not inherited
Parameters
| width | The minimum width. |
| height | The minimum height. |
fun maxWidth(value: Dp)
Constrains the maximum width of the component. The component's width, including padding, will be at most this value.
This property is not inherited
Parameters
| value | The maximum width. |
fun maxHeight(value: Dp)
Constrains the maximum height of the component. The component's height, including padding, will be at most this value.
This property is not inherited
Parameters
| value | The maximum height. |
fun maxSize(size: DpSize)
Constrains the maximum size (width and height) of the component. The component's dimensions, including padding, will be at most these values.
This property is not inherited
Parameters
| size | The maximum size (DpSize). |
fun maxSize(width: Dp, height: Dp)
Constrains the maximum width and height of the component. The component's dimensions, including padding, will be at most these values.
This property is not inherited
Parameters
| width | The maximum width. |
| height | The maximum height. |
fun alpha(@FloatRange(from = 0.0, to = 1.0) value: Float)
Sets the opacity of the component. A value of 1.0f means fully opaque, 0.0f means fully transparent.
This property is not inherited
Parameters
| value | The alpha value (0.0f to 1.0f). |
fun scaleX(@FloatRange(from = 0.0) value: Float)
Scales the component horizontally around its center pivot point.
Setting scaleX will override the horizontal scaling set by a previous call to scale.
This property is not inherited
Parameters
| value | The scaling factor for the X-axis. 1.0f is no scale. |
fun scaleY(@FloatRange(from = 0.0) value: Float)
Scales the component vertically around its center pivot point.
Setting scaleX will override the vertical scaling set by a previous call to scale.
This property is not inherited
Parameters
| value | The scaling factor for the Y-axis. 1.0f is no scale. |
fun scale(@FloatRange(from = 0.0) value: Float)
Scales the component uniformly (both horizontally and vertically) around its center pivot point.
Setting scale will override the horizontal scaling set by a previous call to scaleX and the previous vertical scaling set by calling scaleY.
This property is not inherited
Parameters
| value | The scaling factor for both X and Y axes. 1.0f is no scale. |
fun translationX(@FloatRange(from = 0.0) value: Float)
Translates (moves) the component horizontally. Positive values move it to the right, negative values to the left.
This property is not inherited
Parameters
| value | The translation amount on the X-axis in pixels. |
fun translationY(@FloatRange(from = 0.0) value: Float)
Translates (moves) the component vertically. Positive values move it down, negative values up.
This property is not inherited
Parameters
| value | The translation amount on the Y-axis in pixels. |
fun translation(@FloatRange(from = 0.0) x: Float, @FloatRange(from = 0.0) y: Float)
Translates (moves) the component horizontally and vertically.
This property is not inherited
Parameters
| x | The translation amount on the X-axis in pixels. |
| y | The translation amount on the Y-axis in pixels. |
fun translation(offset: Offset)
Translates (moves) the component by the given Offset.
This property is not inherited
Parameters
| offset | The translation offset in pixels. |
fun rotationX(value: Float)
Rotates the component around the X-axis through its center.
This property is not inherited
Parameters
| value | The rotation angle in degrees. |
fun rotationY(value: Float)
Rotates the component around the Y-axis through its center.
This property is not inherited
Parameters
| value | The rotation angle in degrees. |
fun rotationZ(value: Float)
Rotates the component around the Z-axis (perpendicular to the screen) through its center.
This property is not inherited
Parameters
| value | The rotation angle in degrees. |
fun transformOrigin(value: TransformOrigin)
Offset percentage along the x and y axis for which contents are rotated and scaled. The default value of 0.5f, 0.5f indicates the pivot point will be at the midpoint of the left and right as well as the top and bottom bounds of the layer. Default value is TransformOrigin.Center.
Parameters
| value | The origin of the transform |
fun clip(value: Boolean = true)
Clips the component to its bounds. If a shape is also applied, it clips to the shape. When clip is true content that overflows the component's bounds is not drawn.
This property is not inherited
Parameters
| value | true to clip (default), false to allow drawing outside bounds. |
fun zIndex(@FloatRange(from = 0.0) value: Float)
Sets the Z-index of the component. Higher Z-index components are drawn on top of lower Z-index components within the same parent. This affects drawing order, not layout.
This property is not inherited
Parameters
| value | The Z-index value. |
fun background(color: Color)
Sets the background color of the component. If a shape is applied, the background will fill that shape.
Setting a background color will override any previously set background brush.
This property is not inherited
Parameters
| color | The background color. |
fun background(value: Brush)
Sets the background of the component using a Brush. This allows for gradient backgrounds or other complex fills. If a shape is applied, the background will fill that shape.
Setting a background brush will override any previously set background color.
This property is not inherited
Parameters
| value | The brush to use for the background. |
fun foreground(value: Color)
Sets the foreground color for the component. This can be used to overlay a color on top of the component's content. It is important that this brush be partially transparent (e.g. alpha less than 1.0) or it will obscure the content. If a shape is applied, the foreground will fill that shape.
This property is not inherited
Parameters
| value | The brush to use for the foreground. |
fun foreground(value: Brush)
Sets the foreground brush for the component. This can be used to overlay a color or gradient on top of the component's content. It is important that this brush be partially transparent (e.g. alpha less than 1.0) or it will obscure the content. If a shape is applied, the foreground will fill that shape.
This property is not inherited
Parameters
| value | The brush to use for the foreground. |
fun shape(value: Shape)
Sets the Shape for the component. This shape is used for clipping (clip), background rendering (background), and border rendering.
If shape is not specified then a androidx.compose.ui.graphics.RectangleShape is used.
This property is not inherited
Parameters
| value | The shape to apply. |
fun dropShadow(value: Shadow)
Applies a drop shadow effect directly to the component, often used for text or specific graphics. This is distinct from shadowElevation which is specific to platform elevation shadows. Multiple drop shadows can be applied by calling this function multiple times or using the vararg overload. The border and overall layout size are not affected by this shadow.
If shape is set, the shadow will be applied to the shape's bounds.
This property is not inherited.
Parameters
| value | The Shadow properties (color, offset, blurRadius) for the drop shadow. |
fun dropShadow(vararg value: Shadow)
Applies one or more drop shadow effects directly to the component. This is distinct from shadowElevation. The border and overall layout size are not affected by these shadows.
This property is not inherited.
Parameters
| value | A vararg of Shadow properties to apply as drop shadows. |
fun innerShadow(value: Shadow)
Applies an inner shadow effect to the component. This shadow is drawn inside the bounds of the component. Multiple inner shadows can be applied by calling this function multiple times or using the vararg overload. The border and overall layout size are not affected by this shadow.
If shape is set, the shadow will be applied to the shape's bounds.
This property is not inherited.
Parameters
| value | The Shadow properties (color, offset, blurRadius) for the inner shadow. |
fun innerShadow(vararg value: Shadow)
Applies one or more inner shadow effects to the component. These shadows are drawn inside the bounds of the component. The border and overall layout size are not affected by these shadows.
This property is not inherited.
Parameters
| value | A vararg of Shadow properties to apply as inner shadows. |
fun animate(value: Style)
Specifies a Style whose properties will be animated to when they change. This uses a default animation specification. This allows for smooth transitions between style states without manual animation setup. A androidx.compose.animation.core.spring will be used for the animation for both animating to and from the style.
Parameters
| value | The target Style whose properties should be animated. |
fun animate(spec: AnimationSpec<Float>, value: Style)
Specifies a Style whose properties will be animated to when they change, using the provided AnimationSpec. This allows for smooth transitions between style states with custom animation curves. The same animation spec will be used for animating both to and from the style.
Parameters
| spec | The AnimationSpec to use for the animation. |
| value | The target Style whose properties should be animated. |
fun animate(toSpec: AnimationSpec<Float>, fromSpec: AnimationSpec<Float>, value: Style)
Specifies a Style whose properties will be animated to when they change, using the provided AnimationSpec. This allows for smooth transitions between style states with custom animation curves.
Parameters
| toSpec | The AnimationSpec to use for the animation to the values set in value. This animation is used when the animate call is added to the style. |
| fromSpec | The AnimationSpec to use for the animation from the values set in value. This animation is used when the animate call is removed from the style. |
| value | The target Style whose properties should be animated. |
fun textStyle(value: TextStyle)
Applies a complete TextStyle object to the component. This is a convenient way to set multiple text-related properties at once. Text properties are inherited by child text components unless overridden.
This property is inherited.
Parameters
| value | The TextStyle to apply. |
fun contentColor(value: Color)
Sets the preferred content color, primarily affecting text color. This property is inherited by child text components if not overridden. This affects drawing only and is often a component of a TextStyle.
This property is inherited.
Parameters
| value | The color for the content, typically text. |
fun contentBrush(value: Brush)
Sets the preferred brush for rendering content, primarily affecting text. This allows for gradient text or other brush-based text effects. This property is inherited by child text components if not overridden. This affects drawing only and is often a component of a TextStyle.
This property is inherited.
Parameters
| value | The brush for the content, typically text. |
fun textDecoration(value: TextDecoration) // int enum (mask?) 2 possible values
Sets the text decoration (e.g., underline, line-through). This property is inherited by child text components if not overridden. This affects drawing only and is a component of a TextStyle.
This property is inherited.
Parameters
| value | The TextDecoration to apply. |
fun fontFamily(value: FontFamily) // reference class
Sets the font family for the text. This property is inherited by child text components if not overridden. This affects text layout and rendering, and is a component of a TextStyle.
This property is inherited.
Parameters
| value | The FontFamily to use. |
fun textIndent(value: TextIndent) // ref class of two longs
Sets the text indent (e.g., for the first line or subsequent lines). This property is inherited by child text components if not overridden. This affects text layout and is a component of a TextStyle.
This property is inherited.
Parameters
| value | The TextIndent to apply. |
fun fontSize(value: TextUnit) // Long value class
Sets the font size for the text. This property is inherited by child text components if not overridden. This affects text layout and rendering, and is a component of a TextStyle.
This property is inherited.
Parameters
| value | The font size in TextUnit (e.g., 16.sp). |
fun lineHeight(value: TextUnit) // long value class
Sets the line height for the text. This property is inherited by child text components if not overridden. This affects text layout and is a component of a TextStyle.
This property is inherited.
Parameters
| value | The line height in TextUnit (e.g., 20.sp) or TextUnit.Unspecified. |
fun letterSpacing(value: TextUnit) // long value class
Sets the letter spacing for the text. This property is inherited by child text components if not overridden. This affects text layout and rendering, and is a component of a TextStyle.
This property is inherited.
Parameters
| value | The letter spacing in TextUnit (e.g., 0.5.sp). |
fun baselineShift(value: BaselineShift) // float value class
Sets the baseline shift for the text (e.g., for superscript or subscript). This property is inherited by child text components if not overridden. This affects text layout and rendering, and is a component of a TextStyle.
This property is inherited.
Parameters
| value | The BaselineShift to apply. |
fun fontWeight(value: FontWeight) // Int enum, 9 values, 4 bits
Sets the font weight for the text (e.g., bold, normal). This property is inherited by child text components if not overridden. This affects text rendering and is a component of a TextStyle.
This property is inherited.
Parameters
| value | The FontWeight to apply. |
fun fontStyle(
value: FontStyle
) // enum int value class, two possible values + unspecified, 2 bits
Sets the font style for the text (e.g., italic, normal). This property is inherited by child text components if not overridden. This affects text rendering and is a component of a TextStyle.
This property is inherited.
Parameters
| value | The FontStyle to apply. |
fun textAlign(value: TextAlign) // int enum of 6 values + unspecified, 3 bits
Sets the text alignment (e.g., start, end, center). This property is inherited by child text components if not overridden. This affects text layout and is a component of a TextStyle.
This property is inherited.
Parameters
| value | The TextAlign to apply. |
fun textDirection(value: TextDirection) // int enum of 5 values + unspecified, 3 bits
Sets the text direction (e.g., LTR, RTL, content-based). This property is inherited by child text components if not overridden. This affects text layout and is a component of a TextStyle.
This property is inherited.
Parameters
| value | The TextDirection to apply. |
fun lineBreak(value: LineBreak) // int enum of 3 values + unspecified, 2 bits
Sets the line breaking strategy for text. This property is inherited by child text components if not overridden. This affects text layout and is a component of a TextStyle.
This property is inherited.
Parameters
| value | The LineBreak strategy to apply. |
fun hyphens(value: Hyphens) // int enum of 2 values + unspecified, 2 bits
Sets the hyphenation strategy for text. This property is inherited by child text components if not overridden. This affects text layout and is a component of a TextStyle.
This property is inherited.
Parameters
| value | The Hyphens strategy to apply. |
fun fontSynthesis(value: FontSynthesis) // enum int value, 4 possible values,
Sets the font synthesis strategy, determining if and how bold/italic styles are synthesized when the font family does not natively support them. This property is inherited by child text components if not overridden. This affects text rendering and is a component of a TextStyle.
This property is inherited.
Parameters
| value | The FontSynthesis strategy to apply. |
fun <T> state(
key: StyleStateKey<T>,
value: Style,
active: (key: StyleStateKey<T>, state: StyleState) -> Boolean,
)
A helper function to implement state reading extension functions such as StyleScope.pressed.
Custom style states can use this function to implement start reading functions to be consistent with the predefined state reading functions.