Jetpack Compose Modifiers

This comprehensive guide covers all Jetpack Compose modifiers, as detailed in the official Android documentation. Modifiers are organized by category, with each including its Kotlin signature, applicable scope, description, and, for selected modifiers, a detailed breakdown of parameters with their types and usage. Navigate to each category using the chips below.

Actions Alignment Animation Border Drawing Focus Graphics Keyboard Layout Padding Pointer Position Semantics Scroll Size Testing Transformations Other

Actions

Modifier Signature Scope Description

Modifier.anchoredDraggable(
    state: AnchoredDraggableState<T>,
    orientation: Orientation,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    overscrollEffect: OverscrollEffect? = null,
    flingBehavior: FlingBehavior? = null
)

Parameter	Type	Usage
state	AnchoredDraggableState<T>	Manages the state of the draggable item, including current and target anchor points.
orientation	Orientation	Specifies whether dragging is horizontal or vertical.
enabled	Boolean	Determines if the dragging is enabled (default: true).
interactionSource	MutableInteractionSource?	Optional source for collecting interaction events like drag start/end.
overscrollEffect	OverscrollEffect?	Optional effect for overscrolling behavior, like bounce or stretch.
flingBehavior	FlingBehavior?	Optional behavior for fling animations after dragging.

Any

Enable drag gestures between a set of predefined values.

Modifier.anchoredDraggable(
    state: AnchoredDraggableState<T>,
    reverseDirection: Boolean,
    orientation: Orientation,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    overscrollEffect: OverscrollEffect? = null,
    flingBehavior: FlingBehavior? = null
)

Any

Enable drag gestures between a set of predefined values, with option to reverse direction.

Modifier.clickable(
    enabled: Boolean = true,
    onClickLabel: String? = null,
    role: Role? = null,
    interactionSource: MutableInteractionSource? = null,
    onClick: () -> Unit
)

Any

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

Modifier.combinedClickable(
    enabled: Boolean = true,
    onClickLabel: String? = null,
    role: Role? = null,
    interactionSource: MutableInteractionSource? = null,
    onLongClickLabel: String? = null,
    onLongClick: (() -> Unit)? = null,
    onDoubleClick: (() -> Unit)? = null,
    onClick: () -> Unit
)

Any

Configure component to receive click, double click, and long click events.

Alignment

Modifier Signature Scope Description

Modifier.align(
    alignment: Alignment.Vertical
)

Parameter	Type	Usage
alignment	Alignment.Vertical	Specifies the vertical alignment (e.g., Top, Center, Bottom) within the Row.

RowScope

Align the element vertically within the Row.

Modifier.align(
    alignment: Alignment
)

BoxScope

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

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

RowScope, ColumnScope

Position the element such that its alignment line, determined by alignmentLineBlock, aligns with sibling elements.

Modifier.alignByBaseline()

RowScope

Align the element vertically by its baseline within the Row.

Animation

Modifier Signature Scope Description

@ExperimentalSharedTransitionApi
Modifier.animateBounds(
    lookaheadScope: LookaheadScope,
    modifier: Modifier,
    boundsTransform: BoundsTransform,
    animateMotionFrameOfReference: Boolean = false
)

Parameter	Type	Usage
lookaheadScope	LookaheadScope	Scope for predictive layout calculations to optimize animations.
modifier	Modifier	The modifier to apply within the animation context.
boundsTransform	BoundsTransform	Defines how bounds (size/position) transition during animation.
animateMotionFrameOfReference	Boolean	Controls whether motion is relative to the frame of reference (default: false).

Any

Modifier to animate layout changes (position and/or size) that occur within a LookaheadScope.

Modifier.animateItem(
    fadeInSpec: FiniteAnimationSpec<Float>? = null,
    placementSpec: FiniteAnimationSpec<IntOffset>? = null,
    fadeOutSpec: FiniteAnimationSpec<Float>? = null
)

LazyItemScope

Animates item appearance (fade in), disappearance (fade out), and placement changes in lazy layouts.

Modifier.animateContentSize(
    animationSpec: FiniteAnimationSpec<IntSize> = spring(),
    alignment: Alignment = Alignment.TopStart
)

Any

Animates changes to the content size with the specified animation spec and alignment.

Border

Modifier Signature Scope Description

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

Parameter	Type	Usage
border	BorderStroke	Defines the border's width and style (e.g., solid, dashed).
shape	Shape	Specifies the shape of the border (e.g., RectangleShape, RoundedCornerShape).

Any

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

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

Any

Add border with specified width, color, and shape, and clip the content.

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

