Creating a Battery Indicator Watch Face for Garmin

Today, I want to show you how to create a very simple battery indicator in Garmin. I want to create a label that shows the current battery percentage which also changes colour depending on the percentage level.

So, I’ll start by creating a new label in the watch that I will use. This is my layout.xml:

https://gist.github.com/IT-Delinquent/884ee7296a748f48582db41a17c94289

Now, in the View.mc file I will use this label to add the battery percentage and assign a colour based on that percentage.

First, I will paste in my updateDisplayObject method to update the label text:

https://gist.github.com/IT-Delinquent/191ca9eca60affd4819883c7b5dc6ee9

I will then create a method to update the battery label’s text colour based on the battery percentage. This will need to take in the battery percentage as a parameter:

https://gist.github.com/IT-Delinquent/35fafbbe4a46291753c12476dc932b86

From the above code, you can see I am assigning a specific color based on the batter percentage on a three tier system. The label colour will be based on the following rules:

Values	Color
Greater than 75%	Green
Lower than 75% and higher than or equal to 25%	Yellow
Lower than 25%	Red

Battery label colour table

I can now update the onUpdate method to use the above methods to show the battery indicator correctly. This is what the onUpdate method looks like:

https://gist.github.com/IT-Delinquent/e1642c0fa08af1769ad0a6bb206f3f15

After all that, you can see the watch face showing the correct three colours below: