Ícones de ponteiro do mouse

Os usuários do Android acessam seu app em diferentes tipos de formatos, como smartphones, tablets, dobráveis e Chromebooks. Ao interagir com seu aplicativo, especialmente em telas maiores, os usuários também podem usar algum tipo de dispositivo apontador, como um mouse de três botões. Os aplicativos Android oferecem suporte à aplicação de estilos diferentes ao ponteiro do mouse para ajudar esses usuários a ter uma indicação visual de que podem interagir com um objeto.

Usar os cursores padrão do sistema

Os usuários estão familiarizados com diferentes convenções para interagir com diferentes tipos de objetos em dispositivos de tela grande. O Android oferece aos desenvolvedores alguns dos ícones de cursor mais comuns que os usuários conhecem. É possível adicionar esses ícones de cursor padrão do sistema com algumas linhas de código. Confira o snippet do Kotlin a seguir: 

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

Neste exemplo, myView é a visualização que será definida como um ícone de ponteiro em determinadas condições. A condição demonstrada aqui é um estado de passar o cursor, que ocorre quando o ponteiro do mouse está sobre uma visualização. Em outros cenários, talvez você queira um ícone de espera durante o processamento ou uma mira em um jogo.

O setOnHoverListener detecta quando o ponteiro entra no estado de passar o cursor e age de acordo com esse evento. Dentro do listener de eventos, view.pointerIcon é chamado para definir o ícone do ponteiro para essa visualização específica. Um ícone de sistema atual é usado para definir o ícone do ponteiro.

Há vários ícones do sistema integrados ao Android. Uma lista completa está na parte de baixo desta página. O ícone TYPE_HAND foi usado, mostrando uma mão fechada com o dedo indicador estendido.

Usar seu próprio cursor especial

// Loading a bitmap to use as a pointer icon
    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())

Observação:a localização do hotspot depende do seu caso de uso. Por exemplo, um app de desenho pode definir o ponto de acesso como a ponta da caneta ou do pincel.

Exemplos

Adicionar ícones de ponteiro ao aplicativo é uma ótima maneira de ajudar os usuários a ter experiências mais intuitivas em diferentes formatos de dispositivos. Há muitos ícones de sistema padrão disponíveis, e se eles não atenderem às suas necessidades, você sempre poderá carregar ou criar os seus próprios.

  • Arrastar e soltar: se o aplicativo oferecer suporte a arrastar de outro aplicativo e soltar no seu, implemente o ícone TYPE_NO_DROP. Isso daria uma indicação visual de que seu aplicativo não é compatível com o tipo MIME que está sendo solto nele.
  • Mapeamento: se você tiver um aplicativo de mapeamento e quiser mostrar aos usuários que eles podem mover o mapa, eles poderão ter a opção de usar o ícone TYPE_GRAB ao passar o cursor sobre o mapa. Quando o usuário clicar, atualize o ícone para uma mão agarrando para mostrar que ele está movendo o mapa.
  • Edição de fotos: os usuários que editam fotos gostam de ter controles que permitem selecionar uma lupa para aumentar o zoom. Você pode mudar o cursor para uma lupa com o ícone TYPE_ZOOM_IN quando o modo de zoom estiver selecionado.
  • E muito mais oportunidades

Observação:para conferir diferentes mudanças de ponteiro em ação, consulte este exemplo de ponteiro do GitHub (link em inglês).

Ícones de ponteiro personalizados em um app Android.

Apêndice

Mais informações

Cursores padrão do sistema

Estes são os cursores disponíveis por padrão no sistema Android.

Nome do cursor Ícone
TYPE_ALIAS O cursor de alias, uma seta com uma pequena seta curva ao lado.
TYPE_ALL_SCROLL O cursor de rolagem total, um círculo com quatro setas apontando para fora.
TYPE_ARROW O cursor de seta padrão.
TYPE_CELL Cursor de célula
TYPE_CONTEXT_MENU O cursor do menu de contexto, uma seta com um pequeno ícone de menu ao lado.
TYPE_COPY O cursor de cópia, uma seta com um sinal de mais ao lado.
TYPE_CROSSHAIR O cursor de mira, um sinal de mais com um ponto no centro.
TYPE_DEFAULT O cursor de seta padrão.
TYPE_GRAB O cursor de agarrar, uma mão aberta.
TYPE_GRABBING O cursor de agarrar, uma mão fechada.
TYPE_HAND O cursor de mão, uma mão com o dedo indicador apontando.
TYPE_HELP O cursor de ajuda, uma seta com um ponto de interrogação ao lado.
TYPE_HORIZONTAL_DOUBLE_ARROW O cursor de seta dupla horizontal para redimensionamento.
TYPE_NO_DROP O cursor de não soltar, um círculo com uma linha atravessada.
TYPE_NULL Nenhum cursor será exibido
TYPE_TEXT O cursor de texto, um cursor em forma de I.
TYPE_TOP_LEFT_DIAGONAL_DOUBLE_ARROW O cursor de seta dupla diagonal do canto superior esquerdo ao inferior direito para redimensionamento.
TYPE_TOP_RIGHT_DIAGONAL_DOUBLE_ARROW O cursor de seta dupla diagonal do canto superior direito ao inferior esquerdo para redimensionamento.
TYPE_VERTICAL_DOUBLE_ARROW O cursor de seta dupla vertical para redimensionamento.
TYPE_VERTICAL_TEXT O cursor de texto vertical, um feixe em I horizontal.
TYPE_WAIT O cursor de espera, uma ampulheta ou um círculo girando.
TYPE_ZOOM_IN O cursor de zoom, uma lupa com um sinal de mais.
TYPE_ZOOM_OUT O cursor de redução de zoom, uma lupa com um sinal de menos.