# androidx.compose.ui

Common/AllAndroid/JVM

## Interfaces

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment` | An interface to calculate the position of a sized box inside an available space. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Horizontal` | An interface to calculate the position of box of a certain width inside an available width. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical` | An interface to calculate the position of a box of a certain height inside an available height. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | An ordered, immutable collection of `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element` that decorate or add behavior to Compose UI elements. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element` | A single element contained within a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` chain. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/MotionDurationScale` | Provides a duration scale for motion such as animations. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope` | A receiver scope that provides access to the properties of the current media environment. | Cmn |

## Classes

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/BiasAbsoluteAlignment` | An `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment` specified by bias: for example, a bias of -1 represents alignment to the left/top, a bias of 0 will represent centering, and a bias of 1 will represent right/bottom. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/BiasAbsoluteAlignment.Horizontal` | An `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Horizontal` specified by bias: for example, a bias of -1 represents alignment to the left, a bias of 0 will represent centering, and a bias of 1 will represent right. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/BiasAlignment` | An `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment` specified by bias: for example, a bias of -1 represents alignment to the start/top, a bias of 0 will represent centering, and a bias of 1 will represent end/bottom. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/BiasAlignment.Horizontal` | An `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Horizontal` specified by bias: for example, a bias of -1 represents alignment to the start, a bias of 0 will represent centering, and a bias of 1 will represent end. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/BiasAlignment.Vertical` | An `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical` specified by bias: for example, a bias of -1 represents alignment to the top, a bias of 0 will represent centering, and a bias of 1 will represent bottom. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/CombinedModifier` | A node in a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` chain. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/FrameRateCategory` | A type-safe representation of a frame rate category for a display or application. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Node` | The longer-lived object that is created for each `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element` applied to a `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Layout.composable#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/R` |   | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/R.id` |   | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope.FoldOrientation` | Describes the hardware orientation of a physical folding hinge. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope.FoldState` | Describes the layout fold state of the window, typically on a foldable device. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope.KeyboardKind` | Describes the kind of keyboard available. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope.PointerPrecision` | Describes the precision of the available pointing devices. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope.ViewingDistance` | Describes the typical distance between the user and the screen. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope.WindowFold` | Represents a single physical fold or hinge intersecting the window. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope.WindowPosture` | Represents the overall physical posture of the window, aggregating all underlying hardware folding features into a unified state. | Cmn |

## Objects

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/AbsoluteAlignment` | A collection of common `https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment`s unaware of the layout direction. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/AndroidComposeUiFlags` | This is a collection of flags which are used to guard against regressions in some of the "riskier" refactors or new feature support that is added to this module. | android |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/ComposeUiFlags` | This is a collection of flags which are used to guard against regressions in some of the "riskier" refactors or new feature support that is added to this module. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Companion` | The companion object `Modifier` is the empty, default, or starter `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that contains no `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Element`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/MotionDurationScale.Key` |   | Cmn |

## Annotations

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/ExperimentalComposeUiApi` |   | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/ExperimentalMediaQueryApi` |   | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/InternalComposeUiApi` | Unstable API for use only between `compose-ui` modules sharing the same exact version, subject to change without notice in major, minor, or patch releases. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/UiComposable` | An annotation that can be used to mark a composable function as being expected to be use in a composable function that is also marked or inferred to be marked as a `https://developer.android.com/reference/kotlin/androidx/compose/ui/UiComposable`. | Cmn |

## Composables

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/derivedMediaQuery.composable` | Evaluates a query against the current `https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope`, wrapped in a `https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary#derivedStateOf(kotlin.Function0)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/mediaQuery.composable` | Evaluates a query against the current `https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope`. | Cmn |

## Modifiers

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/composed.modifier` | Declare a just-in-time composition of a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` that will be composed for each element it modifies. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/keepScreenOn.modifier` | A modifier that keeps the device screen on as long as it is part of the composition on supported platforms. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/preferredFrameRate.modifier` | Set a requested frame rate on Composable | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/sensitiveContent.modifier` | This modifier hints that the composable renders sensitive content (i.e. username, password, credit card etc) on the screen, and the content should be protected during screen share in supported environments. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/zIndex.modifier` | Creates a modifier that controls the drawing order for the children of the same layout parent. | Cmn |

