How to make new watch faces for Amazfit

Search This thread

Cracklydisc

Senior Member
Feb 3, 2017
65
199
Parma
How to make new watch faces for Amazfit

Finally, after a long search, I have been able to find the way to make new Amazfit watch faces, demanding me hard work, but there is so much to do yet, many tests are needed. At the moment I only tested how to make analogic watch faces, not digital ones.

What is needed to make watch faces?

A PC software that can open images with alpha channel like Gimp, Photoshop, etc.
Find attached the download a template that I used to make the first fully working custom watch face. Use it just by changing image files and not rename it.

https://mega.nz/#!GUpSwAqa!kwlCHfx8b1evRUjbh3VMN-eXNRfnfnsoZrhrVd29IdY


In this tutorial I will use Photoshop, but these same steps can be done with other graphic software.

Ready to start!


Files to draw for watch face:

  • Background image
  • Background image with an 8 colors palette
  • Hours timehand image
  • Hours timehand image with an 8 colors palette
  • Minutes timehand image
  • Minutes timehand image with an 8 colors palette
  • Seconds timehand image
  • Preview image

All images with an 8 colors palette are needed for standby mode and it can only be drawn with the following 8 colors:

  1. #ffffff
  2. #ffff00
  3. #ff00ff
  4. #ff0000
  5. #00ffff
  6. #00ff00
  7. #0000ff
  8. #000000

If you want you can download the photoshop palette I made:

https://mega.nz/#!PQgVhIaJ!dR6RwuyOj_cVWYG8l5nzXLCv0D-iG11_RvNA5lvrLb0

Here is the list of all images to draw with important information such as file name, file type, file resolution and colours palette to be used for the image.

Background in normal mode
background1.png


Background in standby mode (8 colors only!)
background8c.png


Hours timehand in normal mode
hour.png


Hours timehand in standby mode (8 colors only!)
hour8c.png


Minutes timehand in normal mode
minute.png


Minutes timehand in standby mode (8 colors only!)
minute8c.png


Seconds timehand in normal mode
seconds.png


Preview to select the watch face
preview.png


We have drawn all images of our simple watch face and can adjust files in the respective folders.
This is the final structure:
dirWatch.gif.pagespeed.ce.cNr7sKRiB6.gif


xml files

An Amazfit watch face needs 2 configuration xml files:
  • description.xml
  • watchface.xml

description.xml

This is the file I used for my watch face, parameters are self explaining so I will not add more. You can make a similar file only by changing watch face name and author.
2017-03-11-1.png


NB: tag “settings” to “true” allow to modify the watch face inside the watch menu to load custom background as it is already possible with some standard watch face.

watchface.xml

This file contains images path to be used in the watch face.This file has a complex configuration and it also has the widget configuration to use inside the watch face. I have not been able yet to test everything as there is no official documentation and all data have been extracted from decompiled apk.

Simple version without widget:
2017-03-11-3.png


Available attributes, not yet all tested:

  • config
  • configlist
  • dataType
  • height
  • id
  • mask
  • model
  • preview
  • type
  • width
  • x
  • y

Example of file with a widget:
2017-03-13-1.png


The widget dataType are working:

  • “1” step
  • “2” today distance
  • “3” total distance
  • “4” calories
  • “5” heart rate
  • “6” date
  • “10” battery

The widget dataType aren't working:

  • “8” weather
  • “9” Air quality
  • “11” unknown


Making of watch face file

To make a file to fit Amazfit standard, just zip all the files and rename the zip with .wfz*extension in this way:
wfz.gif.pagespeed.ce.vn_dgRZDXJ.gif


How to copy the new Watch Face inside Amazfit

Copy the watch face file inside the watch as any music file, so:
  1. Turn on the Amazfit and connect it to PC
  2. Open the main folder whit the list of all folders
  3. Search the WatchFace folder, if not existing just make it (case sensitive)
  4. Copy the .wfz file inside the WatchFace folder
  5. Test the watch face from the watch!

Result

Normal mode:
17212095_1481395358537455_246936882890830321_o-1-e1489248223184.jpg


Standby mode:
17240293_1481877978489193_6720734577304879387_o.jpg


Thanks to @[Jaco69] for helping me in the translation :)
 
Last edited:

Neuer_User

Senior Member
Jul 16, 2010
1,090
2,526
Great work!!

I'm a bit surprised about the fixed 8 color palette. Are you sure about that? Some of the existing watchface backgrounds do not seem to only use these fixed colors in locked mode.
 

penguinunix

Member
Feb 13, 2010
23
15
Very Nice Tutorial, just a quick look what I've applied as a new watchfaces

Tips for creating background images (8c folders), it's not about 8c pallete, as long as your image does not exceed 10Kbytes (you can save it as png-8 with 256 colour if it doesn't exceed 10Kbytes in size), it would be fine, so make sure you check the size before zipping the files. The size for background images (outside 8c folder) are free, just make sure the size is not exceed 200Kbytes, so it would not take too much space on the watch memory.

2cpvxq9.jpg
 
Last edited:

PrizrakS

