Como Criar Watchface ClockSkin Android Digiatl e Analógica

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.


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.


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. ] 


Postar um comentário

22 Comentários

  1. COMO EU COLOCO ESSES PROJETO EM QUE PASTA DO RELOGIO

    ResponderExcluir
    Respostas
    1. Olá amigo(a)!
      Seja bem vindo(a) ao blog.

      Na maioria dos relógios com sistema android, a forma de se colocar as watchfaces é a seguinte:

      1-Voce deve baixar a watchface no seu computador ( por que as vezes ela pode vir zipada ), caso isso aconteça você deve descompactar a pasta.
      2-Conecte o relógio no seu computador e abra a pasta ClockSkin que existe nele ( se não tiver essa paste crie uma com esse mesmo nome;
      3-Arraste a pasta da watchface que você descompactou para dentro da pasta ClockSkin ( que já existia no seu relógio ou que você criou).
      4 - Desconecte o relógio do computador e vá até o menu de watchfaces e escolha a watchface que você acabou de inserir.
      5 - Aplique e pronto.

      Em alguns relógios é necessário a reinicialização do mesmo após inserir a watchface e só após isso aplique a watchface que você inseriu.

      Espero ter ajudado. Me mantenha informado do seu progresso.
      Abraço!



      Excluir
  2. Existe watch face vxp que mostre as horas no digital e analógico ao mesmo tempo?

    ResponderExcluir
    Respostas
    1. Olá amigo!
      customizada não existe, nenhum desenvolvedor conseguiu fazer ainda.

      Excluir
  3. Tenho um Zeblaze Thor Pro 3G que é 320x320 se eu colocar skins de 400x400 não funcionam? A maioria das skins geralmente são nesse tamanho, seria obrigado a adaptar todas?

    ResponderExcluir
    Respostas
    1. Oi Amigo, seja bem vindo!
      Pode usar tranquilo, vai funcionar. Não precisa adaptar.

      Abraço!

      Excluir
  4. Boa tarde, usei esse material e já analisei o código xml que o programa usa... Existe algum tutorial pra que eu possa incluir mais informações... Tipo a temperatura do dia posterior... Coisas do tipo?

    ResponderExcluir
    Respostas
    1. Oi amigo, seja bem vindo!

      Não sei se isso é possível, eu nunca tentei fazer dessa forma. Irei estudar isso e trago aqui o que eu conseguir descobrir.

      Abraço

      Excluir
  5. Estou tentando criar uma face para o Iwo 8 , esta parecendo que tudo esta certo , porem esse relogio usa as faces atraves do aplicativo Mediatek smartdevice e as faces todas tem um arquivo VXP , apos terminar o projeto adicionei dentro da pasta appmanager , e conectei relogio e celular , porem o projeto nao aparece . sabe me informar o motivo?

    ResponderExcluir
    Respostas
    1. Oi Regis, seja bem vindo!
      Você temnum iwo, então seu projeto tem que ser vxp, você deve seguir os passos do tutorial de como criar watchface vxp, tem aqui no blog.

      Excluir
  6. hola amigo, hice un diseño, pero no se como instalarlo en mi watch w34(es chino). Que documentos debo meter en el watch?

    ResponderExcluir
    Respostas
    1. Olá amigo, seja bem vindo!

      O W34 é sistema vxp correto?

      Você deve colocar os 3 arquivos (.Png .Vxp .Xml) na pasta appmanager do seu smartphone e em seguida instale.

      Excluir
  7. Boa tarde. Eu comprei um Lemfo Elf2, e não consigo criar a pasta clockskinn nele. Quando conecto o relogio no computador, ele nao reconhece, nao parece nada. Li na internet que o sistema do relogio é android 5.0.
    Sabe o que posso fazer?? ele possui somente 6 watch faces e eu gostaria de colocar mais.

    ResponderExcluir
    Respostas
    1. Oi Tiago, seja bem vindo!
      O seu smartwatch é um equipamento fitness, ele vem preparado para a área de esportes.

      Não é sistema android, por isso você não consegue criar uma pasta nela para watchfaces customizadas.

      O sistema operaciopnal dele é próprio da fabricante e seu processador é o RTK8762c, ele é compatível com android 4.4 e superior e Ios 8.4 e superior.

      Abraço

      Excluir
    2. Obrigado pela rápida resposta. Então nesse caso não consigo colocar mais nenhuma watchface??
      Nem que seja de alguma maneira 'crakeado', não sei.
      Se tiver alguma maneira gostaria de saber, pois o relogio é otimo, porem as watchfaces são meio infantis.

      Abraço

      Excluir
    3. Até onde eu sei,não há possibilidade de inserir watchfaces no seu relógio.

      Procure saber com o fabricante se existe alguma atualização de firmware, talvez eles aprimorem o relógio e quem sabe desenvolvam mais algumas watchfaces.

      Excluir
    4. obrigado. Irei tentar entrar em contato com o fabricante sim.

      Abraço

      Excluir
  8. Mucchas gracias por tus enseñanzas, son muy apreciadas. Hay manera de convertir los archivos de Clock Skin en formato vxp, xml y png para poder subirlos con mediatek?

    ResponderExcluir
    Respostas
    1. Hola amigo, no para convertir clockskin a vxp, pero puedes usar algunos archivos de clockskin para construir un vxp.

      Excluir
  9. Hola termine el diseño pero nose como insertarlo en el relog tengo un w26 de la generacion que si deja cambiar los fondos pero nose como hacer para agregar el que creo con la herramienta Clockskinmaker

    ResponderExcluir
    Respostas
    1. A ferramenta clockskin faz watch faces android, o que você fez não serve para o w26.

      Excluir



~ REGRAS PARA COMENTAR ~

Leia os comentários anteriores, sua dúvida já pode ter sido respondida.

-Não desrespeite ninguém.
-Não xingue ou use palavras de baixo calão.
-Sempre que puder comente, é uma forma de incentivar a trazer sempre novidades.