Button Shake Animation In Android And UWP Using Xamarin.Forms

This article demonstrates button shake animation in Android and UWP using Xamarin.Forms. button click shack the entry.

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;  
  5.   
  6. using Xamarin.Forms;  
  7.   
  8. namespace Entry_Shake  
  9. {  
  10.     public partial class App : Application  
  11.     {  
  12.         public App()  
  13.         {  
  14.             InitializeComponent();  
  15.   
  16.             MainPage = new NavigationPage (new MainPage());  
  17.         }  
  18.   
  19.         protected override void OnStart()  
  20.         {  
  21.             // Handle when your app starts  
  22.         }  
  23.   
  24.         protected override void OnSleep()  
  25.         {  
  26.             // Handle when your app sleeps  
  27.         }  
  28.   
  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;  
  7.   
  8. namespace Entry_Shake  
  9. {  
  10.     public partial class MainPage : ContentPage  
  11.     {  
  12.         public MainPage()  
  13.         {  
  14.             InitializeComponent();  
  15.         }  
  16.   
  17.         private async void Button_Clicked(object sender, EventArgs e)  
  18.         {  
  19.             await Navigation.PushAsync(new Shake());  
  20.         }  
  21.     }  
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;  
  6.   
  7. using Xamarin.Forms;  
  8. using Xamarin.Forms.Xaml;  
  9.   
  10. namespace Entry_Shake  
  11. {  
  12.     [XamlCompilation(XamlCompilationOptions.Compile)]  
  13.     public partial class Shake : ContentPage  
  14.     {  
  15.         public Shake()  
  16.         {  
  17.             InitializeComponent();  
  18.         }  
  19.   
  20.        async void ShakeButton_Clicked(object sender, EventArgs e)  
  21.         {  
  22.             uint timeout = 50;  
  23.   
  24.             await MyEntry.TranslateTo(-15, 0, timeout);  
  25.   
  26.             await MyEntry.TranslateTo(15, 0, timeout);  
  27.   
  28.             await MyEntry.TranslateTo(-10, 0, timeout);  
  29.   
  30.             await MyEntry.TranslateTo(10, 0, timeout);  
  31.   
  32.             await MyEntry.TranslateTo(-5, 0, timeout);  
  33.   
  34.             await MyEntry.TranslateTo(5, 0, timeout);  
  35.   
  36.             MyEntry.TranslationX = 0;  
  37.   
  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#.