# magnifier

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/foundation/magnifier.modifier#(androidx.compose.ui.Modifier).magnifier(kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Float,androidx.compose.ui.unit.DpSize,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Boolean)( sourceCenter: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density.() -> https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset, magnifierCenter: (https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density.() -> https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset)?, onSizeChanged: ((https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpSize) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, zoom: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, size: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpSize, cornerRadius: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, elevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, clip: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html )` Shows a `https://developer.android.com/reference/android/widget/Magnifier.html` widget that shows an enlarged version of the content at `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).magnifier(kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Float,androidx.compose.ui.unit.DpSize,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Boolean)` relative to the current layout node. | android |

## Functions

### Modifier.magnifier

android Artifact: [androidx.compose.foundation:foundation](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/Magnifier.android.kt+function:magnifier)

```
fun Modifier.magnifier(
    sourceCenter: Density.() -> Offset,
    magnifierCenter: (Density.() -> Offset)? = null,
    onSizeChanged: ((DpSize) -> Unit)? = null,
    zoom: Float = Float.NaN,
    size: DpSize = DpSize.Unspecified,
    cornerRadius: Dp = Dp.Unspecified,
    elevation: Dp = Dp.Unspecified,
    clip: Boolean = true
): Modifier
```

Shows a `https://developer.android.com/reference/android/widget/Magnifier.html` widget that shows an enlarged version of the content at `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).magnifier(kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Float,androidx.compose.ui.unit.DpSize,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Boolean)` relative to the current layout node.

This function returns a no-op modifier on API levels below P (28), since the framework does not support the `https://developer.android.com/reference/android/widget/Magnifier.html` widget on those levels. However, even on higher API levels, not all magnifier features are supported on all platforms. Please refer to parameter explanations below to learn more about supported features on different platform versions.

This function does not allow configuration of `https://developer.android.com/reference/android/widget/Magnifier.Builder.html#setSourceBounds(int, int, int, int)` since the magnifier widget does not support constraining to the bounds of composables.

```kotlin
import androidx.compose.foundation.gestures.detectDragGestures
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.magnifier
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.input.pointer.pointerInput

// When the magnifier center position is Unspecified, it is hidden.
// Hide the magnifier until a drag starts.
var magnifierCenter by remember { mutableStateOf(Offset.Unspecified) }

if (Build.VERSION.SDK_INT < 28) {
    Text("Magnifier is not supported on this platform.")
} else {
    Box(
        Modifier.magnifier(sourceCenter = { magnifierCenter }, zoom = 2f)
            .pointerInput(Unit) {
                detectDragGestures(
                    // Show the magnifier at the original pointer position.
                    onDragStart = { magnifierCenter = it },
                    // Make the magnifier follow the finger while dragging.
                    onDrag = { _, delta -> magnifierCenter += delta },
                    // Hide the magnifier when the finger lifts.
                    onDragEnd = { magnifierCenter = Offset.Unspecified },
                    onDragCancel = { magnifierCenter = Offset.Unspecified },
                )
            }
            .drawBehind {
                // Some concentric circles to zoom in on.
                for (diameter in 2 until size.maxDimension.toInt() step 10) {
                    drawCircle(color = Color.Black, radius = diameter / 2f, style = Stroke())
                }
            }
    )
}
```

| Parameters |
|---|---|
| `sourceCenter: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density.() -> https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset` | The offset of the center of the magnified content. Measured in pixels from the top-left of the layout node this modifier is applied to. This offset is passed to `https://developer.android.com/reference/android/widget/Magnifier.html#show(float, float)`. |
| `magnifierCenter: (https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density.() -> https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset)? = null` | The offset of the magnifier widget itself, where the magnified content is rendered over the original content. Measured in density-independent pixels from the top-left of the layout node this modifier is applied to. If left null or returns an `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpOffset#Unspecified()` value, the magnifier widget will be placed at a default offset relative to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).magnifier(kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Float,androidx.compose.ui.unit.DpSize,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Boolean)`. The value of that offset is specified by the system. |
| `onSizeChanged: ((https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpSize) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | An optional callback that will be invoked when the magnifier widget is initialized to report on its actual size. This can be useful when `https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#(androidx.compose.ui.Modifier).magnifier(kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Float,androidx.compose.ui.unit.DpSize,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,kotlin.Boolean)` parameter is left unspecified. |
| `zoom: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html = Float.NaN` | See `https://developer.android.com/reference/android/widget/Magnifier.html#setZoom(float)`. Only supported on API 29+. |
| `size: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpSize = DpSize.Unspecified` | See `https://developer.android.com/reference/android/widget/Magnifier.Builder.html#setSize(int, int)`. Only supported on API 29+. |
| `cornerRadius: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = Dp.Unspecified` | See `https://developer.android.com/reference/android/widget/Magnifier.Builder.html#setCornerRadius(float)`. Only supported on API 29+. |
| `elevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = Dp.Unspecified` | See `https://developer.android.com/reference/android/widget/Magnifier.Builder.html#setElevation(float)`. Only supported on API 29+. |
| `clip: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | See `https://developer.android.com/reference/android/widget/Magnifier.Builder.html#setClippingEnabled(boolean)`. Only supported on API 29+. |