## Extension functions summary

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composer.https://developer.android.com/reference/kotlin/androidx/compose/ui/package-summary#(androidx.compose.runtime.Composer).materialize(androidx.compose.ui.Modifier)(modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier)` Materialize any instance-specific `https://developer.android.com/reference/kotlin/androidx/compose/ui/composed.modifier#(androidx.compose.ui.Modifier).composed(kotlin.Function1,kotlin.Function1)` for applying to a raw tree node. | Cmn |
| `inline T` | `@https://developer.android.com/reference/kotlin/androidx/compose/ui/ExperimentalMediaQueryApi <T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/compose/runtime/CompositionLocalAccessorScope.https://developer.android.com/reference/kotlin/androidx/compose/ui/package-summary#(androidx.compose.runtime.CompositionLocalAccessorScope).mediaQuery(kotlin.Function1)(query: https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope.() -> T)` Evaluates a query against the current `https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope` from a `https://developer.android.com/reference/kotlin/androidx/compose/runtime/CompositionLocalAccessorScope`. | Cmn |
| `inline T` | `@https://developer.android.com/reference/kotlin/androidx/compose/ui/ExperimentalMediaQueryApi <T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/compose/ui/node/CompositionLocalConsumerModifierNode.https://developer.android.com/reference/kotlin/androidx/compose/ui/package-summary#(androidx.compose.ui.node.CompositionLocalConsumerModifierNode).mediaQuery(kotlin.Function1)(query: https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope.() -> T)` Evaluates a query against the current `https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope` from a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Node`. | Cmn |

## Top-level properties summary

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/runtime/ProvidableCompositionLocal<https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope>` | `@https://developer.android.com/reference/kotlin/androidx/compose/ui/ExperimentalMediaQueryApi https://developer.android.com/reference/kotlin/androidx/compose/ui/package-summary#LocalUiMediaScope()` A `https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope` provides information about the window environment and input devices, enabling adaptive layouts and behavior. | Cmn |

## Extension functions

### Composer.materialize

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/ComposedModifier.kt+function:materialize) Added in [1.5.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.5.0)

```
fun Composer.materialize(modifier: Modifier): Modifier
```

Materialize any instance-specific `https://developer.android.com/reference/kotlin/androidx/compose/ui/composed.modifier#(androidx.compose.ui.Modifier).composed(kotlin.Function1,kotlin.Function1)` for applying to a raw tree node. Call right before setting the returned modifier on an emitted node. You almost certainly do not need to call this function directly.

### CompositionLocalAccessorScope.mediaQuery

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/MediaQuery.kt+function:mediaQuery) Added in [1.12.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.12.0)

```
@ExperimentalMediaQueryApi
inline fun <T : Any?> CompositionLocalAccessorScope.mediaQuery(query: UiMediaScope.() -> T): T
```

Evaluates a query against the current `https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope` from a `https://developer.android.com/reference/kotlin/androidx/compose/runtime/CompositionLocalAccessorScope`.

If called within a snapshot-aware context, the specific property reads within the query will be tracked, and the scope will be invalidated when any of those properties change.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.style.MutableStyleState
import androidx.compose.foundation.style.Style
import androidx.compose.foundation.style.hovered
import androidx.compose.foundation.style.pressed
import androidx.compose.foundation.style.size
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.UiMediaScope.PointerPrecision
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.mediaQuery
import androidx.compose.ui.unit.dp

// Create a styleable clickable box
@Composable
fun ClickableStyleableBox(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    style: Style = Style,
) {
    val interactionSource = remember { MutableInteractionSource() }
    val styleState = remember { MutableStyleState(interactionSource) }
    Box(
        modifier =
            modifier
                .clickable(interactionSource = interactionSource, onClick = onClick)
                .styleable(styleState, style)
    )
}

