Add overlay color to an image using Xamarin.Forms

Question

I'd like to add some icons in my app especially in listviews using custom cell and specify the color to be rendered. I don't want to edit each image in Photoshop; I want to apply an overlay color at runtime.

Is that possible with a custom renderer?

Answer 1

No it is not possible through standard Image class provided in Xamarin.Forms.

But you can use this amazing IconView custom renderer created by this guy. I use it all the time it is amazing.

IconView for Xamarin Forms

Usage

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="IconApp.MyPage"
             xmlns:controls="clr-namespace:IconApp;assembly=IconApp">
  <controls:IconView Source="monkey"
                     Foreground="Red"
                     WidthRequest="100"
                     HeightRequest="100"
                     HorizontalOptions="Center"
                     VerticalOptions="Center" />
</ContentPage>

Just specify the Foreground="Red" property color

Answer 2

Now We got another way with Xamarin.CommunityToolkit. We can use its IconTintColorEffect.TintColor for changing Tint Color or Overlay of an Image.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
         x:Class="MyLittleApp.MainPage">
    <StackLayout>
        <Image Source="monkey" xct:IconTintColorEffect.TintColor="Red" />
    </StackLayout>
</ContentPage>

Xamarin.CommunityToolkit is handy and provides lot of features such as Shadows on any View, EventToCommandBehavior for MVVMifying lot of Events and Controls, it also has additional Converters, Extensions, Helpers, and Views that are not available in builtin Xamarin Forms yet.

Refer for more Documentation