Member
Mar 13, 2017
5
4
How to make new watch faces for Amazfit
The widget dataType are (not tested) :

  • “1” step
  • “2” today distance
  • “3” total distance
  • “4” calories
  • “5” heart rate
  • “6” date
  • “8” weather
  • “9” Air quality
  • “10” battery
  • “11” unknown
1-6, 10 - Work :good:
8, 9 - Not work :(

https://forum.xda-developers.com/album.php?albumid=14026&pictureid=55256
https://forum.xda-developers.com/picture.php?albumid=14026&pictureid=55255
album.php

album.php
 
Last edited:

Neuer_User

Senior Member
Jul 16, 2010
1,090
2,526
Very Nice Tutorial, just a quick look what I've applied as a new watchfaces

Tips for creating background images (8c folders), it's not about 8c pallete, as long as your image does not exceed 10Kbytes (you can save it as png-8 with 256 colour if it doesn't exceed 10Kbytes in size), it would be fine, so make sure you check the size before zipping the files. The size for background images (outside 8c folder) are free, just make sure the size is not exceed 200Kbytes, so it would not take too much space on the watch memory.

2cpvxq9.jpg
Very NICE! Care to share? :D
 

PrizrakS

Member
Mar 13, 2017
5
4
Thanks a lot! I find these value in decompiled apk maybe in the future will be activated ;)

Thank you for the discovery!
I tried all the options on the screen at the same time 1. That worked-I wrote.
For a self made screen 2, but photos are not yet gives added. Tired of the truth the coordinates to pick up (to fit)
 

penguinunix

Member
Feb 13, 2010
23
15
Very NICE! Care to share? :D

Here you go, just change to zip and unzip to see the source
https://mega.nz/#!9kB1TAQB!tHZYTiVRKIJ-U1BcpeSlMCJf3qdARqR31pBXXGEtS20

For those of you who get confused with coordinat, here the hints:
x = horizontal
y = vertical

center will be 160,160. if you add widget with size 40,40 to center the widget, use coordinat 120,120 (160-40)
Try to play with it, wish someone could make a graphical user interface to design the watch :laugh::laugh:

Someone have the link for the apk that can be used to take screenshoot? I forgot where can find the link ..
 
Last edited:

Neuer_User

Senior Member
Jul 16, 2010
1,090
2,526
Here you go, just change to zip and unzip to see the source
https://mega.nz/#!9kB1TAQB!tHZYTiVRKIJ-U1BcpeSlMCJf3qdARqR31pBXXGEtS20

For those of you who get confused with coordinat, here the hints:
x = horizontal
y = vertical

center will be 160,160. if you add widget with size 40,40 to center the widget, use coordinat 120,120 (160-40)
Try to play with it, wish someone could make a graphical user interface to design the watch :laugh::laugh:

Someone have the link for the apk that can be used to take screenshoot? I forgot where can find the link ..
Thanks for sharing. Looks really great.

Now we need to find out, how we can "instruct" the settings part to allow choosing the other backgrounds you have in the wfz, and how to select what the widgets should show :D

---------- Post added at 06:15 PM ---------- Previous post was at 06:06 PM ----------

Btw. the official changelog to 1.2.11 mentioned some "tutorial at Huami Forum". If we can find and translate that, we might get some more insights into this, e.g. what the other attributes do etc.
 

penguinunix

Member
Feb 13, 2010
23
15
Thanks for sharing. Looks really great.

Now we need to find out, how we can "instruct" the settings part to allow choosing the other backgrounds you have in the wfz, and how to select what the widgets should show :D

---------- Post added at 06:15 PM ---------- Previous post was at 06:06 PM ----------

Btw. the official changelog to 1.2.11 mentioned some "tutorial at Huami Forum". If we can find and translate that, we might get some more insights into this, e.g. what the other attributes do etc.

That would be great, it's a good thing that huami keep it updated and it seems that they were reading what user want.
 

