Use font awesome icon for tabbed page tabs - xamarin.forms

This is how I add tabs to a tabbed page.
I have Font awesome icons working at various places in my app. How do I add icons to my tabs, since I add tabs in the code behind like this:
public partial class MainTabbedPage : TabbedPage
{
public MainTabbedPage(SelectedItem item)
{
InitializeComponent();
var summaryPage = new DeviceSummaryPage(item);
Children.Add(summaryPage);
Children.Add(new DeviceSettingsPage(item));
Children.Add(new FirmwarePage(item));
}
}

How do I add icons to my tabs
First, you need to copy the fonts to the platform-specific projects:
on Android into the Assets folder with Build Action AndroidAsset,
on iOS into the Resources folder with the Build Action BundleResource,
on UWP into the Assets folder with Build Action Content.
Note:On iOS, a change to the Info.plist file is required so that the added fonts can also be used.
The png is on Android Platform.
In order to be able to use the fonts, creat ResourceDictionary in App.xaml
<ResourceDictionary>
<OnPlatform x:Key="FontAwesomeBrands" x:TypeArguments="x:String">
<On Platform="Android" Value="FontAwesome5Brands.otf#Regular" />
<On Platform="iOS" Value="FontAwesome5Brands-Regular" />
<On Platform="UWP" Value="/Assets/FontAwesome5Brands.otf#Font Awesome 5 Brands" />
</OnPlatform>
<OnPlatform x:Key="FontAwesomeSolid" x:TypeArguments="x:String">
<On Platform="Android" Value="FontAwesome5Solid.otf#Regular" />
<On Platform="iOS" Value="FontAwesome5Free-Solid" />
<On Platform="UWP" Value="/Assets/FontAwesome5Solid.otf#Font Awesome 5 Free" />
</OnPlatform>
<OnPlatform x:Key="FontAwesomeRegular" x:TypeArguments="x:String">
<On Platform="Android" Value="FontAwesome5Regular.otf#Regular" />
<On Platform="iOS" Value="FontAwesome5Free-Regular" />
<On Platform="UWP" Value="/Assets/FontAwesome5Regular.otf#Font Awesome 5 Free" />
</OnPlatform>
</ResourceDictionary>
Create a FontImageSource object and set the values accordingly then pass this object to the IconImageSource of your ContentPage.
public TabbedPage1()
{
InitializeComponent();
var solidFontFamily = Application.Current.Resources["FontAwesomeSolid"] as OnPlatform<string>;
var RegularFontFamily = Application.Current.Resources["FontAwesomeRegular"] as OnPlatform<string>;
Children.Add(new simplecontrol.Page1() { IconImageSource=new FontImageSource() { FontFamily = RegularFontFamily, Glyph = "\uf108" } });
Children.Add(new simplecontrol.Page3() { IconImageSource = new FontImageSource() { FontFamily = solidFontFamily, Glyph = "\uf108" } });
}

Related

change font family for picker dialog box in ios using xamarin forms [duplicate]

