How to add the ripple effect in Xamarin label or image?

Viewed 1753

I am looking at implementing a ripple effect on label text or in image.So how to add the ripple effect on any label or in image?

3 Answers

You can use the package TouchView from nuget

Add nuget package to your Xamarin.Forms .netStandard/PCL project and to your platform-specific projects (iOS and Android)

iOS: add TouchViewRenderer.Initialize() line to your AppDelegate (preserve from linker)

using TouchEffect.iOS;
namespace YourApp.iOS
{
    public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
    {
        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            global::Xamarin.Forms.Forms.Init();
            TouchViewRenderer.Initialize();
            LoadApplication(new App());
            return base.FinishedLaunching(app, options);
        }
    }
}

in xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourApp"
             xmlns:touch="clr-namespace:TouchEffect;assembly=TouchEffect"
             x:Class="App11.MainPage">

    <StackLayout>
        <touch:TouchView
            RegularBackgroundColor="LightGray"
            PressedBackgroundColor="Gray"
            PressedOpacity="1"       

            PressedAnimationDuration="100"
            RegularAnimationDuration="100"
            Padding="10, 5"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand"
            Completed="Handle_TouchCompleted"
           >

            <Label Text="Click Me" 
                   TextColor="Black" 
                   FontSize="30"/>

        </touch:TouchView>
    </StackLayout>

</ContentPage>

in code behind

private void Handle_TouchCompleted(TouchEffect.TouchView sender, TouchEffect.EventArgs.TouchCompletedEventArgs args)
 {
    // do something you want        
 }

Use XamarinCommunityToolkit Documentation YouTube Resources

In your xaml

xmlns:xct="http://xamarin.com/schemas/2020/toolkit"

Use exactly NativeAnimation

<Frame xct:TouchEffect.NativeAnimation="True"> </Frame>

You can provide ripple and other effects using TouchEffect Library from AndreiMisiukevich.For more info: https://github.com/AndreiMisiukevich/TouchEffect

And another library is also available. https://github.com/mrxten/XamEffects

Both are well documented.

Related