Top Liked Posts

  • There are no posts matching your filters.
  • 26
    How to make new watch faces for Amazfit

    Finally, after a long search, I have been able to find the way to make new Amazfit watch faces, demanding me hard work, but there is so much to do yet, many tests are needed. At the moment I only tested how to make analogic watch faces, not digital ones.

    What is needed to make watch faces?

    A PC software that can open images with alpha channel like Gimp, Photoshop, etc.
    Find attached the download a template that I used to make the first fully working custom watch face. Use it just by changing image files and not rename it.

    https://mega.nz/#!GUpSwAqa!kwlCHfx8b1evRUjbh3VMN-eXNRfnfnsoZrhrVd29IdY


    In this tutorial I will use Photoshop, but these same steps can be done with other graphic software.

    Ready to start!


    Files to draw for watch face:

    • Background image
    • Background image with an 8 colors palette
    • Hours timehand image
    • Hours timehand image with an 8 colors palette
    • Minutes timehand image
    • Minutes timehand image with an 8 colors palette
    • Seconds timehand image
    • Preview image

    All images with an 8 colors palette are needed for standby mode and it can only be drawn with the following 8 colors:

    1. #ffffff
    2. #ffff00
    3. #ff00ff
    4. #ff0000
    5. #00ffff
    6. #00ff00
    7. #0000ff
    8. #000000

    If you want you can download the photoshop palette I made:

    https://mega.nz/#!PQgVhIaJ!dR6RwuyOj_cVWYG8l5nzXLCv0D-iG11_RvNA5lvrLb0

    Here is the list of all images to draw with important information such as file name, file type, file resolution and colours palette to be used for the image.

    Background in normal mode
    background1.png


    Background in standby mode (8 colors only!)
    background8c.png


    Hours timehand in normal mode
    hour.png


    Hours timehand in standby mode (8 colors only!)
    hour8c.png


    Minutes timehand in normal mode
    minute.png


    Minutes timehand in standby mode (8 colors only!)
    minute8c.png


    Seconds timehand in normal mode
    seconds.png


    Preview to select the watch face
    preview.png


    We have drawn all images of our simple watch face and can adjust files in the respective folders.
    This is the final structure:
    dirWatch.gif.pagespeed.ce.cNr7sKRiB6.gif


    xml files

    An Amazfit watch face needs 2 configuration xml files:
    • description.xml
    • watchface.xml

    description.xml

    This is the file I used for my watch face, parameters are self explaining so I will not add more. You can make a similar file only by changing watch face name and author.
    2017-03-11-1.png


    NB: tag “settings” to “true” allow to modify the watch face inside the watch menu to load custom background as it is already possible with some standard watch face.

    watchface.xml

    This file contains images path to be used in the watch face.This file has a complex configuration and it also has the widget configuration to use inside the watch face. I have not been able yet to test everything as there is no official documentation and all data have been extracted from decompiled apk.

    Simple version without widget:
    2017-03-11-3.png


    Available attributes, not yet all tested:

    • config
    • configlist
    • dataType
    • height
    • id
    • mask
    • model
    • preview
    • type
    • width
    • x
    • y

    Example of file with a widget:
    2017-03-13-1.png


    The widget dataType are working:

    • “1” step
    • “2” today distance
    • “3” total distance
    • “4” calories
    • “5” heart rate
    • “6” date
    • “10” battery

    The widget dataType aren't working:

    • “8” weather
    • “9” Air quality
    • “11” unknown


    Making of watch face file

    To make a file to fit Amazfit standard, just zip all the files and rename the zip with .wfz*extension in this way:
    wfz.gif.pagespeed.ce.vn_dgRZDXJ.gif


    How to copy the new Watch Face inside Amazfit

    Copy the watch face file inside the watch as any music file, so:
    1. Turn on the Amazfit and connect it to PC
    2. Open the main folder whit the list of all folders
    3. Search the WatchFace folder, if not existing just make it (case sensitive)
    4. Copy the .wfz file inside the WatchFace folder
    5. Test the watch face from the watch!

    Result

    Normal mode:
    17212095_1481395358537455_246936882890830321_o-1-e1489248223184.jpg


    Standby mode:
    17240293_1481877978489193_6720734577304879387_o.jpg


    Thanks to @[Jaco69] for helping me in the translation :)
    10
    Amazfit Watchface Maker App

    Edit: Updated watchface file link

    Hi Folks,

    I am working on an mobile app to create watchfaces for Amazfit watch.
    So far, I have made first watchface using this app. Since I don't have watch right now, I am looking for testers to test this watchface.

    I am looking for feedback from you guys so that I can make this app work as expected. Once the app is done, I will share it with all of you. :)

    Download watchface from here: https://mega.nz/#!oQ1TlArZ!_4sHLswMs8ZOpi9b5kQRCHOPmtyDENT88DZLeS9dzus
    Attached are the screenshots of the app.

    Thanks.
    5
    Very Nice Tutorial, just a quick look what I've applied as a new watchfaces

    Tips for creating background images (8c folders), it's not about 8c pallete, as long as your image does not exceed 10Kbytes (you can save it as png-8 with 256 colour if it doesn't exceed 10Kbytes in size), it would be fine, so make sure you check the size before zipping the files. The size for background images (outside 8c folder) are free, just make sure the size is not exceed 200Kbytes, so it would not take too much space on the watch memory.

    2cpvxq9.jpg
    5
    Very NICE! Care to share? :D

    Here you go, just change to zip and unzip to see the source
    https://mega.nz/#!9kB1TAQB!tHZYTiVRKIJ-U1BcpeSlMCJf3qdARqR31pBXXGEtS20

    For those of you who get confused with coordinat, here the hints:
    x = horizontal
    y = vertical

    center will be 160,160. if you add widget with size 40,40 to center the widget, use coordinat 120,120 (160-40)
    Try to play with it, wish someone could make a graphical user interface to design the watch :laugh::laugh:

    Someone have the link for the apk that can be used to take screenshoot? I forgot where can find the link ..
    4
    My first watchface with Mickey and 3 widget (date, battery and step). Very Easy and thanks for this tuto !!

    Update for Lock Mode
    https://mega.nz/#!bx1nRBDZ!8YGkC3m_fzh_aQcKr1RdyYyeNXa4l3qtpLthH4GbqsY