How to create a nice rouded icon

In a post I have already described how to have a Image inside a Circle, using James Montemagno’s plugin. James’ plugin works with Images. Today I would like to use that permits to use icon fonts in your Xamarin.Android, Xamarin.iOS, or Xamarin.Forms application!

It uses fonts like Font Awesome and Ionicons.

Results are wonderful (“ion-help-circled”): Screenshot 2017-03-22 13.14.40

This is the “ion-information-circled” from Ionicons. You can set the IconSize and the IconColor property and other properties.

Screenshot 2017-04-17 20.31.31

In this case I have used an Horizontal StackLayout, with a Label and an IconImage.

Label l = new Label() {Text  = "Press the icon", VerticalOptions = LayoutOptions.Center, FontSize = 40 };
IconImage iconImage = new IconImage() { IconColor = Color.Gray, IconSize = 40, VerticalOptions = LayoutOptions.Center};
iconImage.Icon = Iconize.FindIconForKey("ion-information-circled").Key;
StackLayout sl = new StackLayout() { VerticalOptions = LayoutOptions.Center, Orientation = StackOrientation.Horizontal, Children =  { l, iconImage }, Margin = new Thickness(0,20,0,0) };

Changing the Color, you change the “gray” color (background) not the “i” color; also setting BackgroundColor property (to “Red”), I have not a good result:

Screenshot 2017-04-17 20.33.25

So, how can I have this “i” icon with a different color, inside a circle, and with (why not) a border? Searching I have found this plugin that works for Android and iOS. It permits to have a lot of shapes, and can help us to reach our goal.

Now I can use a “ion-information” (not “circled”) and add it to a ShapeView, and this is the result.

Screenshot 2017-04-17 20.46.46

I can set the “i” color, the circle color, the border color and a lot of other properties. I can also decide if I want a “circle”, a “box” or other types of containers.

Screenshot 2017-04-17 20.45.55

Label l = new Label() {Text  = "Press the icon", VerticalOptions = LayoutOptions.Center, FontSize = 40 };
IconImage iconImage = new IconImage() { IconColor = Color.White, IconSize = 40, VerticalOptions = LayoutOptions.Center};
iconImage.Icon = Iconize.FindIconForKey("ion-information").Key;
var circle = new ShapeView
                 ShapeType = ShapeType.Circle,
                 HeightRequest = 75,
                 WidthRequest = 75,
                 Color = Color.Green,
                 VerticalOptions = LayoutOptions.Center,
                 CornerRadius = 5,
                 BorderColor = Color.Red,
                 BorderWidth = 1f,
                 Content = iconImage
StackLayout sl = new StackLayout() { VerticalOptions = LayoutOptions.Center, Orientation = StackOrientation.Horizontal, Children =  { l, circle }, Margin = new Thickness(0,20,0,0) };

If you need a “click” on the circled “i”, you can use a TapGestureRecognizer.

Let me know if you need other information…

You can fine a repo here



Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:


Stai commentando usando il tuo account Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...