Button Shake Animation In Android And UWP Using Xamarin.Forms

Introduction

This article demonstrates button shake animation in Android and UWP using Xamarin.Forms. Xamarin is a platform that allows us to create a multi-platform apps on Android, Windows, or iOS through a single integrated development environment (IDE). And with Xamarin.Forms, the interface design for all three platforms can be accomplished within its XAML-based standard, native user-interfaces control.

Android Output

UWP Output

Step 1

Open Visual Studio and go to New Project >> Installed >> Visual C# >> Cross-Platform.

Select Cross-Platform app, then give the project a name and location and click "OK" button.

Step 2

Open Solution Explorer >> Project Name (Portable) >> App.xaml.cs. >> Double click will open the design view of this page.

The code is given below just copy it.

C# Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Xamarin.Forms;
namespace Entry_Shake
{
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage = new NavigationPage (new MainPage());
}
protected override void OnStart()
{
// Handle when your app starts
}
protected override void OnSleep()
{
// Handle when your app sleeps
}
protected override void OnResume()
{
// Handle when your app resumes
}
}
}

Step 3

Next, add an image to Solution Explorer >> Project Name.Android >> Resources >> Right-click >> Drawable >> Add >> Existing Item. When you click an existing item button, it opens a dialogue box.

Choose image location and add images.

The image is added successfully. Then move the cursor to that image and verify the image.

Step 4

Now, Open Solution Explorer >> Project Name (Portable) >> Right-Click >> Add >> New Item or ctrl+Shift+A.

A new dialogue box will open. Now, add the XAML page and give it a name. Click the "Add" button. The XAML page name is "Shake".

Step 5

Open Solution Explorer >> Project Name (Portable) >> MainPage.xaml. Double click for opening the design view of this page.

The code is given below just copy it.

Xaml Code

We have created a button and clicked an event inside the stacklayout. The button name is "Shake".

<?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:Entry_Shake"
x:Class="Entry_Shake.MainPage"
BackgroundImage="Android.png">
<ContentPage.Content>
<StackLayout>
<Button Text="Shake"
FontAttributes="Bold"
TextColor="Black"
FontSize="Medium"
Clicked="Button_Clicked"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>

Step 6

Open Solution Explorer >> Project Name (Portable) >> MainPage.xaml.cs. Double click for opening the design view of this page.

The code is given below just copy it.

C# Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace Entry_Shake
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
private async void Button_Clicked(object sender, EventArgs e)
{
await Navigation.PushAsync(new Shake());
}
}
}

Step 7

Open Solution Explorer >> Project Name (Portable) >>Shake.xaml. Double click for opening the design view of this page.

The code is given below just copy it.

Xaml Code

We are creating a button and click event and entry inside the stackLayout.

<?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="Entry_Shake.Shake">
<ContentPage.Content>
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<Button x:Name="ShakeButton"
Text="Shake It"
BackgroundColor="SkyBlue"
WidthRequest="100"
TextColor="Black"
Clicked="ShakeButton_Clicked"
Margin="25" />
<Entry x:Name="MyEntry"
Placeholder="Shake me!"
BackgroundColor="FloralWhite" />
</StackLayout>
</ContentPage.Content>
</ContentPage>

Step 8

Open Solution Explorer >> Project Name (Portable) >>Shake.xaml.cs Double click for opening the design view of this page.

The code is given below just copy it.

C# Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace Entry_Shake
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Shake : ContentPage
{
public Shake()
{
InitializeComponent();
}
async void ShakeButton_Clicked(object sender, EventArgs e)
{
uint timeout = 50;
await MyEntry.TranslateTo(-15, 0, timeout);
await MyEntry.TranslateTo(15, 0, timeout);
await MyEntry.TranslateTo(-10, 0, timeout);
await MyEntry.TranslateTo(10, 0, timeout);
await MyEntry.TranslateTo(-5, 0, timeout);
await MyEntry.TranslateTo(5, 0, timeout);
MyEntry.TranslationX = 0;
}
}
}

Step 9

Next, select the Build & Deploy option followed by selecting from the list of Android Emulator or simulator. You can choose any API (Application Program Interface) Level Emulator or simulator to run it.

Output

After a few seconds, you will see your app working.

Android Output

You can choose Android platform.

Click the "Shake " button navigate the Shake page. And click the "SHAKE IT" button shake the entry the result is displayed.

UWP Output

Similarly, you can choose UWP.

Click the "Shake " button to navigate the Shake page.

Next, click the "SHAKE IT" button, shake the entry, and the result is displayed.

Finally, we have successfully created Xamarin.Forms applications.

Conclusion

I hope you have learned about Button Shake Animation In Android And UWP Using Xamarin.Forms with Visual Studio and C#.