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:

	<layout id="WatchFace">
	<label id="BatteryLabel" x="center" y="center" font="Graphics.FONT_NUMBER_THAI_HOT" justification="Graphics.TEXT_JUSTIFY_CENTER" color="Graphics.COLOR_WHITE" />
	</layout>

view raw garminBatteryIndicatorLayout.xml hosted with ❤ by GitHub

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:

	//Update the display object text
	function updateDisplayObject(updateObject, updateText){
	var _viewObject = View.findDrawableById(updateObject) as Text;
	_viewObject.setText(updateText);
	}

view raw garminUpdateDisplayObject.mc hosted with ❤ by GitHub

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:

	//Update the battery text color
	function updateBatteryTextColor(updateBatPerc){
	var _color = Graphics.COLOR_GREEN;
	//Setting battery label color based on percentage
	if (updateBatPerc > 75){
	_color = Graphics.COLOR_DK_GREEN;
	}
	if (updateBatPerc < 75 && updateBatPerc >= 25){
	_color = Graphics.COLOR_YELLOW;
	}
	if (updateBatPerc < 25){
	_color = Graphics.COLOR_RED;
	}
	var _viewObject = View.findDrawableById("BatteryLabel");
	_viewObject.setColor(_color);
	}

view raw garminBatteryIndicatorLabelColor.mc hosted with ❤ by GitHub

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

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:

	// Update the view
	function onUpdate(dc as Dc) as Void {
	//Get and show the current battery percentage
	var pwr = System.getSystemStats().battery;
	var batStr = Lang.format( "$1$%", [ pwr.format( "%2d" ) ] );
	updateDisplayObject("BatteryLabel", batStr);
	//Update battery text color
	updateBatteryTextColor(pwr);
	// Call the parent onUpdate function to redraw the layout
	View.onUpdate(dc);
	}

view raw garminBatteryIndicatorOnUpdate.mc hosted with ❤ by GitHub

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

Enjoy! 🎉