{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

MagnifierKt

public final class MagnifierKt


Summary

Public methods

static final @NonNull Modifier
@ExperimentalFoundationApi
magnifier(
    @NonNull Modifier receiver,
    @ExtensionFunctionType @NonNull Function1<@NonNull Density, @NonNull Offset> sourceCenter,
    @ExtensionFunctionType @NonNull Function1<@NonNull Density, @NonNull Offset> magnifierCenter,
    float zoom,
    @NonNull MagnifierStyle style,
    Function1<@NonNull DpSizeUnit> onSizeChanged
)

Shows a Magnifier widget that shows an enlarged version of the content at sourceCenter relative to the current layout node.

Public methods

magnifier

@ExperimentalFoundationApi
public static final @NonNull Modifier magnifier(
    @NonNull Modifier receiver,
    @ExtensionFunctionType @NonNull Function1<@NonNull Density, @NonNull Offset> sourceCenter,
    @ExtensionFunctionType @NonNull Function1<@NonNull Density, @NonNull Offset> magnifierCenter,
    float zoom,
    @NonNull MagnifierStyle style,
    Function1<@NonNull DpSizeUnit> onSizeChanged
)

Shows a Magnifier widget that shows an enlarged version of the content at sourceCenter 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 Magnifier widget on those levels. However, even on higher API levels, not all magnifier features are supported on all platforms. To check whether a given MagnifierStyle is supported by the current platform, check the MagnifierStyle.isSupported property.

This function does not allow configuration of source bounds since the magnifier widget does not support constraining to the bounds of composables.

import androidx.compose.foundation.MagnifierStyle
import androidx.compose.foundation.gestures.detectDragGestures
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.magnifier
import androidx.compose.material.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 (!MagnifierStyle.Default.isSupported) {
    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
@ExtensionFunctionType @NonNull Function1<@NonNull Density, @NonNull Offset> sourceCenter

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 Magnifier.show.

@ExtensionFunctionType @NonNull Function1<@NonNull Density, @NonNull Offset> magnifierCenter

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 unspecified, the magnifier widget will be placed at a default offset relative to sourceCenter. The value of that offset is specified by the system.

float zoom

See Magnifier.setZoom. Not supported on SDK levels < Q.

@NonNull MagnifierStyle style

The MagnifierStyle to use to configure the magnifier widget.

Function1<@NonNull DpSizeUnit> onSizeChanged

An optional callback that will be invoked when the magnifier widget is initialized to report on its actual size. This can be useful if one of the default MagnifierStyles is used to find out what size the system decided to use for the widget.