List of Compose modifiers

Actions

Scope: Any
Modifier.clickable(
    enabled: Boolean,
    onClickLabel: String?,
    role: Role?,
    onClick: () -> Unit
)

Configure component to receive clicks via input or accessibility "click" event.

Scope: Any
Modifier.clickable(
    interactionSource: MutableInteractionSource,
    indication: Indication?,
    enabled: Boolean,
    onClickLabel: String?,
    role: Role?,
    onClick: () -> Unit
)

Configure component to receive clicks via input or accessibility "click" event.

Scope: Any
@ExperimentalFoundationApi 
Modifier.combinedClickable(
    enabled: Boolean,
    onClickLabel: String?,
    role: Role?,
    onLongClickLabel: String?,
    onLongClick: () -> Unit,
    onDoubleClick: () -> Unit,
    onClick: () -> Unit
)

Configure component to receive clicks, double clicks and long clicks via input or accessibility "click" event.

Scope: Any
@ExperimentalFoundationApi 
Modifier.combinedClickable(
    interactionSource: MutableInteractionSource,
    indication: Indication?,
    enabled: Boolean,
    onClickLabel: String?,
    role: Role?,
    onLongClickLabel: String?,
    onLongClick: () -> Unit,
    onDoubleClick: () -> Unit,
    onClick: () -> Unit
)

Configure component to receive clicks, double clicks and long clicks via input or accessibility "click" event.

Scope: Any
Modifier.draggable(
    state: DraggableState,
    orientation: Orientation,
    enabled: Boolean,
    interactionSource: MutableInteractionSource?,
    startDragImmediately: Boolean,
    onDragStarted: suspend CoroutineScope.(Offset) -> Unit,
    onDragStopped: suspend CoroutineScope.(Float) -> Unit,
    reverseDirection: Boolean
)

Configure touch dragging for the UI element in a single Orientation.

Scope: Any
Modifier.selectable(
    selected: Boolean,
    enabled: Boolean,
    role: Role?,
    onClick: () -> Unit
)

Configure component to be selectable, usually as a part of a mutually exclusive group, where only one item can be selected at any point in time.

Scope: Any
Modifier.selectable(
    selected: Boolean,
    interactionSource: MutableInteractionSource,
    indication: Indication?,
    enabled: Boolean,
    role: Role?,
    onClick: () -> Unit
)

Configure component to be selectable, usually as a part of a mutually exclusive group, where only one item can be selected at any point in time.

Scope: Any

Use this modifier to group a list of selectable items like Tabs or RadioButtons together for accessibility purpose.

Scope: Any
@ExperimentalMaterialApi 
<T : Any?> Modifier.swipeable(
    state: SwipeableState<T>,
    anchors: Map<Float, T>,
    orientation: Orientation,
    enabled: Boolean,
    reverseDirection: Boolean,
    interactionSource: MutableInteractionSource?,
    thresholds: (from, to) -> ThresholdConfig,
    resistance: ResistanceConfig?,
    velocityThreshold: Dp
)

Enable swipe gestures between a set of predefined states.

Scope: Any
Modifier.toggleable(
    value: Boolean,
    enabled: Boolean,
    role: Role?,
    onValueChange: (Boolean) -> Unit
)

Configure component to make it toggleable via input and accessibility events

Scope: Any
Modifier.toggleable(
    value: Boolean,
    interactionSource: MutableInteractionSource,
    indication: Indication?,
    enabled: Boolean,
    role: Role?,
    onValueChange: (Boolean) -> Unit
)

Configure component to make it toggleable via input and accessibility events.

Scope: Any
Modifier.triStateToggleable(
    state: ToggleableState,
    enabled: Boolean,
    role: Role?,
    onClick: () -> Unit
)

Configure component to make it toggleable via input and accessibility events with three states: On, Off and Indeterminate.

Scope: Any
Modifier.triStateToggleable(
    state: ToggleableState,
    interactionSource: MutableInteractionSource,
    indication: Indication?,
    enabled: Boolean,
    role: Role?,
    onClick: () -> Unit
)

