Uma das coisas que podem facilitar o seu trabalho no processo de criação de imagens para o desenvolvimento da aplicação é ter um mínimo conhecimento do que o SDK (Software Development Kit) pode te ajudar em ambas as partes (designers/desenvolvedores).
Pois bem, o draw9patch é uma ferramenta que vem junto com o SDK do Android, que pode ajudar bastante no caso de ajustes como backgrounds de botões, campos de textos dentre outros elementos que utilizam a mesma estética, em relação a cores e efeitos, mas que podem possuir tamanhos diferenciados.
Após ter definido como será esteticamente o seu elemento, neste caso um botão, é interessante, caso use algum efeito de Gradient ou algo semelhante, utilizar o modo Linear (fig 1) e não o modo Radial (fig 2) e que de preferência tenha um ângulo de 90 graus (fig 3), utilizei o Adobe Photoshop para criar o botão e salvei com uma largura mínima aproximada de 10px, mas a altura pode variar (fig 1).
fig 1. Imagem com o efeito Linear e com o tamanho adequado para utilizar no draw9patch.
fig 2. Imagem com o efeito Radial, não recomendável.
fig 3. Janela de estilos do Photoshop
Como usar o draw9patch?
Ok, a imagem do botão já foi criada e agora podemos utilizar o draw9patch.bat que fica no diretório tools, dentro da pasta do SDK do Android. Esta é a janela do draw9patch, quando executado, no meu caso estou usando o Mac Os.
Agora, é só importar a imagem que foi gerada no Photoshop, na barra de ferramentas em File> Open 9-Patch e aparecerá esta janela
Observem que na lateral da imagem existe um espaçamento, tipo uma transparência, é este espaço que vai delimitar onde e como a imagem vai ser modificada quando for transformada para o formato 9-patch.
O próximo passo é criar ao redor da imagem as seguintes marcações, onde a linha do topo refere ao limite para distorcer o botão horizontalmente. A lateral esquerda refere ao limite para distorcer verticalmente. À inferior e à direita indica a margem interna do botão onde será acrescentado o label do botão.
Para fazer isto é simples, basta clicar e arrastar ao lado da imagem. Agora é salvar a imagem na barra de ferramentas em File> save 9-patch. A imagem ficará com a seguinte extensão “nome_do_arquivo.9.png”. Pronto, agora é só o desenvolvedor acrecentar esta imagem como background dos botões.
Espero que tenham gostado desta dica, pois em alguns casos vale muito utilizar esta técnica, assim é dispensado no caso criar vários botões com tamanhos diferentes, assim diminui o tamanho final da aplicação, ganhando mais performace.
Quem tiver alguma dúvida pode me mandar e-mail para edson@chocoladesign.com
Fonte:
