Post
Ask Question

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
  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.     }  
  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;  
  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#.


Similar Articles