FFImageLoading : load into an ImageButton

Question

In Xamarin.Android, to load an image using FFImageLoading, a ImageViewAsync must be used instead of a standard ImageView.

I couldn't find what I can use if I wanna load my image into an ImageButton. Didn't find an "ImageButtonAsync".

Answer 1

Dont know if this is relevant or not. I gave my svg a tap gesture to get it working like a button.

first reference the FFImageLoading.Svg.Forms in your xaml

namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms"

second add the svgImage with a tap gesture

    <ffimageloadingsvg:SvgCachedImage Source="YourImageSource" >
                    <ffimageloadingsvg:SvgCachedImage.GestureRecognizers>
                        <TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding YourCommand}"/>
                    </ffimageloadingsvg:SvgCachedImage.GestureRecognizers>
    </ffimageloadingsvg:SvgCachedImage>

You will call this in the constructor of your ViewModel to initialize the command

YourCommand= new DelegateCommand(async () => await ExecuteYourCommandAsync());

Create the properties that bind to the xaml file

    public ICommand YourCommand
    {
        get => yourCommand;
        set => SetProperty(ref yourCommand, value);
    }

    private ICommand yourCommand;

The await ExecuteYourCommandAsync is a method that you create. and in there you will put your logic of what you actually want the tap gesture to do.

You can also pass through object with the command. let met know if this makes sense

Answer 2

AFAIK there is no particular ImageButton to use with FFImageLoading but you can use directly an ImageViewAsync set it as android:clickable="true" and add the click event.

And as stated here an ImageButton is just an ImageView that has a non-null background by default and also, ImageButton.onSetAlpha() method always returns false, scaleType is set to center and it's always inflated as focusable. So if you need that behaviour you can add it.

Another way would be you to create your custom ImageButton that can handle FFImageLoading image loading. For that you can inherit from ImageViewAsync and add the behaviours explained in the paragraph before. So that you can use the FFImageLoading API directly as this custom controls inherits ImageViewAsync.

Instead of that you can also add your custom loading logic as explained here inheriting from ImageLoaderTask and call it like ImageService.Instance.LoadImage(customImageTask)

Finally another way (but hackish and non-performant) would be to create an ImageViewAsync just to hold the result of the FFImageLoading and on the Success callback set the Drawable in the ImageButton:

var myImageButton = myView.FindViewById<ImageButton>(Resource.Id.my_image_button);
var myImageView = new ImageViewAsync(this); // this is the context
ImageService.Instance.LoadUrl(this.Source[position].LogoImagePath)
                .Success(() => myImageButton.SetImageDrawable(myImageView.Drawable))
                .Into(myImageView);

HIH and if you need any help let me know