CODEWITHSUNDEEP
imagexamarin.formsbackground
Sreejith Sree
Sreejith Sree

Reputation: 3766

Xamarin Forms: How to give exact circle background for icons?

I have some icons on my xamarin forms project. I need a circle background for my icon. See the screenshot below:

enter image description here

I tried Xam.Plugins.Forms.ImageCircle plugin and tried Framelayout. Imagecircle plugin only cropping the icon and Framelayout gives a rounded corner layout. Nothing gives me a perfect circle background. I go through the FFImageloading documentation, but which is also the same as Imagecircle plugin.

Image code

<Image 
   Source="ic_group_fill_xx.png"
   WidthRequest="25"
   HeightRequest="25"/>

Is there any way to achieve this feature?

Upvotes: 0

Views: 1333

Answers (3)

FreakyAli
FreakyAli

Reputation: 16587

I usually prefer to make an icon that by default has a circle in it, doesn't make sense to add extra code for something that can be done for free.

There is great document by Android on working with Images for Android applications which can be found here, you can also use Android Asset Studio for creating awesome images.

Upvotes: 3

KiShOrE
KiShOrE

Reputation: 925

Use the ImageCircle.Forms.Plugn plugin which I am already using it, Import namespace like below,

xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"

And use the image control like below sample,

<controls:CircleImage 
          Source="{Binding ProfileImage}" 
          HorizontalOptions="Start" 
          VerticalOptions="Center" 
          WidthRequest="40" 
          Aspect="AspectFill" 
          BorderColor="#B8BCC9" 
          BorderThickness="1" 
          HeightRequest="40" />

Upvotes: 0

Ahmed Sarfraz
Ahmed Sarfraz

Reputation: 357

I normally use an ImageButton for this (and because of the clicked property you don't need to use Gesture Recognizers for detecting taps)

The code below gives me a perfect circle on Android & iOS

<ImageButton Source="icon_name"
                     BackgroundColor="Blue"
                     HeightRequest="60"
                     WidthRequest="60"
                     CornerRadius="30"
                     Padding="15"
                     Clicked="Btn_Clicked" />

The image below is from my app, the image button is inside AbsoluteLayout and the icon is 64x64 Image Button Used in-app it has the same properties as the code above)

Upvotes: 2

Related Questions