Xamarin.Forms: xaml. Add “click” animation to button

Question

so I have this button:

        <ImageButton
                 Aspect="AspectFit"
                 Grid.Column="1"
                 x:Name="btn_mymatches_mainmenu"
                 Source="btn_emptydummy.png" BackgroundColor="#00000000"/>

When the user clicks on it, there is no animation visible as if I just were to take the standard "Button". How can I add this little animation to also play on my image button? On Android, this is like a little grey "wave". Any animation would be awesome...

Thank you!

Answer 1

here is a starting point.

<ImageButton
     Aspect="AspectFit"
     Grid.Column="1"
     x:Name="btn_mymatches_mainmenu"
     Source="btn_emptydummy.png"
     BackgroundColor="#00000000"
     Clicked="btn_mymatches_mainmenu_Clicked" />

Then in your code behind:

public async void btn_mymatches_mainmenu_Clicked(object sender, EventArgs e)
{
    await btn_mymatches_mainmenu.ScaleTo(0.75, 100);
    await btn_mymatches_mainmenu.ScaleTo(1, 100);
}

There is also Fade animations, and a lot of other. Just take a look at the Xamarin Forms documentation. If you want, you can create a class which inherit from ImageButton and perform the animation inside so all your controls will have the animation without any code.

Answer 2

You can create an ImageButton Renderer by setting a custom background to achieve that.

[assembly: ExportRenderer(typeof(Xamarin.Forms.ImageButton), typeof(CustomImageButtonRenderer))]
namespace AppImageXml.Droid
{
    public class CustomImageButtonRenderer : ImageButtonRenderer
    {
        public CustomImageButtonRenderer(Context context) : base(context)
        {

        }

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ImageButton> e)
        {
            base.OnElementChanged(e);

            SetBackgroundResource(Resource.Drawable.ripple_bg);
            // Set a background to be like a Ripple animation
        }
    }
}

ripple_bg.xml :

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@android:color/darker_gray">
  <!--Ripple color-->
  <item>
    <shape android:shape="rectangle">
      <!-- background color-->
      <solid android:color="@android:color/white"/>
    </shape>
  </item>
</ripple>

Then the ImageButton used in Xaml can show the Ripple animation:

<ImageButton Aspect="AspectFit"
                Grid.Row="1"
                Grid.Column="0"
                x:Name="btn_mymatches_mainmenu"
                Source="heart.png"
                BackgroundColor="#00000000" />

The effect: