[Amazfit] GreatApo:
DOCUMENTATION: Project GreatFit

View attachment 4559967

Introduction

This project scopes to provide an easy way to create Amazfit APK watchfaces even without coding skills!

On the other hand, the provided code is clear (still working on this :P), contains many comments and is at "the state of the art" when it comes to Amazfit APK watchfaces development.

This code refers to both designers and programmers so feel free to skip the parts about developers.

THIS TUTORIAL IS DEPRECATED WITH THE NEW SOURCES. Most parameters are now gathered in one file: GreatFit\app\src\main\res\values\arrays.xml, read that file, it's quite easy to make changes now. I haven't been able to update the tutorial since I improve GreatFit and its connection with Amazmod.​

Features

Why to use these APK watchface sources and not an *.wfz file or other sources? Because:

Customize hours and minutes separate

Display custom battery/steps/daily steps progress bars

Display custom battery/weather icons

Display date/month/day separate

Display more weather info (humidity, wind direction and strength, UV status, city)

Display next watch alarm

Display air pressure

Show/hide units (for calories, distance, temperature)

Easy to enable/disable elements

Easy to position elements in the screen (same positions for screen on and off modes!)

Easy to set element colors

Preparation:

With or without coding skills, you will have to download and install Android Studio in order to compile the java sources to an APK.

Additionally, you will need to download the sources from here.

Project's Structure:

Run Android studio, click file->open and select the sources folder. In Studio's left column you will now see project's structure.

View attachment 4559933

You only have to edit 3 things to make a watchface:

Watchface's parameters (elements' positions in the screen and other features)

Images

Fonts

For developers

To start with, you can add more watchfaces in the same APK by editing the manifest and creating 2 new java classes identical to GreatFit and GreatFitSltp.

Within each of these classes you will be able to load each watchface's widgets. There are currently 8 widgets:

- MainClock, where all the time and date elements are handled

- Circle widget, where battery (as number), calories, steps and distance elements alongside with the progress circles/bars are handled.

- Heart rate widget

- Battery widget, that handles the battery images

- Floor widget

- Weather widget, where the weather magic happens

- Great widget, where I try to make new elements work (like am/pm, next alarm and Xdrip)

Watchface's parameters:

There are 5 files containing watchface's parameters inside "app\src\main\res\values":

bool.xml (Show/hide: elements, units, progressbars, icons & set the text aligment center or left for each element)

colors.xml (Show/hide: elements, units, progressbars, icons & set the text aligment center or left for each element)

dimens.xml (Change elements' positions in the screen and their font size)

integer.xml (Change progressbars angles and their screen off color, and define the font_ratio)

strings.xml (Change watchface name & style author)

bool.xml:

You can show or hide an element by turning the value to "true" or "false". Additionally you can enable or disable the "flashing_indicator" (the : between hours and minutes) or the "flashing_heart_rate_icon" which will show or hide the "flashing_heart.png" image every second.

Examle, turn seconds off:

//The original line with the seconds is:
<bool name="seconds">false</bool>

//And seconds are shown by turning the false to true
<bool name="seconds">true</bool>

Additionally with enabling or disabling element, in this file you would set text alignment for each element. Currently, only left and center alignmet types are supported.

Examle, detting steps' alignment:

//To align the text left:
<bool name="steps_left_align">true</bool>

//To align the text in the center:
<bool name="steps_left_align">false</bool>

colors.xml:

- Under construction

dimens.xml:

- Under construction

integer.xml:

- Under construction

strings.xml:

- Under construction​

Fonts:

All the used fonts are located in "app\src\main\assets\fonts" folder. Currently you are unable to use more than one font without changing the java code. To change the font, just replace the "font.ttf" file with your font (keep the same name, both .OTR and .TTF files will work).

Causion: If you change the font, you will have to change the "font_ratio" parameter inside the "app\src\main\res\values\integer.xml" file. This parameter shows the position of font's vertical center (from the top in percent of its height). We need this value in order to calculate the same positions for both screen on and off modes (don't ask why :P).

View attachment 4559956

Sooo... we need "y" in terms of height%. To calculate it you can just see if the texts moves between screen on/off. Raise or decrease "font_ratio" until you find the perfect spot :P

If you want to know more about this...

When screen is on, vertical positions are based on the vertical center of the font. On the other hand, when screen is off, texts are like images thus the positions are based on the top left corner of the font. However, i have found a way to calculate horizontal and vertical centers. For more take a look at each widget's slpt code...

For developers

To add more fonts in your code, edit the "app\src\main\java\com\dinodevs\greatfitwatchface\resource\ResourceManager.java" file. Then you have to change these code for every element you whant to change to a second font:

//Screen on: in the init function, Screen off: in the buildSlptViewComponent function
ResourceManager.getTypeFace(service.getResources(), ResourceManager.Font.FONT_FILE)

Images:

When screen is on:

All "screen on" images are gathered in the "res" folder (this is the default images directory on android projects). These images can be in any rgb color.

When screen is off (slpt mode):

On the other hand, all "screen off" images are gathered in the "assets" folder. These images must have a specific color pallete consist of 8 colors:

#ffffff

#ffff00

#ff00ff

#ff0000

#00ffff

#00ff00

#0000ff

#000000

Here is the pallete i use in gimp: View attachment 4559987 (css exported pallete, unzip it and import it).

If you don't convert the screen off images in this pallete, at best the image would be converted automatically or they will not show up at all.

I will explain all the images included in this project in the next update. To be continued...​