How To Create and Install Mi Band 4 Watchfaces




Luis Silva


(Sep. 2019)



 

There's no doubt that the Xiaomi Mi Band 4 is bounded to be successful. According to IDC, Xiaomi's Mi Band 3 alone accounted for over 30% of all wrist bands shipped worldwide during 4Q18, only second to the Apple Watch in the wearables category. With Xiaomi stating (via GSMArena) that it has sold 1 million units of the Mi Band 4 in just eight days, it is evident that its design and features associated with its competitive price makes it a clear winner.

The new wearable offers some improvements over its predecessors, including the ability to install custom watchfaces on its colored AMOLED display. So, I went and bought one to check this out. After a couple of weeks getting to know its pros and cons as well as all the available apps that allow you to add new watchfaces, I've decided to go deep and make a custom watchface myself. So, if you want to get your "hands dirty" too, just follow this tutorial.


How to install a custom watchface on the Mi Band 4

There are already thousands of them available out there.

The easiest way you can get one is by downloading an app that does this almost automatically, so let's start by reviewing the top 4:

Amazfaces


This is my favorite app not only because you can find lots of watchfaces (currently over 30.000) for all the compatible Xiaomi Amazfit smartwatches, but you can also browse them on https://amazfitwatchfaces.com/.

If that alone is not enough, new custom watchfaces usually emerge first on this platform.

You can also choose one of the available languages or versions when you download them.

What I don't like about this app is that when listing the recently uploaded watchfaces it doesn't at least state the date they were uploaded.

MiBand4

I like this one because it allows you to check at least four watchfaces at a glance and it shows the date they were uploaded, so if you remember when you last checked them, you really know which ones are new. You can, of course, also sort them by popularity.

You can check the language of the watchface next to each preview image.

Watchfaces for Mi Band 4


You can see at least six watchfaces at a time within this app, and the app itself is very responsive, but you won't get an animated preview of the watchface like in the other apps. You also don't have any way to know for sure if you already saw that particular recent watchface.

You can check the language next to each preview image.

Xiaomi Mi Band 4 Watchfaces

The first thing you have to do each time you open this app is to choose the watchfaces language from the app menu. It only shows one to two watchfaces at a time, and the only way you get to know its language is by checking a tiny little flag next to each one of them.

You can also see an animated preview, but you have to click on the face first.


For each and every app, you have to select a watchface and download it. Then you have to open the Mi Fit app, click on Profile, Mi Smart Band 4, Band display settings, and My band displays. Then you have to choose a watchface and click on Sync watchface. It should sync in about half a minute.


Related articles:


Xiaomi Mi Band 4 Q&A (Top 50 FAQs)


Choose The Right Smartwatch For You In Under 3 Min.

How to create your own watchface

Now things are starting to be more complicated, but way more interesting and the possibilities are endless!

First of all, let me say that creating a watchface isn't that difficult, or at least not as hard as it sounds. You don't even need to know or do any programming. Of course, it all depends on the level of customization you want to do, but if you opt to use an existing font from another watchface or keep things in the same position, you can save a lot of time and work.

One thing that helps a lot is having and knowing how to work with Photoshop, but I believe any other image editing software will (have to) do, as long as it's compatible with .png files and its transparent backgrounds.

You'll also need to download a pre-existing watchface (there are some great ones here) and decompress it with a tool called MiBandWFTool that you can find here. Just drag the downloaded .bin file and drop it over the executable file (WatchFace.exe) and you'll get a folder with everything that's packed inside the .bin file. Now you get to see what you'll be working with.

From here on out, it all depends on the level of customization that you want to do, and you'll probably be skipping some steps if you don't want to start from scratch.

Everything is image-based, and you'll have to work with .png files. You'll very likely have to edit a .json (text) file, and I strongly recommend you to use an app called Notepad++ for that (you can download it here), but you can use the Windows native Notepad too.


Beginner tips:

#1 Start by making small changes to an existing watchface.

#2 Take a look at the 0000.png file. That's the background image. It's the main piece of your creation, so make it count.

#3 You can work with an existing font from another watchface, or "convert" a Windows font by taking a print screen of the characters you'll need and cut and paste every single one of them over their pre-existing file. A transparent background is almost mandatory.

#4 Take a look at the .json file. It has the name of the project folder and the .bin file. You may need to change (among other things) the starting (and finishing) X and Y coordinates of each group of numbers (or words), the respective alignment, the starting image index and the number of pixels that separate each digit (Spacing). For your information, the Mi Band 4 has 120 pixels horizontally (X) by 240 pixels vertically (Y).

#5 If this still seems a little bit too complicated, just download a couple of totally different watchfaces and analyze the differences between them.

#6 If you don't know what you're doing or if you don't want to massively edit the .json file, respect the dimensions and coordinates of each image. You also shouldn't change their names.

#7 Your project (.bin) file size must be under 320Kb, and it's always safer to delete de old .bin file instead of replacing it with a new one because otherwise, it seems to never decrease its size, even if you do some optimizations.


