Enrich stylus and mouse experiences with hover

The stylus is a fantastic tool that offers precision and ease of use, bringing organic interaction to your Android apps. The stylus also enables additional user interactions like hovering over UI elements to trigger new experiences. This blog post explores what these experiences look like and how to implement them in your Android apps.

Hovering is a mechanism that detects the stylus is above (or over) a UI component. The component style changes to notify the user of an upcoming stylus interaction on the component. It is very similar to moving the mouse cursor over a button and seeing the background color change.

Most styluses have a hovering distance of about 10mm (0.39”). The distance may vary with the manufacturers of the stylus and the Android device.

Hovering offers an unique opportunity to preview to your user what is about to happen. As recommended in our large screen guidelines, actionable UI elements should have hover states (where appropriate) to indicate to stylus, mouse, and trackpad users that the elements are interactive.

Stylus hover helps your users visualize that a button can be activated:

Hovering can be used to show tooltips to the user, very similar to what a mouse user would experience:

Hovering can start to play a video to preview the video content (usually without sound):

Hovering can help to preview a brush or eraser before it marks the canvas in a drawing app:

Design your own experience for your app; it’s about giving users information ahead of an action.

While a stylus can be compared to a mouse to some extent, it is not a mouse. Since the stylus itself — unlike a mouse — is physically over the UI elements, a cursor is not required; hence, don’t show a cursor for the stylus.

You can offer hover support in many ways, depending on the technology you are using today. Provide hover support at the UI component level with Material Design. Implement custom hover support in both Compose and View, and take advantage of MotionEvent to go even further.

Let’s start with the hover implementation that requires the least work: Material Design Components.

Most Material Design 2 and 3 components activate on hover:

Material Design for Compose

Check the Compose Material Catalog app and source code to preview Material Design Components for Compose.

Make sure you import androidx.compose.material3 Jetpack library to your project.

Use the right imports like import androidx.compose.material3.Button so your components have the Material 3 style.

Material Design for View

The Material Design Component GitHub repository offers a catalog app. It can be found on the project release page in the Assets section, down the release notes (download and sideloadcatalog-debug.apk).

Make sure you import com.google.android.material to your project. Material Design Components need to be explicitly declared in your XML layout. Use Material Design Components such as <com.google.android.material.button.MaterialButton> instead of <Button> to benefit from the extra features Material Design components offer such as Material You.

Compose offers the hoverable modifier, which enables you to offer a customizable hover effect. You need to implement Indication interface:

View offers a similar mechanism with OnHoverListener:

MotionEvent offers a range of actions and axes to allow you to fine tune your hover implementation. The APIs are available from Android 4 (API level 14). Please note that since hovering doesn’t touch the screen, these events are not dispatched through OnTouchEventListener. Instead, they are delivered through the pointerInteropFilter modifier for Compose and setOnGenericMotionListener for View.

MotionEvent actions and axes:

• ACTION_HOVER_MOVE: the pointer is moving above the surface
• ACTION_HOVER_ENTER: the pointer has entered the boundary of the surface
• ACTION_HOVER_EXIT: the pointer has exited the boundary of the surface
• AXIS_DISTANCE: the value of the distance between the screen and the pointer. A value 0 means the pointer is in contact with the screen. A value greater than 0 means the pointer is not in contact with the screen. The value depends on the manufacturer; do not rely on specific values for critical features.

To test hoverable experiences, the Compose framework offers InteractionSource. You can collect the hover state with collectIsHoveredAsState() function which returns a boolean.

You can simulate mouse movement (which is the same as a stylus) with performMouseInput. The enter function places the pointer at the given coordinates, moveBy and moveTo allow you to move the pointer.

For rich graphical interaction, you can use screenshot testing. Screenshot testing allows you to verify the visual interaction is correct (like verifying the background color has changed). It works with both View and Compose.

Stylus and mouse hover offer an opportunity to enrich the user experience. Hover is available with Material Design, View, Compose, and custom MotionEvent implementations. Hover clarifies and reinforce user intentions. These experiences are compatible with stylus, mouse and trackpad devices.