Click here to Skip to main content
15,860,861 members
Articles / Programming Languages / C#
Tip/Trick

How to Display a Battery Charge Level in Xamarin Forms using Font Awesome

Rate me:
Please Sign up or sign in to vote.
3.00/5 (6 votes)
22 Sep 2018CPOL1 min read 15.1K   5   3
The tricky part is how to code the Unicode value that the label receives...

Introduction

I was building a Xamarin Forms application with an interface that displays the charge level of a battery. I choose to do it with Font Awesome to give uniform aspect to this application with the website the same product has.

Background

I start adding Font Awesome icons to the Xamarin Forms project. This link shows you how to add the icons to the different platforms project in Xamarin step by step.

For IOS, it's required to add the fontawesome fonts to the Info.plist under the "Fonts provided by application" key:

XML
<key>UIAppFonts</key>
<array>
<string>Font Awesome 5 Brands-Regular-400.otf</string>
<string>Font Awesome 5 Free-Regular-400.otf</string>
<string>Font Awesome 5 Free-Solid-900.otf</string>
</array>

Font Awesome offers five icons for battery according to the charge level: battery-empty, battery-quarter, battery-half, battery-three-quarters, battery-full. 

Image 1

Additionally, it was required to create a value converter, from the value of the charge level that is a number from 0 to 100 to the matching icon Unicode. You can read more about value converters here.

Using the Code

Labels can display Font Awesome icons having the right font family and text set, like this one:  

XML
<Label Text="&#xf240;" 
   FontSize="20"
   TextColor="DarkGray"
   VerticalOptions="Center" 
   HorizontalOptions="Center" >
    <Label.FontFamily>
        <OnPlatform x:TypeArguments="x:String"
            Android="Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free Solid" 
            iOS="FontAwesome5FreeSolid" 
            WinPhone="Assets/Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free" />
    </Label.FontFamily>
</Label>

For the case that the Text attribute is programmatically set, you need a value converter.

In order to convert from the 0 to 100 percentage number to the Unicode value, I created the following value converter:

C#
using System;
using Xamarin.Forms;

namespace XamarinForm
{
     public class PercentageValueToUnicodeConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, 
                              object parameter, System.Globalization.CultureInfo culture)
        {
            int Length = Int32.Parse(value.ToString().ToLower());
            int range = Length / 25;
            switch (range)
            {
                case 0:
                    return "\uf244";                    
                case 1:
                    return "\uf243";
                case 2:
                    return "\uf242";
                case 3:
                    return "\uf241";
            }
            return "\uf240";
        }

        public object ConvertBack(object value, Type targetType, 
                                  object parameter, System.Globalization.CultureInfo culture)
        {
            // this convert the other way around
            throw new NotImplementedException();
        }
    }
}

In this way, the label receives the Unicode for the right icon to display.

The next step is to add the value converter in your XAML page resources: 

XML
<ContentPage.Resources>
    <ResourceDictionary>
        <local:PercentageValueToUnicodeConverter x:Key="PercentageValueToUnicodeConverter" />
    </ResourceDictionary>
</ContentPage.Resources>

Finally, the label's Text attribute can do the binding with the BatteryLevel value:

XML
<Label Text="{Binding BatteryLevel, Converter={StaticResource PercentageValueToUnicodeConverter}}" 
   FontSize="25"
   TextColor="SkyBlue"
   VerticalOptions="Center" 
   HorizontalOptions="Center" >
    <Label.FontFamily>
        <OnPlatform x:TypeArguments="x:String"
                Android="Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free Solid" 
                iOS="FontAwesome5FreeSolid"
                WinPhone="Assets/Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free" />
    </Label.FontFamily>
</Label>

Points of Interest

Finally, the tricky part is how to code the Unicode value that the label receives...

History

  • 20th August, 2018: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Canada Canada
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionScaling off. Pin
James Curran21-Aug-18 5:12
James Curran21-Aug-18 5:12 
I think your scaling is not what people would expect.

If I followed the code correctly, you'd get:
 0 - 24 % => empty
25 - 49 % => one quater.
50 - 74 % => one half
75 - 99 % => three quaters
100% (only) => full.

So, as soon as you lose 1% of battery charge, you show it as 3/4 full.

I think a better representation could be had be adding 10 to Length before the divide, so then it would be:
 0 - 14 % => empty
15 - 39 % => one quater.
40 - 64 % => one half
65 - 89 % => three quaters
90 -100 % => full.
Truth,

James

AnswerRe: Scaling off. Pin
Nelek21-Aug-18 5:57
protectorNelek21-Aug-18 5:57 
QuestionToLower()??? Pin
James Curran21-Aug-18 4:59
James Curran21-Aug-18 4:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.