Como Criar Watchface ClockSkin Android Digiatl e Analógica

Olá Amigos, hoje vamos aprender a criar watchfaces clockskin android, esse tutorial é para watchfaces de relógios com sistema Android 4.4 em diante e CPU MTK6572, MTK6580, não é difícil de se criar as watchfaces, porém, é necessário atenção para cada criação.

Como base de desenvolvimento é necessário que tenhamos todos os recursos necessários para a criação de nossas watchfaces e para isso devemos determoinar quais são eles.

Para nosso projeto precisamos de background, ponteiros, sombras, bezels e assim por diante e como em qualquer outra watchface nós precisamos criar tudo isso. E como eu faço?

Bom, para que você tenha todas essas partes, é necessário um pouco de conhecimento em edição de imagens e um excelente programa para isso é o Photoshop, então é necessário que você tenha conhecimento nisso.

É possível utilizar outro programa para edição de imagens? Sim. Desde que ele te dê as opções de tamanho e transparência.

Recursos para esse Projeto Aqui

Agora que sabemos que é necessario o conhecimento em photoshop, também precisamos da ferramenta fundamental para o desenvolvimento dos nossos projetos e esse programa é o ClockSkin Maker, é um programa leve e facil de se trabalhar.

Segue link do site do desenvolvedor do ClockSkin Maker para download ClokSkin Maker Aqui

Antes de iniciar, um aviso: Este tutorial será um tanto longo, porém bem explicado.

Após baixar o arquivo de instalação, descompacte usando o winrar ou outro programa para descompactação de arquivos. Você verá esse ícone.

Após descompactar você verá um arquivo em .exe, que é o nosso programa de edições.

Ele cria uma pasta onde são armazenadas todas as watchfaces que vamos criar, e também, ele trás alguns modelos de watchface pré instalados, esses modelos servem de exemplo para inspiração de futuras watchfaces.

Você verá essas pastas após descompactar e instalar o ClocKsin Maker.

E se abrir a pasta ClockSkin verá várias pastas onde são salvas as watchfaces que iremos criar, como eu disse anteriormente, essas pastas são watchfaces de outro programador que foram adicionas no programa como base de exemplo.

Aqui no exemplo estou mostrando como fica a pasta de armazenamento com todos os arquivos que geramos e vamos gerar nas watchfaces. ( exemplo Watchface Detroit Red Wings que eu mesmo fiz ).

Observe que temos vários arquivos com 2 estensões diferentes, são eles: .png para as imagens, .xml para o desenvolvimento da programação.

Aqui no nosso exemplo o arquivo ClockSkin.xml é responsável por programar o desenvolvimento da watchface e suas camadas. Ele dá a ordem da programação, ele armazena no arquivo a sequencia de camadas e o que cada uma delas deve fazer e acessa o arquivos de cada camada para a execução.

Iremos ter alguns arquivos com essa estensão, pois cada um deles trabalha de uma forma, realizando uma função pré determinada que veremos em breve.

já os arquivos .png são meramente as imagens que criamos no photoshop e adicionamos ao projeto. Essas imagens são os ponteiros de horas, minutos e segundos, sombras, bezels, fundos, logo marcas, marcadores e assim por diante.

Lembrete: Cada arquivo .xml tem sua função especifica, aqui nesse tutorial não iremos ver programação avançada, irei apresentar o básico para a criação de uma watchface simples, porém, os arquivos .xml podem ser editados e programados para ter ações diferentes. Mas para isso, é necessário um conhecimento maior em programação.

Aqui vou detalhar a criação da watchface em Photoshop para o entendimento. Lembrando sempre que existem vários tamanhos de telas de relógio, então devemos trabalhar sempre no tamanho exato para que não tenhamos problemas.

Os tamanhos mais comuns são: 320x320, 360x360, 400x400 e 512x512 pixels, porém o que mais é usado é 400x400.

Lembre-se, se você criar uma imagem maior que o tamanho da tela é provável que essa watchface não funcione corretamente, então evite bug, crie sempre dentro da medida.

Nesse projeto da Detroit Red Wings eu optei por salvar minhas imagens em blocos ( agrupadas ), assim ficamos com menos imagens soltas na pasta da watchfaces, porém, se você quiser fazer camada por camada também é possível. Fica a seu critério.

No meu exemplo eu fiz 3 blocos de imagens (400x400), que são:

1 - Fundo;

2 - Bezel e

3 - Ponteiros.

Cada uma dessas pastas contém seus respectivos arquivos que dão toda a forma para nossa watchface, em seguida eu os salvei dessa mesma forma, em blocos, ficando assim.

Os ponteiros foram salvos separados, individualmente. Todas as imagens devem ser salvas em .png.

Agora que todas as nossas imagens estão prontas, vamos para o ClockSkin Maker fazer a montagem das camadas.

Dê 2 cliques no ícone do ClockSkin Maker, na pasta onde você o salvou, ele irá abrir dessa forma.

Vou explicar cada opção do menu, que são:

1 - Adicionar Skin - Para que você possa iniciar um novo projeto.

2 - Importar Skin .watch - Para importar um projeto existente na extensão .watch.

3 - excluir Skin - Para excluir qualquer projeto selecionado.