I have this code:
<Label x:Name="questionGroupHintInfoLabel" FontAttributes="Bold" Text="Folgende Hinweismeldung wurde für die aktuelle Fragengruppe hinterlegt:">
<Label.FontSize>
<OnPlatform x:TypeArguments="NamedSize"
iOS="Small"
Android="Small" />
</Label.FontSize>
</Label>
...and get this error:
No property, bindable property, or event found for FontSize
What i'm doing wrong?
Thanks.
Usually when we set FontSize="value", FontSizeConverter does the conversion to expected type (which is double) to set the value.
But it looks like this converter is not used when we use OnPlatform. So we have two options:
Use OnPlatform with x:Double as type argument.
<OnPlatform x:TypeArguments="x:Double"
iOS="20"
Android="25" />
Or, trick the XAML processor to do the conversion for us - we can do that by using the StaticResource markup extension. Note: This only works if XAMLC is not applied.
<!-- App.Resources or ContentPage.Resources -->
<ResourceDictionary>
<OnPlatform x:Key="FontNamedSize" x:TypeArguments="x:String"
iOS="Small"
Android="Large" />
</ResourceDictionary>
<!-- now you can use static-resource extension to use above defined value -->
<Label x:Name="questionGroupHintInfoLabel"
FontAttributes="Bold"
Text="Folgende Hinweismeldung wurde für die aktuelle Fragengruppe hinterlegt:"
FontSize="{StaticResource FontNamedSize}" />
Recommended Extend Label with NamedSize bindable property and convert to FontSize (basically what the FontSizeConverter does).
public class ExLabel : Label
{
public static readonly BindableProperty FontNamedSizeProperty =
BindableProperty.Create(
"FontNamedSize", typeof(NamedSize), typeof(ExLabel),
defaultValue: default(NamedSize), propertyChanged: OnFontNamedSizeChanged);
public NamedSize FontNamedSize
{
get { return (NamedSize)GetValue(FontNamedSizeProperty); }
set { SetValue(FontNamedSizeProperty, value); }
}
private static void OnFontNamedSizeChanged(BindableObject bindable, object oldValue, object newValue)
{
((ExLabel)bindable).OnFontNamedSizeChangedImpl((NamedSize)oldValue, (NamedSize)newValue);
}
protected virtual void OnFontNamedSizeChangedImpl(NamedSize oldValue, NamedSize newValue)
{
FontSize = Device.GetNamedSize(FontNamedSize, typeof(Label));
}
}
<!-- Usage -->
<local:ExLabel HorizontalOptions="Center" VerticalOptions="Center" Text="This is a custom label">
<local:ExLabel.FontNamedSize>
<OnPlatform x:TypeArguments="NamedSize"
iOS="Large"
Android="Medium" />
</local:ExLabel.FontNamedSize>
</local:ExLabel>
EDIT 1: Option 2 only works if XAMLC is not applied.
EDIT 2: Add option 3.
Note: There is a bug fix available in pre-release versions that can also be considered as an alternative fix. But I haven't been able to confirm if it is fixed in the latest release.
old thread, but i was close to implement item 3 from answer above, when i find this syntax
<Style TargetType="Button" x:Key="ListButtonStyle">
<Setter Property="FontSize" Value="{OnIdiom Phone={OnPlatform Android=Header, iOS=Micro} , Tablet=Large, Desktop=Default}" />
</Style>
checked it with phones with ios and android and it is working nicely .
decided to leave it here.
xamarin.forms 4.8.0.1687
You should try the new XAML for OnPlatform:
<!--Old XAML On Platform-->
<StackLayout>
<StackLayout.Padding>
<OnPlatform x:TypeArguments="Thickness"
Android="0, 0, 0, 0"
WinPhone="0, 0, 0, 0"
iOS="0, 20, 0, 0"/>
</StackLayout.Padding>
</StackLayout>
<!--New XAML On Platform-->
<StackLayout>
<StackLayout.Padding>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="Android" Value="0, 0, 0, 0"/>
<On Platform="WinPhone" Value="0, 0, 0, 0"/>
<On Platform="iOS" Value="0, 20, 0, 0"/>
</OnPlatform>
</StackLayout.Padding>
</StackLayout>
<!--Better new XAML On Platform-->
<StackLayout>
<StackLayout.Padding>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="Android, WinPhone">0</On>
<On Platform="iOS">0,20,0,0</On>
</OnPlatform>
</StackLayout.Padding>
</StackLayout>

Xamarin forms: How to increase the fontsize of label having TextType="Html"?

I have a label in my app UI that takes HTML data. So I set TextType="Html" property for that label. In small-screen devices I need 16 and for big-screen devices I need 32 as it's font size. But no change in label font size because of the TextType="Html" property.
XAML Label Code
<Label
x:Name="message_label"
VerticalOptions="Start"
VerticalTextAlignment="Center"
TextType="Html"
TextColor="Black"
Margin="5"
FontSize="Medium">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="MouseMemoiresRegular" />
<On Platform="Android" Value="MouseMemoiresRegular.ttf#MouseMemoiresRegular" />
<On Platform="UWP" Value="Assets/Fonts/MouseMemoiresRegular.ttf#MouseMemoiresRegular" />
</OnPlatform>
</Label.FontFamily>
<Label.FontSize>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>16</OnIdiom.Phone>
<OnIdiom.Tablet>32</OnIdiom.Tablet>
</OnIdiom>
</Label.FontSize>
</Label>
So how can I increase the font size in this case?
If you want to put html in label, and want to increase the fontsize of label, I suggest you can use Xam.Plugin.HtmlLabel.
Firstly, you can install Xam.Plugin.HtmlLabel in your project,
Then render this in different platform.
iOS: AppDelegate.cs
HtmlLabelRenderer.Initialize();
global::Xamarin.Forms.Forms.Init();
Android: MainActivity.cs
HtmlLabelRenderer.Initialize();
global::Xamarin.Forms.Forms.Init(this, bundle);
UWP: App.xaml.csenter code here
var rendererAssemblies = new[] { typeof(HtmlLabelRenderer).GetTypeInfo().Assembly };
Xamarin.Forms.Forms.Init(e, rendererAssemblies);
HtmlLabelRenderer.Initialize();
than use the HtmlLable like this:
<htmllabel:HtmlLabel FontSize="12" Text="<h1>Hello World!</h1><br/>SecondLine" />
<htmllabel:HtmlLabel FontSize="20" Text="<h1>Hello World!</h1><br/>SecondLine" />
You can change different fontsize in htmllabel.

App Resources not working using Static Resource / Static Extension

Good day! I am using Prism 7.2 along with Xamarin.Forms 4.2 and I am trying to use an external asset for fonts. I have defined them on my app resources and used it on my xaml code, however, when I try to use the static extension {x:Static} for the value of Text combined with Style that also has a static resource extension {StaticResource} the text doesn't appear to be working. Below is the code that I am using.
<prism:PrismApplication.Resources>
<ResourceDictionary>
<OnPlatform x:Key="LineAwesomeFontFamily" x:TypeArguments="x:String">
<On Platform="Android" Value="line-awesome.ttf#LineAwesome"/>
<On Platform="iOS" Value="lineawesome"/>
</OnPlatform>
<Style x:Key="LineAwesomeFonts"
TargetType="Label">
<Setter Property="FontFamily"
Value="{StaticResource LineAwesomeFontFamily }" />
</Style>
<Style TargetType="Button">
<Setter Property="BackgroundColor" Value="Green"/>
</Style>
</ResourceDictionary>
</prism:PrismApplication.Resources>
Calling it in a view
<Label Text="{x:Static fonts:LineAwesomeFonts.Adjust}"
Style="{StaticResource LineAwesomeFonts}"
TextColor="Black">
</Label>
If I try in a different way
<Label x:Name="testLabel"
FontSize="28" TextColor="Black">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="Android" Value="line-awesome.ttf#LineAwesome"/>
</OnPlatform>
</Label.FontFamily>
</Label>
and call the testLabel on xaml.cs for it to have a value it will work.
Any idea what am I doing wrong? There are no errors to be found when it compiled.
Okay, it is my fault.
public App(IPlatformInitializer platformInitializer) : base(platformInitializer)
{}
protected override void OnInitialized()
{
InitializeComponent(); //moved this away from App constructor and put it here
NavigationService.NavigateAsync("Test");
}
Though it was weird because my InitializeComponent(); on the other project was on the App Constructor and resources was working as intended.

How to add font icon in toolbar item in xamarin forms