Any

Add border with specified width, brush (gradient or pattern), and shape, and clip the content.

Drawing

Modifier Signature Scope Description

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

Parameter	Type	Usage
color	Color	Sets the solid color for the background.
shape	Shape	Defines the shape of the background (e.g., RectangleShape, CircleShape).

Any

Draws shape with a solid color behind the content.

Modifier.background(
    brush: Brush,
    shape: Shape
)

Any

Draws shape with a gradient or pattern brush behind the content.

Modifier.clip(
    shape: Shape
)

Any

Clip the content to the specified shape.

Modifier.clipToBounds()

Any

Clip the content to the bounds of the composable.

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

Any

Draw behind the content using a custom drawing block.

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

Any

Draw content with cached drawing operations for performance.

Modifier.drawWithContent(
    onDraw: DrawScope.() -> Unit
)

Any

Draw over the content using a custom drawing block.

Modifier.paint(
    painter: Painter,
    sizeToIntrinsics: Boolean = true,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = 1.0f,
    colorFilter: ColorFilter? = null
)

Any

Draw a painter (e.g., image or vector) behind the content.

Modifier.shadow(
    elevation: Dp,
    shape: Shape = RectangleShape,
    clip: Boolean = elevation > 0.dp,
    ambientColor: Color = Color.Black,
    spotColor: Color = Color.Black
)

Any

Creates a graphicsLayer that draws a shadow.

Focus

Modifier Signature Scope Description

Modifier.focusable(
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null
)

Parameter	Type	Usage
enabled	Boolean	Determines if the component can receive focus (default: true).
interactionSource	MutableInteractionSource?	Optional source for collecting focus interaction events.

Any

Make the component focusable for accessibility and keyboard navigation.

Modifier.focusGroup()

Any

Group multiple focusable components to be navigated as a single unit.

Modifier.focusProperties(
    block: FocusProperties.() -> Unit
)

Any

Customize focus behavior, such as focus order or traversal.

Modifier.focusRequester(
    focusRequester: FocusRequester
)

Any

Associate a focus requester to programmatically control focus.

Modifier.focusTarget()

Any

Make the component focusable without additional configuration.

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

Any

Observe focus state changes (e.g., focused or unfocused).

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

Any

Observe focus events for the component and its children.

Graphics

Modifier Signature Scope Description

Modifier.graphicsLayer(
    block: GraphicsLayerScope.() -> Unit
)

Parameter	Type	Usage
block	GraphicsLayerScope.() -> Unit	Configures properties like scale, rotation, or alpha for the graphics layer.

Any

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

Keyboard

Modifier Signature Scope Description

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

Parameter	Type	Usage
onKeyEvent	(KeyEvent) -> Boolean	Callback to handle hardware key events, returning true if consumed.

Any

Intercept hardware key events when the component or its children are focused.

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

Any

Intercept hardware key events before they are processed by children.

Layout

Modifier Signature Scope Description

Modifier.layoutId(
    layoutId: Any
)

Parameter	Type	Usage
layoutId	Any	Unique identifier for the element within its parent for layout purposes.

Any

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

Modifier.layout(
    measure: MeasureScope.(Measurable, Constraints) -> MeasureResult
)

Any

Customize the layout measurement and placement of the composable.

Modifier.onGloballyPositioned(
    onGloballyPositioned: (LayoutCoordinates) -> Unit
)

Any

Invoke a callback with the LayoutCoordinates when the global position changes.

Modifier.onPlaced(
    onPlaced: (LayoutCoordinates) -> Unit
)

Any

Invoke a callback with the LayoutCoordinates when the composable is placed.

Modifier.onSizeChanged(
    onSizeChanged: (IntSize) -> Unit
)

Any

Invoke a callback when the size of the composable changes.

Padding

Modifier Signature Scope Description

Modifier.padding(
    all: Dp
)

Parameter	Type	Usage
all	Dp	Sets equal padding (in density-independent pixels) for all edges.

Any

Apply equal padding to all edges of the content.

Modifier.padding(
    horizontal: Dp,
    vertical: Dp
)

Any

Apply padding to horizontal and vertical edges separately.

Modifier.padding(
    start: Dp,
    top: Dp,
    end: Dp,
    bottom: Dp
)

Any

Apply padding to each edge individually.

Modifier.padding(
    paddingValues: PaddingValues
)

Any

Apply padding using a PaddingValues object.

Modifier.absolutePadding(
    left: Dp,
    top: Dp,
    right: Dp,
    bottom: Dp
)

