CODEWITHSUNDEEP
xamlxamarin.forms
Stefano APP
Stefano APP

Reputation: 35

Show button animation with a transparent BckgroundColor

I need to create a button by placing the image as a separate control because I have a nuget extension that allows me to change its color. But I would like to create the classic animation of the button when pressing on it, but I would like the button not to have a background color, is that possible?

<abstractions:TintedImage 
            x:Name="profile"
            RelativeLayout.YConstraint="{ConstraintExpression
            Type=Constant,
            Constant=20}"
            RelativeLayout.XConstraint="{ConstraintExpression
            Type=Constant,
            Constant=300}"
            WidthRequest="20"
            Source="User"
            TintColor="{x:DynamicResource TextColor}"/>
        
        <Button
            RelativeLayout.YConstraint="{ConstraintExpression
            Type=Constant,
            Constant=10}"
            RelativeLayout.XConstraint="{ConstraintExpression
            Type=Constant,
            Constant=295}"
            HeightRequest="50"
            WidthRequest="50"
            Clicked="ButtonSettings_Clicked"
            BackgroundColor="Transparent"/>

Video demo

Upvotes: 0

Views: 318

Answers (1)

Cfun
Cfun

Reputation: 9701

It is called RippleEffect on Android, you can use TouchEffect from Xamarin.CommunityToolkit package

       <Button xct:TouchEffect.NativeAnimation="True"
            RelativeLayout.YConstraint="{ConstraintExpression
            Type=Constant,
            Constant=10}"
            RelativeLayout.XConstraint="{ConstraintExpression
            Type=Constant,
            Constant=295}"
            HeightRequest="50"
            WidthRequest="50"
            Clicked="ButtonSettings_Clicked"
            BackgroundColor="Transparent"/>

You can also specify:

  • The effect color thru: NativeAnimationColor
  • The effect radius thru: NativeAnimationRadius
  • The effect shadow radius thru: NativeAnimationShadowRadius

and a lot more for that effect, a non-exhausted sample could be found in the official repo TouchEffectPage.xaml

Upvotes: 1

Related Questions