When you're finished, you'll have to drag and drop the .json file over to the same .exe app you used to decompress the .bin file.


Are you ready to start?

Do you prefer a step by step video?? Click here to watch it on Youtube


At this time you should know how to and be able to make a watchface yourself, but if you prefer to take it slow and follow an example, just keep reading.


Related article:


How To Create And Install VXP Watchfaces


Step by step example guide

This is our end goal and you can download that file to get my .json file and/or my .png files.

But we're starting (almost) from scratch:

#1.1 Download this watchface (the "en" version).



#1.2 Download this app and unzip it.



#2 Copy the downloaded .bin file to the MiBandWFTool_1.4.1\RawImageMode (or similar) folder and drag it over the WatchFace.exe file (application).



#3 Open the en_digital_packed-36670-0bfd5f5105 folder (this will be the project folder, make a backup for future reference) and take a look at everything, especially the 0000.png file (just double click it) and the en_digital_packed-36670-0bfd5f5105.json file (open it with Notepad++).



#4 Download this background file or make one yourself using Photoshop (or something similar). Make sure it has 120x240 pixels.



#5 Add the numbers in all the right places and make them light gray to simulate the digit shadows. Working with image layers does help a lot!



If you're working with photoshop, you can download this file to check out how I've arranged the background image (and change some things yourself).

Or you can download the preview file that I've made which is the same as the background file, but it has an extra layer with some sample data, to get a general idea of what the end result should or would look like.

#6 Search Google for these black and white clip art .png icons:



-moon (save it as 0045.png);

-locker (0046.png);

-Bluetooth (0047.png);

-heart rate;

-battery;

Resize them and add them to their right place.

#7 Save it as the background image (as 0000.png, replacing the existing one). It should look like this:



#8 Go to the project folder. You can delete all the files that you won't need: from 0021.png to 0030.png, from 0055.png to 0064.png and from 0068.png to 0091.png but it's easier if you just leave them there. Otherwise, you'll have to rename (almost) every file to make sure they are all sequential, from 0000.png to 0047.png and change (almost) every ImageIndex units in the .json file.



#9 Rename the project folder and the .json file. In this example, I've renamed them to "en_digital_steel." Delete the log file (.log).



#10 Build the preview image. You can skip this step and use the background image for the next step. You can delete the original ones (the static and the animated).



#11 If you're using Photoshop, open the Window menu and then Info (F8) to get the X and Y coordinates of the elements (also known as complications). Change the X and Y units to pixels (see the image below).



#11.1 Now it's time to edit the .json file. Go to "Time," "Hours," "Tens," and change "X" to 9 and "Y" to 91. Then go to "Ones" and change "X" to 28 and "Y" to 91, and so on...

The next image shows where you have to place your mouse to get the 9 and 91 values.



#11.2 The following ImageIndex values should be changed to 1. You'll find them in:

-"Activity," "Steps," "Number."

-"Pulse," "Number."

-"Date," "MonthAndDay," "Separate," "Month."

-"Date," "MonthAndDay," "Separate," "Day."

#11.3 Delete the "Steps Progress" section of this file, but be careful to not deleting more or less than you should. Take a look at the image below. That's what it should look like after erasing that section.



#11.4 When you get to "Battery" and "Text," change the ImageIndex to 1. Also, remove the "Icon" section (see image below).



#11.5 You'll have to edit the Spacing (number or pixels between digits) values here and there (mostly to 3, but 2 in "Steps") but don't worry, because like I've mentioned before, you can always decompress my already finished watchface, and you'll get to check the correct .json file for this project.

#11.6 Finally, remove the "Heart" section. The end of this file should look exactly like the text in this next image.



#11.7 That's it. Save it and close Notepad++.

#12 Now, just copy your files to the MiBandWFTool_1.4.1\RawImageMode folder or the contents of that folder to the project folder and then, drag and drop the .json file over to the WatchFace.exe application. This will gerenate the .bin file (your packed watchface file).



It will also generate a text file (.log) that you can take a look and see if there were any errors during the compression of your project. If you find something similar to this line "Error|System.IndexOutOfRangeException: Index was outside the bounds of the array." then something went wrong while editing the .json file and you should take a look at it or start from scratch. Make sure all the .png files are sequential.


Tip: You should unpack your own .bin file and check the generated previews to see if everything is in order or if any element is (slightly) out of place.


Installing your own custom watchface

You can manually install the generated "en_digital_steel_packed.bin" file, but it's easier if you just upload it to the amazfitwatchfaces.com website and use the Amazfaces app. That way, you're also sharing your work with others.

You do have to register for an account.

If you want a manual installation guide, or if you need any help, just ask in the comments below.

Please, don't leave with any unanswered questions because I may have an answer, and we'll probably be helping someone else too. Just leave them in a comment below or send me an email and I'll be glad to help.



Related articles:


Xiaomi Mi Band 4 Q&A (Top 50 FAQs)


Top 12 Waterproof Kids Smartwatches


How To Create And Install VXP Watchfaces