CODEWITHSUNDEEP
c#androidsvgxamarin.formsxamarin.android
Dan
Dan

Reputation: 184

svg icon not showing up in tool bar item

Why is my svg not showing up? This image is under drawable folder and build action is set to AndroidResouces

<ContentPage.ToolbarItems>
    <ToolbarItem Name="Edit" Order="Primary" Priority="0" />
    <ToolbarItem IconImageSource="ellipsisV.svg" Order="Primary" Priority="1" />
</ContentPage.ToolbarItems>

I also tried putting this image under shared folder and setting build action to embedded resources but image is not showing up

I also tried this but svg image doesnt show up bc i need to set fontfamily to "FAS" but toobaritem doesnt have that fontfamily property

<ContentPage.ToolbarItems>
    <ToolbarItem Name="Edit" Order="Primary" Priority="0" />
    <ToolbarItem Text="{StaticResource ellipsisV}" Order="Primary" Priority="1" />
</ContentPage.ToolbarItems>

app.xml

<x:String x:Key="ellipsisV">&#xf142;</x:String>

assemblyinfo.cs

 [assembly: ExportFont("FontAwesome-Free-Solid-900.otf", Alias = "FAS")]

Upvotes: 0

Views: 684

Answers (3)

Leo Zhu
Leo Zhu

Reputation: 14956

As Ivan Ičin said above.Android doesn't support svg files,you could display SVG with some commonly used third-party controls.

Like FFImageLoading

You could use it with NavigationPage.TitleView.

<NavigationPage.TitleView>
   <StackLayout  Orientation="Horizontal" HorizontalOptions="End" VerticalOptions="FillAndExpand">
       <Label Text = "Edit"  VerticalOptions="Center" />
       <ffimageloadingsvg:SvgCachedImage Source="ellipsisV.svg"/>
   </StackLayout>
</NavigationPage.TitleView>

or you could customize a layout in place of ToolBarItem.

Upvotes: 1

Ivan I
Ivan I

Reputation: 9990

Android doesn't support svg files, so you need to convert them to Android xml drawable using Android Studio if you really need that (and it doesn't work well for all svg files).

Other than that you could install some package like Xamarin.Forms.Svg that should handle this conversion of svg to ImageSource.

Upvotes: 0

Bas H
Bas H

Reputation: 2216

You can try to give it a Height and width

<ToolbarItem Name="Edit" Order="Primary" Priority="0" />
<ToolbarItem Text="{StaticResource ellipsisV}" Order="Primary" Priority="1" WidthRequest="60" HeightRequest="30"  />

Upvotes: 0

Related Questions