Setting tint color of an Image

SuatKorkmazSuatKorkmaz USMember ✭✭✭

Is there a way to change the tint color of a Forms.Image programmatically? Both in Android and iOS. The source of the Image is a simple .png file with transparent layer.

I will welcome any other suggestions too.

Thanks in advance.

Best Answers

Answers

  • KymPhillpotts.3866KymPhillpotts.3866 AUXamarin Team, University, XamUProfessors Xamurai

    @SuatKorkmaz you could check out FFImageLoading library - https://github.com/luberda-molinet/FFImageLoading it is cross platform image component that has some tinting functions built in.

  • SuatKorkmazSuatKorkmaz USMember ✭✭✭

    @KymPhillpotts.3866

    Wow. Nice plugin but I'm lost in its documentation. Can you give me a hint for how to change the tint of a CachedImage?

    Thanks for this.

    Best

  • SuatKorkmazSuatKorkmaz USMember ✭✭✭
    edited August 2016

    Strange!

    TintTransformation tt = new TintTransformation();
    tt.R = 0;
    tt.G = 102;
    tt.B = 204;

    image.Transformations.Clear();
    image.Transformations.Add(tt);

    This doesn't work. OK I'm lost.

  • SuatKorkmazSuatKorkmaz USMember ✭✭✭

    No matter I tried the TintTransform doesn't work on Android. Didn't try iOS.

    CachedImage image = new CachedImage();
    image.Source = "ic_check_black_24dp.png";
    image.Transformations = new List<FFImageLoading.Work.ITransformation>() {
    new TintTransformation("#bf0b0b") };
    container.Children.Add(image);

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    @ShrutiNambiar said:
    @SuatKorkmaz Here's a tinting control that you could easily use and customize - https://github.com/shrutinambiar/xamarin-forms-tinted-image.

    Anyone know if this package is still active? The site linked is still up, but when you go through NuGet.org this package can't be searched/found: That makes me nervous. But it looks like I nice, easy, way to accomplish one thing without the overhead of all of ffimage

  • seanydaseanyda GBMember ✭✭✭✭✭

    @ClintStLaurent said:

    @ShrutiNambiar said:
    @SuatKorkmaz Here's a tinting control that you could easily use and customize - https://github.com/shrutinambiar/xamarin-forms-tinted-image.

    Anyone know if this package is still active? The site linked is still up, but when you go through NuGet.org this package can't be searched/found: That makes me nervous. But it looks like I nice, easy, way to accomplish one thing without the overhead of all of ffimage

    Why not just take the renderers from the platform specific projects in Git?

  • ShrutiNambiarShrutiNambiar USMember ✭✭

    @ClintStLaurent There isn't a nuget package for this project unfortunately. I put it up mainly for tutorial purposes. Like @lpdavies mentioned, you could easily use the renderer implementations from the platform projects :)

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    @lpdavies @ShrutiNambiar
    Agreed that one can just grab the files. And that's what I did for testing. But...
    That doesn't resolve UWP dependencies in that platform's renderer and doesn't make use of the established mechanism (Nuget) for getting notifications of updates.

    Personally I think its a great little control. Handles a specific need with almost no overhead. Its a shame nobody sees it when they search via Visual Studio Nuget package manager, which how a large percentage of add-ons/packages are found these days.

    I just thought it would be nice if it got a little more exposure, took care of its own dependencies, and didn't have to manually re-visit the site once a month to see if there are updates.

  • DanielLDanielL PLInsider ✭✭✭✭
    edited February 2017

    BTW: Here's tint transformations demo (getting a lot of messages about it):

    <ffimageloading:CachedImage HorizontalOptions="Center" VerticalOptions="Center"
        LoadingPlaceholder="loading.png" ErrorPlaceholder="error.png" DownsampleToViewSize="true"
        Aspect="AspectFit" HeightRequest="400" WidthRequest="400" Source="{Binding ImageUrl}">
        <ffimageloading:CachedImage.Transformations>
            <!-- First two digits from HexColor = ALPHA channel -->
            <fftransformations:TintTransformation HexColor="#ffff0000" EnableSolidColor="true"/>
        </ffimageloading:CachedImage.Transformations>
    </ffimageloading:CachedImage>
    

    https://github.com/luberda-molinet/FFImageLoading/blob/master/samples/ImageLoading.Forms.Sample/Shared/Pages/Transformations/TintTransformationPage.xaml#L11-L18

    If you use transformation in XAML-only. Please add var ignore = new TintTransformation(); in you platform specific project (so the linker will not remove the assembly)

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭
    edited February 2017

    No doubt. I don't m mean to diminish the power of ffimage.

    Just saying for this need this is clean, easy to read and bindable:

                    <crossPlatformTintedImage:TintedImage Source="{Binding TileIcon}"
                                                          TintColor="{Binding TileColor}">
    

    I have this is a shared PageHeader control that shows a unique icon for each feature page (IE: Tile as seen i the XAML).
    Each tile has its own color and the TintedImage handles the alpha aspect without having to create a second color property of the alpha version. So...
    Load the blue page, the header icon is tinted the color for that page from the VM.
    Load the red page, the header icon is tinted to match.
    No fuss, no muss.

  • ZaneCampbellZaneCampbell USMember ✭✭
    edited July 2017

    @DanielL said:
    BTW: Here's tint transformations demo (getting a lot of messages about it):

    <ffimageloading:CachedImage HorizontalOptions="Center" VerticalOptions="Center"
        LoadingPlaceholder="loading.png" ErrorPlaceholder="error.png" DownsampleToViewSize="true"
        Aspect="AspectFit" HeightRequest="400" WidthRequest="400" Source="{Binding ImageUrl}">
        <ffimageloading:CachedImage.Transformations>
            <!-- First two digits from HexColor = ALPHA channel -->
            <fftransformations:TintTransformation HexColor="#ffff0000" EnableSolidColor="true"/>
        </ffimageloading:CachedImage.Transformations>
    </ffimageloading:CachedImage>
    

    https://github.com/luberda-molinet/FFImageLoading/blob/master/samples/ImageLoading.Forms.Sample/Shared/Pages/Transformations/TintTransformationPage.xaml#L11-L18

    If you use transformation in XAML-only. Please add var ignore = new TintTransformation(); in you platform specific project (so the linker will not remove the assembly)

    I would like to use this but once i set the tint, is there no way to change it? When i try to change it nothing happens. I try clearing the transformations then creating a new one and adding it to my image but it just stays as the first tint applied. I am using the latest pre-release 2.2.10-pre413

    LightImage.Transformations.Clear();
    var transformation = new TintTransformation {
                        HexColor = isOn ? OnColour : OffColour,
                        EnableSolidColor = true
                    };
    LightImage.Transformations.Add(transformation);
    
  • DanielLDanielL PLInsider ✭✭✭✭

    @ZaneCampell

    LightImage.Transformations = new List<ITransformation> {new TintTransformation {
                        HexColor = isOn ? OnColour : OffColour,
                        EnableSolidColor = true
                    } });
    

    That would work.

  • JohnTolleJohnTolle USMember ✭✭

    @ClintStLaurent said:
    No doubt. I don't m mean to diminish the power of ffimage.

    Just saying for this need this is clean, easy to read and bindable:

                    <crossPlatformTintedImage:TintedImage Source="{Binding TileIcon}"
                                                          TintColor="{Binding TileColor}">
    

    I have this is a shared PageHeader control that shows a unique icon for each feature page (IE: Tile as seen i the XAML).
    Each tile has its own color and the TintedImage handles the alpha aspect without having to create a second color property of the alpha version. So...
    Load the blue page, the header icon is tinted the color for that page from the VM.
    Load the red page, the header icon is tinted to match.
    No fuss, no muss.

    Where can I suggest this bad boy as a feature request to add to the official Xamarin.Forms Image? It makes me miss Windows UWP BitmapIcon which had this built-in as the Foreground property.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    @JohnTolle said:

    @ClintStLaurent said:
    No doubt. I don't m mean to diminish the power of ffimage.

    Just saying for this need this is clean, easy to read and bindable:

                    <crossPlatformTintedImage:TintedImage Source="{Binding TileIcon}"
                                                          TintColor="{Binding TileColor}">
    

    I have this is a shared PageHeader control that shows a unique icon for each feature page (IE: Tile as seen i the XAML).
    Each tile has its own color and the TintedImage handles the alpha aspect without having to create a second color property of the alpha version. So...
    Load the blue page, the header icon is tinted the color for that page from the VM.
    Load the red page, the header icon is tinted to match.
    No fuss, no muss.

    Where can I suggest this bad boy as a feature request to add to the official Xamarin.Forms Image? It makes me miss Windows UWP BitmapIcon which had this built-in as the Foreground property.

    "this" - what? Which part of all that? TintedImage? Just use the NuGet for tinted image.

  • JohnTolleJohnTolle USMember ✭✭

    Sorry, my "this" was a bit vague. Yes, the TintedImage NuGet is great as is, but I think this would be a very useful feature that could be built into the official Xamarin.Forms Image itself. Why? Because Xamarin Live Player and Gorilla Player (and other previewers out there) play best with built-in properties and, more importantly... I'm a lazy bastard. :)

  • ChrisColeTechChrisColeTech USMember ✭✭✭

    @ShrutiNambiar said:
    @SuatKorkmaz Here's a tinting control that you could easily use and customize - https://github.com/shrutinambiar/xamarin-forms-tinted-image.

    awesome plugin. sweet and simple :)

  • UnreachableCodeUnreachableCode USMember ✭✭✭

    Anyway to tint the image of a button?

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    @UnreachableCode said:
    Anyway to tint the image of a button?

    have you a solution for this? I am lost...

  • UnreachableCodeUnreachableCode USMember ✭✭✭

    Hey @AlessandroCaliaro. I think a custom renderer is the best way to go. But the easiest way to go might be adding a click handler to one of the tintable image controls above. I will try to cook up an example when I get some free time, but let me know if you find out anything first. There's not a lot of information on Google.

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    I have tried with custom renderer but I am not able to change the tint color.

Sign In or Register to comment.