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
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  6. using Xamarin.Forms;
  8. namespace Entry_Shake
  9. {
  10. public partial class App : Application
  11. {
  12. public App()
  13. {
  14. InitializeComponent();
  16. MainPage = new NavigationPage (new MainPage());
  17. }
  19. protected override void OnStart()
  20. {
  21. // Handle when your app starts
  22. }
  24. protected override void OnSleep()
  25. {
  26. // Handle when your app sleeps
  27. }
  29. protected override void OnResume()
  30. {
  31. // Handle when your app resumes
  32. }
  33. }
  34. }
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".
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  4. xmlns:local="clr-namespace:Entry_Shake"
  5. x:Class="Entry_Shake.MainPage"
  6. BackgroundImage="Android.png">
  7. <ContentPage.Content>
  8. <StackLayout>
  9. <Button Text="Shake"
  10. FontAttributes="Bold"
  11. TextColor="Black"
  12. FontSize="Medium"
  13. Clicked="Button_Clicked"/>
  14. </StackLayout>
  15. </ContentPage.Content>
  16. </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
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  5. using System.Threading.Tasks;
  6. using Xamarin.Forms;
  8. namespace Entry_Shake
  9. {
  10. public partial class MainPage : ContentPage
  11. {
  12. public MainPage()
  13. {
  14. InitializeComponent();
  15. }
  17. private async void Button_Clicked(object sender, EventArgs e)
  18. {
  19. await Navigation.PushAsync(new Shake());
  20. }
  21. }
  22. }
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.
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  4. x:Class="Entry_Shake.Shake">
  5. <ContentPage.Content>
  6. <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
  7. <Button x:Name="ShakeButton"
  8. Text="Shake It"
  9. BackgroundColor="SkyBlue"
  10. WidthRequest="100"
  11. TextColor="Black"
  12. Clicked="ShakeButton_Clicked"
  13. Margin="25" />
  14. <Entry x:Name="MyEntry"
  15. Placeholder="Shake me!"
  16. BackgroundColor="FloralWhite" />
  17. </StackLayout>
  18. </ContentPage.Content>
  19. </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
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  5. using System.Threading.Tasks;
  7. using Xamarin.Forms;
  8. using Xamarin.Forms.Xaml;
  10. namespace Entry_Shake
  11. {
  12. [XamlCompilation(XamlCompilationOptions.Compile)]
  13. public partial class Shake : ContentPage
  14. {
  15. public Shake()
  16. {
  17. InitializeComponent();
  18. }
  20. async void ShakeButton_Clicked(object sender, EventArgs e)
  21. {
  22. uint timeout = 50;
  24. await MyEntry.TranslateTo(-15, 0, timeout);
  26. await MyEntry.TranslateTo(15, 0, timeout);
  28. await MyEntry.TranslateTo(-10, 0, timeout);
  30. await MyEntry.TranslateTo(10, 0, timeout);
  32. await MyEntry.TranslateTo(-5, 0, timeout);
  34. await MyEntry.TranslateTo(5, 0, timeout);
  36. MyEntry.TranslationX = 0;
  38. }
  39. }
  40. }
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#.