Build apps faster with our new App builder! Check it out →

stylusHoverIcon

Common

Modifier in Compose Ui

Modifier that lets a developer define a pointer icon to display when a stylus is hovered over the element. When [overrideDescendants] is set to true, descendants cannot override the pointer icon using this modifier.

Last updated:

Installation

dependencies {
   implementation("androidx.compose.ui:ui:1.8.0-rc01")
}

Overloads


fun Modifier.stylusHoverIcon(
    icon: PointerIcon,
    overrideDescendants: Boolean = false,
    touchBoundsExpansion: DpTouchBoundsExpansion? = null
)

Parameters

namedescription
iconthe icon to set
overrideDescendantswhen false (by default), descendants are able to set their own pointer icon. If true, no descendants under this parent are eligible to change the icon (it will be set to the this (the parent's) icon).
touchBoundsExpansionamount by which the element's bounds is expanded

Code Example

StylusHoverIconSample

@Composable
fun StylusHoverIconSample() {
    Box(
        Modifier.requiredSize(200.dp)
            .border(BorderStroke(2.dp, SolidColor(Color.Red)))
            .stylusHoverIcon(PointerIcon.Crosshair)
    ) {
        Text(text = "crosshair icon")
        Box(
            Modifier.padding(20.dp)
                .requiredSize(150.dp)
                .border(BorderStroke(2.dp, SolidColor(Color.Black)))
                .stylusHoverIcon(PointerIcon.Text)
        ) {
            Text(text = "text icon")
            Box(
                Modifier.padding(40.dp)
                    .requiredSize(100.dp)
                    .border(BorderStroke(2.dp, SolidColor(Color.Blue)))
                    .stylusHoverIcon(PointerIcon.Hand)
            ) {
                Text(text = "hand icon")
            }
        }
    }
}
by @alexstyl