I have using navigation page in my application. I have to set font icon to toolbar item. But it shows cross symbol because i have not set the font family. So anyone suggest me to set font icon in toolbar item is possible or not.
With Xamarin Forms 4.x (if I remember the version correctly) they have add a FontImageSource type that can be used on ToolbarItems. A few things you need to do...
Add the font files to your platform projects. On Android, add them in the Assets folder with build action set to AndroidAsset. On iOS, add them in the Resources folder with build action set to BundleResource. Also on iOS, edit your info.plist and add
<key>UIAppFonts</key>
<array>
<string>fontname.ttf</string>
<string>fontname2.ttf</string>
...
</array>
Now Xamarin is able to use the fonts.
I defined some application resources to easily load fonts:
<OnPlatform x:Key="FontAwesomeLightFontFamily" x:TypeArguments="x:String">
<On Platform="Android" Value="fa-light-300.ttf#Font Awesome 5 Pro Light" />
<On Platform="iOS" Value="FontAwesome5Pro-Light" />
</OnPlatform>
<OnPlatform x:Key="FontAwesomeRegularFontFamily" x:TypeArguments="x:String">
<On Platform="Android" Value="fa-regular-400.ttf#FontAwesome5ProRegular" />
<On Platform="iOS" Value="FontAwesome5ProRegular" />
</OnPlatform>
<OnPlatform x:Key="FontAwesomeSolidFontFamily" x:TypeArguments="x:String">
<On Platform="Android" Value="fa-solid-900.ttf#FontAwesome5ProSolid" />
<On Platform="iOS" Value="FontAwesome5ProSolid" />
</OnPlatform>
That is sitting in a resource dictionary that is merged into App.xaml resources.
Now, when I want to use a font icon as a toolbar icon imagesource, I can do the following:
<Page.ToolbarItems>
<ToolbarItem Command="{Binding SomeCommand}">
<ToolbarItem.IconImageSource>
<FontImageSource
FontFamily="{StaticResource FontAwesomeSolidFontFamily}"
Glyph="{x:Static fonts:FontAwesomeIcon.Cog}"
Size="{StaticResource ToolbarIconImageSourceSize}" />
</ToolbarItem.IconImageSource>
</ToolbarItem>
</Page.ToolbarItems>
If you want a static class to define glyph icons as opposed to having to enter the unicode (my FontAwesomeIcon class used in glyph above), there is a great tool at https://andreinitescu.github.io/IconFont2Code/ that will generate a C# static class based on an uploaded font file. It ends up looking like
public static class FontAwesomeIcon
{
public const string Abacus = "\uf640";
public const string Ad = "\uf641";
public const string AddressBook = "\uf2b9";
public const string AddressCard = "\uf2bb";
public const string Adjust = "\uf042";
public const string AirFreshener = "\uf5d0";
...
}
<ContentPage.ToolbarItems>
<ToolbarItem Order="Primary" Command="{Binding ExportDocumentCommand}">
<ToolbarItem.IconImageSource>
<FontImageSource FontFamily="{StaticResource FontAwesomeSolid}" Size="Subtitle"
Glyph="{x:Static fontawesome:FontAwesomeIcons.FileExport}" />
</ToolbarItem.IconImageSource>
</ToolbarItem>
</ContentPage.ToolbarItems>
in app.xaml
<OnPlatform x:TypeArguments="x:String" x:Key="FontAwesomeSolid">
<On Platform="iOS" Value="FontAwesome5Free-Solid" />
<On Platform="Android" Value="Fonts/FontAwesome5Solid.otf#Regular" />
<On Platform="UWP" Value="/Assets/FontAwesome5Solid.otf#Font Awesome 5 Free" />
</OnPlatform>
for work this line "Glyph="{x:Static fontawesome:FontAwesomeIcons.FileExport}""
you need add on page
xmlns:fontawesome="clr-namespace:YourProjectName.Styles"
and add class from GitHub
You can try to use FontAwesome
First,we need to go to website: https://fontawesome.com/ to get vector icons and social logos on website with Font Awesome.
After we download the font and put it in our app, we can use it flexibly.
Here is a demo you can check it.
The main code is as follows:
App.xaml
<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="MyFontApp.App">
<Application.Resources>
<ResourceDictionary>
<OnPlatform x:TypeArguments="x:String"
x:Key="FontAwesomeBrands">
<On Platform="Android"
Value="FontAwesome5Brands.otf#Regular" />
<On Platform="iOS"
Value="FontAwesome5Brands-Regular" />
<On Platform="UWP"
Value="/Assets/FontAwesome5Brands.otf#Font Awesome 5 Brands" />
</OnPlatform>
<OnPlatform x:TypeArguments="x:String"
x:Key="FontAwesomeSolid">
<On Platform="Android"
Value="FontAwesome5Solid.otf#Regular" />
<On Platform="iOS"
Value="FontAwesome5Free-Solid" />
<On Platform="UWP"
Value="/Assets/FontAwesome5Solid.otf#Font Awesome 5 Free" />
</OnPlatform>
<OnPlatform x:TypeArguments="x:String"
x:Key="FontAwesomeRegular">
<On Platform="Android"
Value="FontAwesome5Regular.otf#Regular" />
<On Platform="iOS"
Value="FontAwesome5Free-Regular" />
<On Platform="UWP"
Value="/Assets/FontAwesome5Regular.otf#Font Awesome 5 Free" />
</OnPlatform>
</ResourceDictionary>
</Application.Resources>
class FontAwesomeIcons
namespace MyFontApp.Utils
{
public static partial class FontAwesomeIcons
{
public const string FiveHundredPX = "\uf26e";
public const string Abacus = "\uf640";
public const string AccessibleIcon = "\uf368";
// other font icon codes
}
}
And we use like this:
<NavigationPage.TitleView >
<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
<Label Text="{x:Static Utils:FontAwesomeIcons.Map}"
FontFamily="{StaticResource FontAwesomeSolid}"/>
<Button Text="{x:Static Utils:FontAwesomeIcons.Anchor}"
FontFamily="{StaticResource FontAwesomeSolid}"/>
</StackLayout>
</NavigationPage.TitleView>
The result is:
You can review the full demo here.
For more details, you can check: https://medium.com/#tsjdevapps/use-fontawesome-in-a-xamarin-forms-app-2edf25311db4

Setting image in app.xaml depending on platform

Hi I have been trying to set icon in my application based on images in the app.xaml
I have tried the following and they do not work:
usage in my page Icon="{StaticResource MyImageKey}">
<ImageSource x:Key="MyImageKey" >
<OnPlatform x:TypeArguments="ImageSource"
iOS="MyImage.jpg"
Android=""/>
</ImageSource>
<OnPlatform x:Key="MyImageKey"
x:TypeArguments="ImageSource">
<On Platform="iOS">"MyImage.png"</On>
<On Platform="Android">""</On>
</OnPlatform>
can you point me in the right direction?
thanks
You need add style in App resource like below :
<Application.Resources>
<ResourceDictionary>
<OnPlatform x:Key="MyImageKey"
x:TypeArguments="ImageSource"
iOS="contact.png"
Android="contact.png"
WinPhone="contact.png" />
</ResourceDictionary>
</Application.Resources>
Now you can use like below :
<Image Source="{StaticResource MyImageKey}"
HorizontalOptions="Center"
VerticalOptions="Center" />

Resources