Adapting Android

Mouse pointer icons

Android users come to your app from all different types of form factors i.e., phones, tablets, foldables, and Chromebooks. When interacting with your application, especially on larger screens, users may also use some sort of pointing device like a three-button mouse. Android applications have support for applying different styling to the mouse pointer to help those users have a visual indication that they can interact with an object.

Using the system default cursors

Users are familiar with different conventions for interacting with different types of objects on large screen devices. Android out of the box luckily provides developers with some of the most common cursor icons that users are familiar with. Adding in some of these system default cursor icons is easy. Let’s take a look at the following Kotlin snippet:

kotlin
myView.setOnHoverListener { view, _ ->
      view.pointerIcon =
         PointerIcon.getSystemIcon(applicationContext, PointerIcon.TYPE_HAND)
      false // Listener did not consume the event.
}

myView is the view that will be set to a pointer icon under certain conditions. The condition that is demonstrated is a hover state in this scenario. This is when the mouse is hovering over a view. (In other scenarios, it may be desirable to have a waiting icon when processing or a crosshair when playing a game). Here the setOnHoverListener is used to listen for when the pointer has entered that hover state and then act upon that event. Inside the event listener, view.pointerIcon is called to set the pointer icon for that particular view. An existing system icon is used to set the pointers icon. There are several system icons already built into Android and a full list can be found at the bottom of this page. The TYPE_HAND icon was used which will show a closed hand with the index finger extended.

Using your own special cursor

You may find that the Android system icons don’t cover all your needs. For example, if you have a stock trading app, you may want to show a green “$” as the mouse pointer when users hover over the buy button. Let’s break down the following Kotlin snippet:

kotlin
// Loading a bitmap to use as a pointer icon
val dollarBitmap = Bitmap.createScaledBitmap(
    BitmapFactory.decodeResource(
        this.resources,
        R.drawable.dollar_sign
    ), CURSOR_WIDTH, CURSOR_HEIGHT, false
)

// Creating the pointer icon and sending clicks from the center of the mouse icon
PointerIcon.create(dollarBitmap, (CURSOR_WIDTH/2).toFloat(), (CURSOR_HEIGHT/2).toFloat())

First, create a bitmap for the icon. Here it is loaded from a drawable resource. Then, create the PointerIcon object using the bitmap. Set the hotspot (the pixel location clicks will originate from) to be the middle of the icon.

Examples

Adding pointer icons to your application is a great way to help enable your users to have more intuitive experiences across the different device form factors they use. There are plenty of great default system icons available and if those do not suit your needs, you are always able to load or create your own.

  • Drag and Drop - If your application supports dragging from another application and dropping into your application you could implement the TYPE_NO_DROP icon. This would give a visual indication that your application does not support the mime type that is trying to be dropped into your app.
  • Mapping - If you have a mapping application and you want to show users that they can pan the map, they could have an option to have the TYPE_GRAB icon when you are hovering over the map and when the user clicks, update the icon to a grabbing showing that they are currently panning the map.
  • Photo Editing - Photo editing users like to have controls that allow them to select a magnifying glass to zoom in. You could change the cursor to a magnifying glass with the TYPE_ZOOM_IN icon when zoom in mode is selected.
  • And many more opportunities

Appendix

Additional Reading

System Default Cursors

These are the available cursors by default in the Android System.

Cursor NameIcon
TYPE_ALIASAlias Cursor Icon
TYPE_ALL_SCROLLAll Scroll Cursor Icon
TYPE__ARROWArrow Cursor Icon
TYPE_CELLCell Cursor Icon
TYPE_CONTEXT_MENUContext Menu Cursor Icon
TYPE_COPYCopy Cursor Icon
TYPE_CROSSHAIRCrosshair Cursor Icon
TYPE_DEFAULTDefault Cursor Icon
TYPE_GRABGrab Cursor Icon
TYPE_GRABBINGGrabbing Cursor Icon
TYPE_HANDHand Cursor Icon
TYPE_HELPHelp Cursor Icon
TYPE_HORIZONTAL_DOUBLE_ARROWHorizontal Double Arrow Cursor Icon
TYPE_NO_DROPNo Drop Cursor Icon
TYPE_NULLNo Cursor Will Display
TYPE_TEXTText Cursor Icon
TYPE_TOP_LEFT_DIAGONAL_DOUBLE_ARROWTop Left Diagonal Double Arrow Cursor Icon
TYPE_TOP_RIGHT_DIAGONAL_DOUBLE_ARROWTop Right Diagonal Double Arrow Cursor Icon
TYPE_VERTICAL_DOUBLE_ARROWVertical Double Arrow Cursor Icon
TYPE_VERTICAL_TEXTVertical Text Cursor Icon
TYPE_WAIT
TYPE_ZOOM_INZoom In Cursor Icon
TYPE_ZOOM_OUTZoom Out Cursor Icon