Click here to Skip to main content
13,793,777 members
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

6.4K views
6 bookmarked
Posted 20 Aug 2018
Licenced CPOL

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

, 22 Sep 2018
Rate this:
Please Sign up or sign in to vote.
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:

<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. 

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:  

<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:

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: 

<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:

<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)

Share

About the Author

Silvia Campo
Canada Canada
No Biography provided

You may also be interested in...

Pro

Comments and Discussions

 
QuestionScaling off. Pin
James Curran21-Aug-18 6:12
memberJames Curran21-Aug-18 6:12 
AnswerRe: Scaling off. Pin
Nelek21-Aug-18 6:57
protectorNelek21-Aug-18 6:57 
QuestionToLower()??? Pin
James Curran21-Aug-18 5:59
memberJames Curran21-Aug-18 5: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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web05 | 2.8.181207.3 | Last Updated 23 Sep 2018
Article Copyright 2018 by Silvia Campo
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid