The battery percentage is a field available on the device object. Hence, it can be accessed in the GUI editor like so
${Device.batteryPercentage}%
The algorithm to derive percentage from the raw value read from the ADC produces an approximation that takes into account a number of additional attributes (one of which being the device type). If the device is not battery-powered (i.e. by USB or USB-to-Serial instead) the algorithm reports 0 as the system can't know for sure what the effective value is.
The battery symbol uses the following condition stack based on the percentage (it's all Freemarker):
<#if (Device.batteryPercentage < 5)>
${"\xf244"}
<#elseif (Device.batteryPercentage < 50)>
${"\xf243"}
<#elseif (Device.batteryPercentage < 75)>
${"\xf242"}
<#elseif (Device.batteryPercentage < 95)>
${"\xf241"}
<#else>
${"\xf240"}
</#if>
The effective symbol is a unicode character code referencing a character in the selected font "Font Awesome". If you add an icon to your screen (the smily button) and type "bat" you'll see the available ones.