Configure component to make it toggleable via input and accessibility events with three states: On, Off and Indeterminate.

Alignment

Scope: BoxScope
@Stable 
Modifier.align(alignment: Alignment)

Pull the content element to a specific Alignment within the Box.

Scope: RowScope
@Stable 

Align the element vertically within the Row.

Scope: RowScope
@Stable 

Position the element vertically such that its alignmentLine aligns with sibling elements also configured to alignBy.

Scope: RowScope
@Stable 
Modifier.alignBy(alignmentLineBlock: (Measured) -> Int)

Position the element vertically such that the alignment line for the content as determined by alignmentLineBlock aligns with sibling elements also configured to alignBy.

Scope: RowScope
@Stable 

Position the element vertically such that its first baseline aligns with sibling elements also configured to alignByBaseline or alignBy.

@Stable 

Align the element horizontally within the Column.

@Stable 

Position the element horizontally such that its alignmentLine aligns with sibling elements also configured to alignBy.

@Stable 
Modifier.alignBy(alignmentLineBlock: (Measured) -> Int)

Position the element horizontally such that the alignment line for the content as determined by alignmentLineBlock aligns with sibling elements also configured to alignBy.

Animation

open

animateEnterExit modifier can be used for any direct or indirect children of AnimatedVisibility to create a different enter/exit animation than what's specified in AnimatedVisibility.

Border

Scope: Any
Modifier.border(border: BorderStroke, shape: Shape)

Modify element to add border with appearance specified with a border and a shape and clip it.

Scope: Any
Modifier.border(width: Dp, color: Color, shape: Shape)

Modify element to add border with appearance specified with a width, a color and a shape and clip it.

Scope: Any
Modifier.border(width: Dp, brush: Brush, shape: Shape)

Modify element to add border with appearance specified with a width, a brush and a shape and clip it.

Drawing

Scope: Any
@Stable 
Modifier.alpha(alpha: Float)

Draw content with modified alpha that may be less than 1.

Scope: Any
Modifier.background(color: Color, shape: Shape)

Draws shape with a solid color behind the content.

Scope: Any
Modifier.background(brush: Brush, shape: Shape, alpha: Float)

Draws shape with brush behind the content.

Scope: Any
@Stable 
Modifier.clip(shape: Shape)

Clip the content to shape.

Scope: Any
@Stable 

Clip the content to the bounds of a layer defined at this modifier.

Scope: Any
Modifier.drawBehind(onDraw: DrawScope.() -> Unit)

Draw into a Canvas behind the modified content.

Scope: Any
Modifier.drawWithCache(
    onBuildDrawCache: CacheDrawScope.() -> DrawResult
)

Draw into a DrawScope with content that is persisted across draw calls as long as the size of the drawing area is the same or any state objects that are read have not changed.

Scope: Any

Creates a DrawModifier that allows the developer to draw before or after the layout's contents.

Scope: Any
Modifier.indication(
    interactionSource: InteractionSource,
    indication: Indication?
)

Draws visual effects for this component when interactions occur.

Scope: Any
Modifier.paint(
    painter: Painter,
    sizeToIntrinsics: Boolean,
    alignment: Alignment,
    contentScale: ContentScale,
    alpha: Float,
    colorFilter: ColorFilter?
)

Paint the content using painter.

Scope: Any
@Stable 
Modifier.shadow(elevation: Dp, shape: Shape, clip: Boolean)

Creates a GraphicsLayerModifier that draws the shadow.

Scope: Any
@Stable 
Modifier.zIndex(zIndex: Float)

Creates a modifier that controls the drawing order for the children of the same layout parent.

Focus

Scope: Any

This function is deprecated. Replaced by focusTarget

Scope: Any
Modifier.focusOrder(focusOrderReceiver: FocusOrder.() -> Unit)

Use this modifier to specify a custom focus traversal order.

Scope: Any
Modifier.focusOrder(focusRequester: FocusRequester)

