Mouse pointer icons

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:

myView.pointerIcon =
         PointerIcon.getSystemIcon(applicationContext, PointerIcon.TYPE_HAND)

myView is the view that will change the pointer icon when the mouse is hovering over it. (In other scenarios, it may be desirable to have a waiting icon when processing or a crosshair when playing a game). myView.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:

// 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

System Default Cursors

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

Cursor Name	Icon
TYPE_ALIAS
TYPE_ALL_SCROLL
TYPE__ARROW
TYPE_CELL
TYPE_CONTEXT_MENU
TYPE_COPY
TYPE_CROSSHAIR
TYPE_DEFAULT
TYPE_GRAB
TYPE_GRABBING
TYPE_HAND
TYPE_HELP
TYPE_HORIZONTAL_DOUBLE_ARROW
TYPE_NO_DROP
TYPE_NULL	No Cursor Will Display
TYPE_TEXT
TYPE_TOP_LEFT_DIAGONAL_DOUBLE_ARROW
TYPE_TOP_RIGHT_DIAGONAL_DOUBLE_ARROW
TYPE_VERTICAL_DOUBLE_ARROW
TYPE_VERTICAL_TEXT
TYPE_WAIT
TYPE_ZOOM_IN
TYPE_ZOOM_OUT