ClickableStyleableBox(
    onClick = {},
    style = {
        background(Color.Green)

        // Dynamic size based on window Size
        if (mediaQuery { windowWidth > 600.dp && windowHeight > 400.dp }) {
            size(200.dp)
        } else {
            size(150.dp)
        }

        // Hover state for fine pointer input
        if (mediaQuery { pointerPrecision == PointerPrecision.Fine }) {
            hovered { background(Color.Yellow) }
        }
        pressed { background(Color.Red) }
    },
)
```

| Parameters |
|---|---|
| `query: https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope.() -> T` | A lambda expression with `https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope` as its receiver, representing the condition to evaluate. |

| Returns |
|---|---|
| `T` | The immediate result of the query. |

### CompositionLocalConsumerModifierNode.mediaQuery

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/MediaQuery.kt+function:mediaQuery) Added in [1.12.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.12.0)

```
@ExperimentalMediaQueryApi
inline fun <T : Any?> CompositionLocalConsumerModifierNode.mediaQuery(query: UiMediaScope.() -> T): T
```

Evaluates a query against the current `https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope` from a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Node`.

This function is designed to be used within a `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.Node` that implements `https://developer.android.com/reference/kotlin/androidx/compose/ui/node/CompositionLocalConsumerModifierNode`.

If called within a snapshot-aware context like `https://developer.android.com/reference/kotlin/androidx/compose/ui/node/LayoutModifierNode#(androidx.compose.ui.layout.MeasureScope).measure(androidx.compose.ui.layout.Measurable,androidx.compose.ui.unit.Constraints)` or `https://developer.android.com/reference/kotlin/androidx/compose/ui/node/DrawModifierNode#(androidx.compose.ui.graphics.drawscope.ContentDrawScope).draw()` callbacks, the reads within the query will be tracked, and the scope will be invalidated when the properties change.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.style.size
import androidx.compose.runtime.Stable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.Measurable
import androidx.compose.ui.layout.MeasureResult
import androidx.compose.ui.layout.MeasureScope
import androidx.compose.ui.mediaQuery
import androidx.compose.ui.node.CompositionLocalConsumerModifierNode
import androidx.compose.ui.node.LayoutModifierNode
import androidx.compose.ui.node.ModifierNodeElement
import androidx.compose.ui.unit.Constraints
import androidx.compose.ui.unit.constrainHeight
import androidx.compose.ui.unit.constrainWidth
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.offset

// Example of a custom padding modifier that uses [mediaQuery] within a [Modifier.Node].
class AdaptivePaddingNode :
    Modifier.Node(), LayoutModifierNode, CompositionLocalConsumerModifierNode {
    override fun MeasureScope.measure(
        measurable: Measurable,
        constraints: Constraints,
    ): MeasureResult {
        val isLargeScreen = mediaQuery { windowWidth > 600.dp && windowHeight > 400.dp }

        // Adjust padding or size based on the query result
        val extraPadding = if (isLargeScreen) 80.dp.roundToPx() else 16.dp.roundToPx()
        val totalPaddingOnAxis = 2 * extraPadding

        // Measure the content with added padding
        val placeable =
            measurable.measure(constraints.offset(-totalPaddingOnAxis, -totalPaddingOnAxis))

        val width = constraints.constrainWidth(placeable.width + totalPaddingOnAxis)
        val height = constraints.constrainHeight(placeable.height + totalPaddingOnAxis)

        return layout(width, height) { placeable.place(extraPadding, extraPadding) }
    }
}

class AdaptivePaddingElement : ModifierNodeElement<AdaptivePaddingNode>() {
    override fun create() = AdaptivePaddingNode()

    override fun update(node: AdaptivePaddingNode) {}

    override fun equals(other: Any?) = other === this

    override fun hashCode() = 0
}

@Stable fun Modifier.adaptivePadding(): Modifier = this.then(AdaptivePaddingElement())

Box(Modifier.adaptivePadding().background(Color.Blue).size(400.dp))
```

| Parameters |
|---|---|
| `query: https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope.() -> T` | A lambda expression with `https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope` as its receiver, representing the condition to evaluate. |

| Returns |
|---|---|
| `T` | The immediate result of the query. |

## Top-level properties

### LocalUiMediaScope

Cmn Artifact: [androidx.compose.ui:ui](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/MediaQuery.kt+symbol:LocalUiMediaScope) Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.11.0)

```
@ExperimentalMediaQueryApi
val LocalUiMediaScope: ProvidableCompositionLocal<UiMediaScope>
```

A `https://developer.android.com/reference/kotlin/androidx/compose/ui/UiMediaScope` provides information about the window environment and input devices, enabling adaptive layouts and behavior. This `CompositionLocal` is the primary mechanism to access the scope within the composable tree.

It is typically provided at the root of an application. Accessing it without a provider will result in a runtime error.