Loading...

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

View: 35    Dowload: 0   Comment: 0   Post by: admin   Category: Mobile applications   Fields: Other

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

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

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.

Posted on 24-09-2018 

Comment:

To comment you must be logged in members.

Files with category

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

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

    View: 36    Download: 0   Comment: 0

    Category: Mobile applications     Fields: Other

    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.

  • 8-bit LED Binary Counter

    8-bit LED Binary Counter

    View: 52    Download: 0   Comment: 0

    Category: Mobile applications     Fields: Other

    This article offers a simple implementation of the binary counter powered by Raspberry PI3 and 8 LEDs. It is very similar to what was done before for Arduino board in the previous article Connecting an Arduino to a Breadboard to Light Up LEDs. In...

  • Chat App

    Chat App

    View: 84    Download: 3   Comment: 0

    Category: Android     Fields: none

    This is a Chat App for Android mobile. You can make separate chat with you partner. I'm using Mysql Database and Php code and All APIs are develop on PHP (REST APIs). My whatsApp:+918285672453: Email ID: nirbhayiise@gmail.com

  • Tower Defense 3D

    Tower Defense 3D

    View: 67    Download: 0   Comment: 0

    Category: Android     Fields: Game - Entertainment

    The goal in this game is to protect your territory against the attacking enemies. Place defensive structures on or along their path of attack to prevent them reaching your base. Strategic choice and positioning of defensive elements is an essential...

  • Flap the Bird

    Flap the Bird

    View: 41    Download: 0   Comment: 0

    Category: Android     Fields: Game - Entertainment

    Tap your screen to make the bird fly. While you are flying there are destruction that will stop you. Avoid hitting the floor and flying to high this will deduct your life. You can collect coins and life along the way. For more mobile games and...

  • Bad Santa

    Bad Santa

    View: 55    Download: 0   Comment: 0

    Category: Android     Fields: Game - Entertainment

    This is a simple shooting game where the Bad Santa is shooting the bad snowman and reindeer. You can collect coins and life along the way. For more mobile games and tutorials you can visit this site.

  • Flappy Halloween Game

    Flappy Halloween Game

    View: 49    Download: 0   Comment: 0

    Category: Android     Fields: Game - Entertainment

    Flappy Halloween is a simple game, tap the screen to move the player. Shoot the pumpkin in the ring to gain score. Avoid hitting the flying destructions and falling from the ground. Since the Halloween is coming this game is really perfect to play...

  • Tilt Ball Game

    Tilt Ball Game

    View: 40    Download: 0   Comment: 0

    Category: Android     Fields: Game - Entertainment

    This game is simple you need to tilt your device to make the ball move in your own desired direction. Reach the finish line before the time ends and move to the next level.

 
File suggestion for you
Loading...
File top downloads
Loading...
Loading...
Codetitle - library source code to share, download the file to the community
Copyright © 2018. All rights reserved. codetitle Develope by Vinagon .Ltd