A little workaround for a great Plugin: ImageCirclePlugin

At the end of 2014, James Montemagno has presented his ImageCircle Plugin. It’s a “very simple” plugin. It allows to display rounded images instead of standard images. Plugin has its repository on GitHub so you can download it and test using the ImageCircleTest project.

If you run the test project, you have an output like this:

screenshot_1486477163

Some monkeys and an empty circle.

If you take a look to the code, the image in the center is from an url:

Source = UriImageSource.FromUri(new Uri("http://upload.wikimedia.org/wikipedia/commons/e/ed/Saguinus_tripartitus_-_Golden-mantled_Tamarin.jpg"))

saguinus_tripartitus_-_golden-mantled_tamarin

I like it. Now I would like to change the image because I want to use this Plugin in a project, and I would like to have this image inside a circle:

shopping-bag-icon

So:

  • I download the image
  • Copy the image in Droid.Resource.Drawable
  • Add it to the Project in Xamarin Studio (Android Project)
  • Rename the image (Xamarin does not like “-“)
  • Modify the source
 Source = "shoppingbagicon.png"

This is the result:

screenshot_1486479264

Not too bad. I like it. But I would like the bag should be ALL visible. It’s like I have a bigger image that is cut by the circle. Indeed it is! If you set the BackgroundColor to red, you understand where are the boundaries of the image.

screenshot_1486483061

Speaking with James on Slack’s channel, he suggests to me to change the “Aspect” property, otherwise the solution should be to take a look to Platform specific implementation.

Changing the “Aspect” has been useless.

Modify the Custom Renderer… too difficult for me.

So, how can I have an image ALL inside a circle, where I can change the circle’s size and color? I have found this workaround:

  • create a Grid with 1 row and 1 column
  • create an Image
  • create an ImageCircle
  • add to the Grid the ImageCicle and the Image

this is the code

CircleImage ci = new CircleImage
{
  BorderColor = Color.Pink,
  FillColor = Color.Olive,
  BorderThickness = 3,
  HeightRequest = 150,
  WidthRequest = 150,
  Aspect = Aspect.AspectFill,
  HorizontalOptions = LayoutOptions.Center,
};
 
Image image = new Image()
{ 
  Source = "shoppingbagicon.png", 
  WidthRequest =  ci.WidthRequest - 40, 
  HeightRequest = ci.HeightRequest - 40, 
  HorizontalOptions = LayoutOptions.Center, 
  VerticalOptions = LayoutOptions.Center, 
};
 
Grid grid = new Grid() {HorizontalOptions = LayoutOptions.Center };
grid.Children.Add(ci, 0, 1, 0, 1);
grid.Children.Add(image, 0, 1, 0, 1);

Then you have to add the grid to your StackLayout, and we have this result:

screenshot_1486496207

A CircleImage with the image ALL inside the circle (the second in the list). It’s ok for me.

You can find the “updated” source in this fork: https://github.com/acaliaro/ImageCirclePlugin

Annunci

Un pensiero su “A little workaround for a great Plugin: ImageCirclePlugin

  1. Pingback: How to create a nice rouded icon | I am a programmer

Rispondi

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

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. 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...