A modifier that lets you specify a FocusRequester for the current composable so that this focusRequester can be used by another composable to specify a custom focus order.

Scope: Any
Modifier.focusOrder(
    focusRequester: FocusRequester,
    focusOrderReceiver: FocusOrder.() -> Unit
)

A modifier that lets you specify a FocusRequester for the current composable along with focusOrder.

Scope: Any

Add this modifier to a component to observe changes to focus state.

Scope: Any

Add this modifier to a component to make it focusable.

Scope: Any
Modifier.focusable(
    enabled: Boolean,
    interactionSource: MutableInteractionSource?
)

Configure component to be focusable via focus system or accessibility "focus" event.

Scope: Any
Modifier.onFocusChanged(onFocusChanged: (FocusState) -> Unit)

Add this modifier to a component to observe focus state events.

Scope: Any
Modifier.onFocusEvent(onFocusEvent: (FocusState) -> Unit)

Add this modifier to a component to observe focus state events.

Graphics

Scope: Any
@Stable 
Modifier.graphicsLayer(
    scaleX: Float,
    scaleY: Float,
    alpha: Float,
    translationX: Float,
    translationY: Float,
    shadowElevation: Float,
    rotationX: Float,
    rotationY: Float,
    rotationZ: Float,
    cameraDistance: Float,
    transformOrigin: TransformOrigin,
    shape: Shape,
    clip: Boolean
)

A Modifier.Element that makes content draw into a draw layer.

Scope: Any
@Stable 

A Modifier.Element that makes content draw into a draw layer.

Scope: Any
@Stable 

A Modifier.Element that adds a draw layer such that tooling can identify an element in the drawn image.

Keyboard

Scope: Any
Modifier.onKeyEvent(onKeyEvent: (KeyEvent) -> Boolean)

Adding this modifier to the modifier parameter of a component will allow it to intercept hardware key events.

Scope: Any
Modifier.onPreviewKeyEvent(onPreviewKeyEvent: (KeyEvent) -> Boolean)

Adding this modifier to the modifier parameter of a component will allow it to intercept hardware key events.

Layout

Scope: Any

Creates a LayoutModifier that allows changing how the wrapped element is measured and laid out.

Scope: Any
@Stable 
Modifier.layoutId(layoutId: Any)

Tag the element with layoutId to identify the element within its parent.

Scope: Any
@Stable 
Modifier.onGloballyPositioned(
    onGloballyPositioned: (LayoutCoordinates) -> Unit
)

Invoke onGloballyPositioned with the LayoutCoordinates of the element when the global position of the content may have changed.

Padding

Scope: Any
@Stable 
Modifier.absolutePadding(left: Dp, top: Dp, right: Dp, bottom: Dp)

Apply additional space along each edge of the content in Dp: left, top, right and bottom.

Scope: Any
@Stable 
Modifier.padding(start: Dp, top: Dp, end: Dp, bottom: Dp)

Apply additional space along each edge of the content in Dp: start, top, end and bottom.

Scope: Any
@Stable 
Modifier.padding(horizontal: Dp, vertical: Dp)

Apply horizontal dp space along the left and right edges of the content, and vertical dp space along the top and bottom edges.

Scope: Any
@Stable 

Apply all dp of additional space along each edge of the content, left, top, right and bottom.

Scope: Any
@Stable 
Modifier.padding(paddingValues: PaddingValues)

Apply PaddingValues to the component as additional space along each edge of the content's left, top, right and bottom.

Scope: Any
@Stable 
Modifier.paddingFrom(alignmentLine: AlignmentLine, before: Dp, after: Dp)

A Modifier that can add padding to position the content according to specified distances from its bounds to an alignment line.

Scope: Any
@Stable 
Modifier.paddingFrom(
    alignmentLine: AlignmentLine,
    before: TextUnit,
    after: TextUnit
)

A Modifier that can add padding to position the content according to specified distances from its bounds to an alignment line.

Scope: Any
@Stable 
Modifier.paddingFromBaseline(top: Dp, bottom: Dp)

