Criar bitmaps redimensionáveis (arquivos 9-Patch)

A ferramenta Draw 9-patch é um editor WYSIWYG integrado ao Android Studio que permite criar imagens de bitmap automaticamente redimensionáveis, que se adaptam ao conteúdo da visualização e ao tamanho da tela. Determinadas partes da imagem são dimensionadas no eixo horizontal ou vertical, de acordo com os indicadores delineados dentro da imagem.

Para saber os conceitos básicos sobre as imagens NinePatch e como elas funcionam, leia a seção sobre Drawables NinePatch no documento Canvas e Drawables.

Figura 1. Imagem NinePatch na ferramenta Draw 9-patch do Android Studio.

Veja um guia rápido para criar uma imagem NinePatch usando a ferramenta Draw 9-patch no Android Studio. Você precisará da imagem em PNG com que quer criar uma imagem NinePatch.

  1. No Android Studio, clique com o botão direito na imagem em PNG da qual você quer criar uma imagem NinePatch e depois em Create 9-patch file.
  2. Digite um nome para o arquivo da sua imagem NinePatch e clique em OK. A imagem será criada com a extensão de arquivo .9.png.
  3. Clique duas vezes no novo arquivo NinePatch para abri-lo no Android Studio. O espaço de trabalho será aberto.

    O painel à esquerda é a área de desenho, onde você pode editar as linhas dos trechos esticáveis e da área destinada ao conteúdo. O painel à direita é a área de visualização, onde é possível ver a imagem depois de esticada.

  4. Clique dentro do perímetro de 1 pixel para delinear as linhas que definem os trechos esticáveis e a área (opcional) do conteúdo. Clique com o botão direito (no Mac, mantenha Shift pressionado e clique) para apagar as linhas delineadas anteriormente.
  5. Quando terminar, clique em File > Save para salvar as alterações.

Você pode abrir um arquivo NinePatch existente no Android Studio clicando duas vezes nele.

Para garantir que as imagens NinePatch sejam dimensionadas para um tamanho menor corretamente, verifique se alguma região esticável tem pelo menos 2x2 pixels. Caso contrário, elas podem desaparecer em uma redução de tamanho. Além disso, coloque um pixel a mais como margem de segurança nas imagens antes e depois das regiões esticáveis para evitar interferência durante o dimensionamento, o que pode alterar a cor das linhas de divisão.

Observação: um arquivo PNG normal (*.png) será carregado com uma borda de um pixel vazia adicionada em torno da imagem, onde você pode delinear os trechos esticáveis e a área do conteúdo. Um arquivo NinePatch salvo anteriormente (*.9.png) será carregado da forma em que está, sem área de desenho adicionada, porque essa área já existe.

Figura 2. Imagem NinePatch mostrando conteúdo, trechos e trechos ruins.

Os controles opcionais são:

  • Zoom: ajusta o nível de zoom da imagem na área de desenho.
  • Patch scale: ajusta a dimensão das imagens na área de visualização.
  • Show lock: exibe a área não desenhável da imagem ao passar o cursor.
  • Show patches: mostra os trechos esticáveis na área de desenho (um trecho rosa é esticável), conforme mostrado na figura 2 acima.
  • Show content: destaca a área de conteúdo nas imagens de visualização (a área roxa é a que pode receber conteúdo), conforme mostrado na figura 2.
  • Show bad patches: adiciona uma borda vermelha em torno dos trechos que podem produzir ruídos ou distorções na imagem quando esticada, conforme mostrado na figura 2. A coerência visual da imagem esticada será mantida se você eliminar todos os trechos ruins.