I have some icons on my xamarin forms project. I need a circle background for my icon. See the screenshot below:
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?
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.
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
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" />
Related
I'm using this awesome tutorial for xamarin forms in order to get multiple images from gallery on android devices: https://www.xamboy.com/2019/03/12/select-multiple-images-and-videos-in-xamarin-forms/
Everything is working fine. I wonder if there's a way, on code implementation for Android, to intercept when user click on each image.
Right now there is just method for OnActivityResult. Any idea?
Maybe use something like that:
<Image>
<Image.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Tapped="MyMethodThatFiresWhenImageIsTapped"/>
</Image.GestureRecognizers>
</Image>
I want to display some .gif icons on android project.. but many icons not moving.. I don't know why.. ?
I have a <Image/> with propertie: IsAnimationPlaying="True" and this work only for three gifs and other gifs not moved...
<Image Source="rain.gif"
IsAnimationPlaying="True"
WidthRequest="40"
HeightRequest="40"
Grid.Row="2"
Grid.Column="1"/>
In drawable folder I set all gifs to AndroidResource property but this not work..
Аnd after all, the icon is not the one I placed in drawable folder.
I set rain.gif who is not this one from the screenshot.
This is real icon rain.gif:
So the first three .gif icons is moved and worked (thermometers), other .gif icons not worked and rain.gif is different I don't know why ?
Could it be that the problem is that I have the same name with different extensions in drawable folder, like: rain.jpg rain.png...
I try many times to clear the project and build again and again but not worked for me..
Becasue Android doesn't have built-in support for loading gif into ImageViews.
You could display gif with some commonly used third-party controls.
Like FFImageLoading
<ffimageloading:SvgCachedImage Source="rain.gif" WidthRequest="40"
HeightRequest="40"
Grid.Row="2"
Grid.Column="1"/>
I have several images with the png extension in my project where in android and ios they appear correct, already in universal windows they do not appear. I made the test the following I changed one of the images to jpg and funcionol, appeared my image in universal windows. Will I have to change all the images? Or do you have a way to solve this so that my images will be PNG?
An example of how I call the pictures ...
<StackLayout Orientation="Horizontal">
<Image Source="facebook.png" HeightRequest="25" WidthRequest="25"/>
<Image Source="twitter.png" HeightRequest="25" WidthRequest="25"/>
<Image Source="whatsapp.png" HeightRequest="25" WidthRequest="25"/>
</StackLayout>
Most likely URI resolution fails, you should really follow documentation's guidelines when it comes to working with embedded images.
Am new to Xamarin and am using Xamarin forms to build a cross platform app. I'm trying to find out how to use a Editor (Text area) inside a Table View cell. I tried to google, but could not find out any solution. Can you pls help me with the code snippet for the same.
I thought I can create a custom renderer for an EntryCell, and try to customize height and enable multi line, but am not able to find out the properties to use, to maniupulate height and multi line.
If there is any other good way, pls let me know. Thanks always!!
I think you are mixing a few concepts, UITableViewCell is not in Xamarin.Forms but Xamarin.iOS. In Xamarin.Forms you have the ListView which contains ViewCells.
What you are trying to do is a Custom ViewCell and use the Editor Control which by default allows multiline input.
<ListView>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="#eee"
Orientation="Vertical">
<Editor BackgroundColor="#a4eaff" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
More about the Editor Control here.
i have added reference of Xlabs.Forms to my project for circleimage.but it not shape image to round.Please help for how to Implement. My Code is:
xmlns:controls="clr-namespace:XLabs.Forms.Controls;assembly=XLabs.Forms"
<controls:CircleImage Aspect="AspectFill"
HeightRequest="30"
HorizontalOptions="Fill"
Source="Images/05.png"
WidthRequest="40" />
But it gives rectangle image on ios,Windows Phone Device.
The Xlabs Project have become very monolithic and is not that actively maintained these days (I feel so).
If your only requirement for adding XLabs is for Round Image button then I suggest you not to use the XLabs one due to the following reasons :
It increases the size of the apk or ipa significantly.
There might be some compatibility issues with other 3rd party controls you use.
My suggestion is to use the following plugin - Circle Image Control Plugin for Xamarin.Forms created by James Montemagno.
Links :
Nuget
Git Hub
Usage : In your iOS, Android, and Windows projects call:
Xamarin.Forms.Init(); //platform specific init
ImageCircleRenderer.Init();
XAML :
<controls:CircleImage Source="{Binding Image}" Aspect="AspectFill">
<controls:CircleImage.WidthRequest>
<OnPlatform x:TypeArguments="x:Double"
iOS="55"
Android="55"
WinPhone="75"/>
</controls:CircleImage.WidthRequest>
<controls:CircleImage.HeightRequest>
<OnPlatform x:TypeArguments="x:Double"
iOS="55"
Android="55"
WinPhone="75"/>
</controls:CircleImage.HeightRequest>
</controls:CircleImage>