A Modifier that positions the content in a layout such that the distance from the top of the layout to the baseline of the first line of text in the content is top, and the distance from the baseline of the last line of text in the content to the bottom of the layout is bottom.

Scope: Any
@Stable 

A Modifier that positions the content in a layout such that the distance from the top of the layout to the baseline of the first line of text in the content is top, and the distance from the baseline of the last line of text in the content to the bottom of the layout is bottom.

Pointer

Scope: Any
Modifier.pointerInput(block: suspend PointerInputScope.() -> Unit)

This function is deprecated. Modifier.pointerInput must provide one or more 'key' parameters that define the identity of the modifier and determine when its previous input processing coroutine should be cancelled and a new effect launched for the new key.

Scope: Any
Modifier.pointerInput(
    key1: Any?,
    block: suspend PointerInputScope.() -> Unit
)

Create a modifier for processing pointer input within the region of the modified element.

Scope: Any
Modifier.pointerInput(
    key1: Any?,
    key2: Any?,
    block: suspend PointerInputScope.() -> Unit
)

Create a modifier for processing pointer input within the region of the modified element.

Scope: Any
Modifier.pointerInput(
    keys: vararg Any?,
    block: suspend PointerInputScope.() -> Unit
)

Create a modifier for processing pointer input within the region of the modified element.

Scope: Any
@ExperimentalComposeUiApi 
Modifier.pointerInteropFilter(
    requestDisallowInterceptTouchEvent: RequestDisallowInterceptTouchEvent?,
    onTouchEvent: (MotionEvent) -> Boolean
)

A special PointerInputModifier that provides access to the underlying MotionEvents originally dispatched to Compose.

Position

Scope: Any
@Stable 

Offset the content by (x dp, y dp).

Scope: Any

Offset the content by offset px.

Scope: Any
@Stable 
Modifier.offset(x: Dp, y: Dp)

Offset the content by (x dp, y dp).

Scope: Any
Modifier.offset(offset: Density.() -> IntOffset)

Offset the content by offset px.

Modifier.tabIndicatorOffset(currentTabPosition: TabPosition)

Modifier that takes up all the available width inside the TabRow, and then animates the offset of the indicator it is applied to, depending on the currentTabPosition.

Semantics

Scope: Any

Clears the semantics of all the descendant nodes and sets new semantics.

Scope: Any
@Stable 
Modifier.progressSemantics(
    value: Float,
    valueRange: ClosedFloatingPointRange<Float>,
    steps: Int
)

Contains the semantics required for a determinate progress indicator or the progress part of a slider, that represents progress within valueRange.

Scope: Any
@Stable 

Contains the semantics required for an indeterminate progress indicator, that represents the fact of the in-progress operation.

Scope: Any
Modifier.semantics(
    mergeDescendants: Boolean,
    properties: SemanticsPropertyReceiver.() -> Unit
)

Add semantics key/value pairs to the layout node, for use in testing, accessibility, etc.

Scroll

Scope: Any
Modifier.horizontalScroll(
    state: ScrollState,
    enabled: Boolean,
    flingBehavior: FlingBehavior?,
    reverseScrolling: Boolean
)

Modify element to allow to scroll horizontally when width of the content is bigger than max constraints allow.

Scope: Any
Modifier.nestedScroll(
    connection: NestedScrollConnection,
    dispatcher: NestedScrollDispatcher?
)

Modify element to make it participate in the nested scrolling hierarchy.

Scope: Any
@ExperimentalComposeUiApi 

This is a modifier that can be used to send relocation requests.

Scope: Any
Modifier.scrollable(
    state: ScrollableState,
    orientation: Orientation,
    enabled: Boolean,
    reverseDirection: Boolean,
    flingBehavior: FlingBehavior?,
    interactionSource: MutableInteractionSource?
)

Configure touch scrolling and flinging for the UI element in a single Orientation.

Scope: Any
Modifier.verticalScroll(
    state: ScrollState,
    enabled: Boolean,
    flingBehavior: FlingBehavior?,
    reverseScrolling: Boolean
)