Any

Apply padding ignoring layout direction (e.g., left is always left).

Modifier.statusBarsPadding()

Any

Add padding to accommodate status bar insets.

Modifier.navigationBarsPadding()

Any

Add padding to accommodate navigation bar insets.

Modifier.systemBarsPadding()

Any

Add padding to accommodate system bar insets (status and navigation).

Modifier.imePadding()

Any

Add padding to accommodate the on-screen keyboard.

Pointer

Modifier Signature Scope Description

Modifier.pointerInput(
    key1: Any?,
    block: PointerInputEventHandler
)

Parameter	Type	Usage
key1	Any?	Optional key to trigger recomposition when changed.
block	PointerInputEventHandler	Handles pointer input events like taps or drags within the element.

Any

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

Modifier.draggable(
    state: DraggableState,
    orientation: Orientation,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    reverseDirection: Boolean = false,
    canDrag: ((Offset) -> Boolean)? = null,
    startDragImmediately: Boolean = false
)

Any

Enable drag gestures in a single orientation.

Modifier.swipeable(
    state: SwipeableState<T>,
    anchors: Map<Float, T>,
    orientation: Orientation,
    enabled: Boolean = true,
    reverseDirection: Boolean = false,
    interactionSource: MutableInteractionSource? = null,
    thresholds: (T, T) -> ThresholdConfig = { _, _ -> FixedThreshold(56.dp) },
    resistance: ResistanceConfig? = null
)

Any

Enable swipe gestures between anchored values.

Position

Modifier Signature Scope Description

Modifier.offset(
    x: Dp,
    y: Dp
)

Parameter	Type	Usage
x	Dp	Horizontal offset in density-independent pixels.
y	Dp	Vertical offset in density-independent pixels.

Any

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

Modifier.offset(
    offset: (density: Density) -> IntOffset
)

Any

Offset the content using a lambda that calculates the offset based on density.

Modifier.absoluteOffset(
    x: Dp,
    y: Dp
)

Any

Offset the content ignoring layout direction.

Modifier.absoluteOffset(
    offset: (density: Density) -> IntOffset
)

Any

Offset the content using a lambda, ignoring layout direction.

Semantics

Modifier Signature Scope Description

Modifier.semantics(
    mergeDescendants: Boolean = false,
    properties: SemanticsPropertyReceiver.() -> Unit
)

Parameter	Type	Usage
mergeDescendants	Boolean	If true, merges descendant semantics into a single node (default: false).
properties	SemanticsPropertyReceiver.() -> Unit	Configures accessibility properties like label or role.

Any

Add custom semantics for accessibility purposes.

Modifier.clearAndSetSemantics(
    properties: SemanticsPropertyReceiver.() -> Unit
)

Any

Replace all existing semantics with new properties.

Modifier.progressSemantics(
    value: Float,
    valueRange: ClosedFloatingPointRange<Float>,
    steps: Int = 0
)

Any

Add semantics for a determinate progress indicator.

Modifier.progressSemantics()

Any

Add semantics for an indeterminate progress indicator.

Scroll

Modifier Signature Scope Description

Modifier.scrollable(
    state: ScrollableState,
    orientation: Orientation,
    enabled: Boolean = true,
    reverseDirection: Boolean = false,
    flingBehavior: FlingBehavior? = null,
    interactionSource: MutableInteractionSource? = null
)

Parameter	Type	Usage
state	ScrollableState	Manages the scroll state, including position and velocity.
orientation	Orientation	Defines scroll direction (horizontal or vertical).
enabled	Boolean	Enables or disables scrolling (default: true).
reverseDirection	Boolean	Reverses the scroll direction (default: false).
flingBehavior	FlingBehavior?	Optional behavior for fling animations after scrolling.
interactionSource	MutableInteractionSource?	Optional source for collecting scroll interaction events.

Any

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

Modifier.nestedScroll(
    connection: NestedScrollConnection,
    dispatcher: NestedScrollDispatcher? = null
)

Any

Enable nested scrolling for the composable.

Size

Modifier Signature Scope Description

Modifier.size(
    size: Dp
)

Parameter	Type	Usage
size	Dp	Sets both width and height to the same density-independent pixel value.

Any

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

Modifier.size(
    width: Dp,
    height: Dp
)

Any

Declare the preferred width and height of the content.

Modifier.fillMaxWidth(
    fraction: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f
)

Any

Fill the maximum available width, optionally by a fraction.

Modifier.fillMaxHeight(
    fraction: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f
)

Any

Fill the maximum available height, optionally by a fraction.