4 - Toolbox - Aqui são as funções disponíveis para criação da nossa watchfaces.

Caixa de Edição - Aqui temos:

5 - Salva o projeto;

6 - Carrega projeto existente;

7 - Abre o arquivo .xml para edição;

8 - Abre a pasta onde está seu projeto salvo;

9 - Limpa o projeto;

10 - Opção de edição para sua watchface ( você vai criando seu projeto);

11 - Simulação do projeto ( você determina as opções);

12 - Simulação em tempo real;

13 - Campo para visualização de como está ficando seu projeto.

Camadas 

14 - Layers, aqui você vê as camadas que adicionou;

15 - Exclui camada indesejada;

16 - Posicionas as camadas;

17 - Propriedades das camadas ( aqui temos varias funções incorporadas);

Propriedades

Aqui você pode baixar um arquivo em PDF que diz o que cada função faz, esse arquivo está em duas versões: Inglês e Português, escolha a que melhor atende você e baixe, estude e com certeza você poderá tirar um melhor proveito de cada função. 

Estou disposnibilizando arquivo PDS com a watchface de projeto simplificado para melhor entendimento, também disponoibilizo as imagens avulsas desse projeto para a montagem da watchface como forma de exercício no ClockSkin Maker.

Recursos para esse Projeto Aqui 

se você não baixou os recurso lá no inicio do tutorial, pode baixar aqui.

Agora vamos ao Passo a Passo de como criar a Watchface ClockSkin Android, fácil e rápido.Sigam os passos.

Passo 1

- Abrir o ClockSkin Maker e adicionar nova skin, renomeie com o nome do seu projeto e salve.

Passo 2

- Adicionar o background, dê 2 cliques em Imagem, vá em Filename, clique nos ... ( 3 pontos), procure a pasta onde você deixou todos os recursos de imagem.

- Quando encontrar a pasta você verá todas as imagens salvas, escolha o background e dê 1 clique nele.

- Após o background aplicado, verifique o tamanho dele, se for necessario reajuste o tamanho nas guias Width / Height.

- Daqui em diante todos os passos erão iguais, iremos na Toolbox e adicionaremos o objeto que desejamos, sempre que for imagem, temos que voltar na pasta de recursos, como no passo anterior.

Passo 3

Adicione todos os objetos menos os ponteiro de Horas Analógicas, esses tem que ser os ultimos a serem adicionados para que não tenhamos erros.

Passo 4

- Vamos colocar as horas digitais.

- Vá em Toolbox e dê 2 cliques em  ARRAY_HOURMINUTE.

- Vá em Properties e Criate, você verá essa nova caixa onde deve configurar como será sua hora e minutos digitais, muito facil e intuitivo.

- Dê o nome para o arquivo como no exemplo Hourminute, escolha a fonte e o tamanho ( eu usei a fonte Microsoft Sans Serif no tamanho 35 com a opção Autoscale ativa).

Passo 4.1

- Escolha a cor da fonte e somra se desejar.

Passo 4.2

-Em seguida, clique em aplicar - Pronto, sua hora foi adicionada. Basta agora usar a caixa de propriedades para acertar a altura e largura.

Passo 4.3

- Clique em aplicar e fechar.

Passo 4.4

- Agora vamos colocar Data, esse procedimento é igual ao anterior.

- Vá na Toolbox e adicione ARRAY_MONTHDAY, faça como no passo anterior, fonte, tamanho, cor, sombra. ( Use a fornte Microsoft Sans Serif no tamanho 27 com a opção Autoscale ativa).

Passo 4.5

- Agora chegou a hora de colocarmos as Horas Analógicas.

- Coloque 1 de cada vez, começando pelo ponteiro da hora, depois minutos e depois segundos.

- Vá na Toolbox e adicione ROTATE_HOUR para hora, vá até a pasta de recursos onde estão as imagens e adicione o ponteiro da hora.

- Faça o mesmo procedimento para Minutos e Segundo, use ROTATE_MINUTE  e  ROTATE_SECOND para cada um deles.

- Lembre-se que nenhuma dessas imagens podem ultrapssar o tamanho total do projeto, exemplo: seu projeto é de 400x400 pixel, então não podemos ter uma imagem com 512x512 pixels, se isso acontecer seu projeto não irá funcionar no relógio.

- Aqui já devemos ter adicionado todos os objetos que compõem nosso projeto.

Passo 4.6

- Agora basta testar. Vá na Opção Simulation e marque essa caixa, marque também a opção Now, pronto, agora é só ver o funcionamento da sua watchface.

Passo 4.7

- Tudo funcionando corretamente, todas as imagens com o tamanho correto para o projeto, os números da hora digita e data estão com boa resolução e tamanho adequados.

- Agora basta clicar em  FILE EXPLORER, abrirá a pasta de destino da sua watchface.

Passo 4.8

-Agora basta copiar essa pasta toda para o relógio e pronto! 

Assista ao vídeo para entender melhor

Se você ainda tiver alguma duvida a respeito de como fazer essa watchface, deixe um comentário que respondo assim que possível.

Bons Projetos!

 [ Se esse artigo foi útil para você, comente e compartilhe. Isso faz com que outras pessoas  compreendam melhor o assunto e também expressem suas opinião. ]