Modify element to allow to scroll vertically when height of the content is bigger than max constraints allow.

Size

Scope: Any
Modifier.animateContentSize(
    animationSpec: FiniteAnimationSpec<IntSize>,
    finishedListener: (IntSizeIntSize) -> Unit
)

This modifier animates its own size when its child modifier (or the child composable if it is already at the tail of the chain) changes size.

Scope: Any
@Stable 
Modifier.aspectRatio(ratio: Float, matchHeightConstraintsFirst: Boolean)

Attempts to size the content to match a specified aspect ratio by trying to match one of the incoming constraints in the following order: Constraints.maxWidth, Constraints.maxHeight, Constraints.minWidth, Constraints.minHeight if matchHeightConstraintsFirst is false (which is the default), or Constraints.maxHeight, Constraints.maxWidth, Constraints.minHeight, Constraints.minWidth if matchHeightConstraintsFirst is true.

Scope: Any
@Stable 
Modifier.defaultMinSize(minWidth: Dp, minHeight: Dp)

Constrain the size of the wrapped layout only when it would be otherwise unconstrained: the minWidth and minHeight constraints are only applied when the incoming corresponding constraint is 0.

Scope: Any
@Stable 

Have the content fill (possibly only partially) the Constraints.maxHeight of the incoming measurement constraints, by setting the minimum height and the maximum height to be equal to the maximum height multiplied by fraction.

Scope: Any
@Stable 
Modifier.fillMaxSize(fraction: Float)

Have the content fill (possibly only partially) the Constraints.maxWidth and Constraints.maxHeight of the incoming measurement constraints, by setting the minimum width and the maximum width to be equal to the maximum width multiplied by fraction, as well as the minimum height and the maximum height to be equal to the maximum height multiplied by fraction.

Scope: Any
@Stable 

Have the content fill (possibly only partially) the Constraints.maxWidth of the incoming measurement constraints, by setting the minimum width and the maximum width to be equal to the maximum width multiplied by fraction.

Scope: Any
@Stable 
Modifier.height(intrinsicSize: IntrinsicSize)

Declare the preferred height of the content to be the same as the min or max intrinsic height of the content.

Scope: Any
@Stable 
Modifier.height(height: Dp)

Declare the preferred height of the content to be exactly heightdp.

Scope: Any
@Stable 
Modifier.heightIn(min: Dp, max: Dp)

Constrain the height of the content to be between mindp and maxdp as permitted by the incoming measurement Constraints.

Scope: Any
@Stable 
Modifier.onSizeChanged(onSizeChanged: (IntSize) -> Unit)

Invoke onSizeChanged when the size of the modifier immediately after it has changed.

Scope: Any
@Stable 

Declare the height of the content to be exactly the same as the min or max intrinsic height of the content.

Scope: Any
@Stable 

Declare the height of the content to be exactly heightdp.

Scope: Any
@Stable 
Modifier.requiredHeightIn(min: Dp, max: Dp)

Constrain the height of the content to be between mindp and maxdp.

Scope: Any
@Stable 

Declare the size of the content to be exactly sizedp width and height.

Scope: Any
@Stable 
Modifier.requiredSize(width: Dp, height: Dp)

Declare the size of the content to be exactly widthdp and heightdp.

Scope: Any
@Stable 
Modifier.requiredSizeIn(
    minWidth: Dp,
    minHeight: Dp,
    maxWidth: Dp,
    maxHeight: Dp
)

Constrain the width of the content to be between minWidthdp and maxWidthdp, and the height of the content to be between minHeightdp and maxHeightdp.

Scope: Any
@Stable 

Declare the width of the content to be exactly the same as the min or max intrinsic width of the content.

Scope: Any
@Stable 

Declare the width of the content to be exactly widthdp.

Scope: Any
@Stable 
Modifier.requiredWidthIn(min: Dp, max: Dp)

Constrain the width of the content to be between mindp and maxdp.