Modifier.fillMaxSize(
    fraction: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f
)

Any

Fill the maximum available width and height, optionally by a fraction.

Modifier.requiredSize(
    size: Dp
)

Any

Force the content to be exactly size dp square, ignoring constraints.

Modifier.requiredSize(
    width: Dp,
    height: Dp
)

Any

Force the content to specific width and height, ignoring constraints.

Modifier.width(
    width: Dp
)

Any

Declare the preferred width of the content.

Modifier.height(
    height: Dp
)

Any

Declare the preferred height of the content.

Modifier.requiredWidth(
    width: Dp
)

Any

Force the content to a specific width, ignoring constraints.

Modifier.requiredHeight(
    height: Dp
)

Any

Force the content to a specific height, ignoring constraints.

Modifier.widthIn(
    min: Dp = Dp.Unspecified,
    max: Dp = Dp.Unspecified
)

Any

Constrain the width between optional min and max values.

Modifier.heightIn(
    min: Dp = Dp.Unspecified,
    max: Dp = Dp.Unspecified
)

Any

Constrain the height between optional min and max values.

Modifier.sizeIn(
    minWidth: Dp = Dp.Unspecified,
    maxWidth: Dp = Dp.Unspecified,
    minHeight: Dp = Dp.Unspecified,
    maxHeight: Dp = Dp.Unspecified
)

Any

Constrain both width and height between optional min and max values.

Testing

Modifier Signature Scope Description

Modifier.testTag(
    tag: String
)

Parameter	Type	Usage
tag	String	Unique identifier for locating the element in UI tests.

Any

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

Transformations

Modifier Signature Scope Description

Modifier.rotate(
    degrees: Float
)

Parameter	Type	Usage
degrees	Float	Angle in degrees to rotate the composable around its center.

Any

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

Modifier.scale(
    scale: Float
)

Any

Scale the content uniformly on both axes by the same scale factor.

Modifier.scale(
    scaleX: Float,
    scaleY: Float
)

Any

Scale the content independently on the horizontal and vertical axes.

Modifier.transformable(
    state: TransformableState,
    lockRotationOnZoom: Boolean = false,
    enabled: Boolean = true
)

Any

Enable pinch-to-zoom, rotate, and pan gestures.

Other

Modifier Signature Scope Description

Modifier.blur(
    radius: Dp,
    edgeTreatment: BlurredEdgeTreatment
)

Parameter	Type	Usage
radius	Dp	Blur radius in density-independent pixels.
edgeTreatment	BlurredEdgeTreatment	Defines how edges are handled during blur (e.g., clipped or faded).

Any

Draw content blurred with the specified radii.

Modifier.composed(
    inspectorInfo: InspectorInfo.() -> Unit = noInspectorInfo,
    factory: @Composable Modifier.() -> Modifier
)

Any

Declare a just-in-time composition of a Modifier.

Modifier.then(
    other: Modifier
)

Any

Chain another modifier to this modifier.

Modifier.zIndex(
    zIndex: Float
)

Any

Set the z-order of the composable for layering.

Modifier.weight(
    weight: Float,
    fill: Boolean = true
)

RowScope, ColumnScope

Assign a weight to distribute space in a Row or Column.

Modifier.wrapContentWidth(
    align: Alignment.Horizontal = Alignment.CenterHorizontally,
    unbounded: Boolean = false
)

Any

Size the content to its intrinsic width, with optional alignment.

Modifier.wrapContentHeight(
    align: Alignment.Vertical = Alignment.CenterVertically,
    unbounded: Boolean = false
)

Any

Size the content to its intrinsic height, with optional alignment.

Modifier.wrapContentSize(
    align: Alignment = Alignment.Center,
    unbounded: Boolean = false
)

Any

Size the content to its intrinsic size, with optional alignment.

Modifier.defaultMinSize(
    minWidth: Dp = Dp.Unspecified,
    minHeight: Dp = Dp.Unspecified
)

Any

Set default minimum size constraints for the content.

Modifier.aspectRatio(
    ratio: Float,
    matchHeightConstraintsFirst: Boolean = false
)

Any

Maintain a specific aspect ratio for the content.

Modifier.alpha(
    alpha: Float
)

Any

Set the opacity of the content.

Complete Jetpack Compose Modifiers Reference

Jetpack Compose Modifiers

Actions

Alignment

Animation

Border

Drawing

Focus

Graphics

Keyboard

Layout

Padding

Pointer

Position

Semantics

Scroll

Size

Testing

Transformations

Other

Post a Comment