Scope: Any
@Stable 
Modifier.size(size: Dp)

Declare the preferred size of the content to be exactly sizedp square.

Scope: Any
@Stable 
Modifier.size(width: Dp, height: Dp)

Declare the preferred size of the content to be exactly widthdp by heightdp.

Scope: Any
@Stable 
Modifier.sizeIn(minWidth: Dp, minHeight: Dp, maxWidth: Dp, maxHeight: Dp)

Constrain the width of the content to be between minWidthdp and maxWidthdp and the height of the content to be between minHeightdp and maxHeightdp as permitted by the incoming measurement Constraints.

Scope: Any
@Stable 
Modifier.width(intrinsicSize: IntrinsicSize)

Declare the preferred width of the content to be the same as the min or max intrinsic width of the content.

Scope: Any
@Stable 
Modifier.width(width: Dp)

Declare the preferred width of the content to be exactly widthdp.

Scope: Any
@Stable 
Modifier.widthIn(min: Dp, max: Dp)

Constrain the width of the content to be between mindp and maxdp as permitted by the incoming measurement Constraints.

Scope: Any
@Stable 
Modifier.wrapContentHeight(
    align: Alignment.Vertical,
    unbounded: Boolean
)

Allow the content to measure at its desired height without regard for the incoming measurement minimum height constraint, and, if unbounded is true, also without regard for the incoming measurement maximum height constraint.

Scope: Any
@Stable 
Modifier.wrapContentSize(align: Alignment, unbounded: Boolean)

Allow the content to measure at its desired size without regard for the incoming measurement minimum width or minimum height constraints, and, if unbounded is true, also without regard for the incoming maximum constraints.

Scope: Any
@Stable 
Modifier.wrapContentWidth(
    align: Alignment.Horizontal,
    unbounded: Boolean
)

Allow the content to measure at its desired width without regard for the incoming measurement minimum width constraint, and, if unbounded is true, also without regard for the incoming measurement maximum width constraint.

Have the content fill the Constraints.maxHeight of the incoming measurement constraints by setting the minimum height to be equal to the maximum height multiplied by fraction.

Have the content fill the Constraints.maxWidth and Constraints.maxHeight of the parent measurement constraints by setting the minimum width to be equal to the maximum width multiplied by fraction and the minimum height to be equal to the maximum height multiplied by fraction.

Have the content fill the Constraints.maxWidth of the parent measurement constraints by setting the minimum width to be equal to the maximum width multiplied by fraction.

Scope: BoxScope
@Stable 

Size the element to match the size of the Box after all other content elements have been measured.

Scope: RowScope
@Stable 
Modifier.weight(weight: Float, fill: Boolean)

Size the element's width proportional to its weight relative to other weighted sibling elements in the Row.

@Stable 
Modifier.weight(weight: Float, fill: Boolean)

Size the element's height proportional to its weight relative to other weighted sibling elements in the Column.

Testing

Scope: Any
@Stable 

Applies a tag to allow modified element to be found in tests.

Transformations

Scope: Any
@Stable 
Modifier.rotate(degrees: Float)

Sets the degrees the view is rotated around the center of the composable.

Scope: Any
@Stable 
Modifier.scale(scaleX: Float, scaleY: Float)

Scale the contents of the composable by the following scale factors along the horizontal and vertical axis respectively.

Scope: Any
@Stable 
Modifier.scale(scale: Float)

Scale the contents of both the horizontal and vertical axis uniformly by the same scale factor.

Scope: Any
Modifier.transformable(
    state: TransformableState,
    lockRotationOnZoomPan: Boolean,
    enabled: Boolean
)

Enable transformation gestures of the modified UI element.

Other

Scope: Any
Modifier.composed(
    inspectorInfo: InspectorInfo.() -> Unit,
    factory: Modifier.() -> Modifier
)

Declare a just-in-time composition of a Modifier that will be composed for each element it modifies.

Scope: Any

Materialize any instance-specific composed modifiers for applying to a raw tree node.