Xamarin Android Image Rotate Animation In Android App Using Visual Studio 2015

Introduction

Xamarin is a platform to develop cross-platform and multi-platform apps. (Ex. Windows phone, Android, iOS) In the Xamarin platform, code sharing concept is used. Xamarin Studio is avalable in Visual Studio also.

Image rotate animation is called if Button image is clicked and will rotate one round.

Prerequisites

• Visual Studio 2015 Update 3 

The steps needs to be followed in order to rotate the image, using animation control in Xamarin Android app. using Visual Studio 2015.

Step 1 - Click file--> Select New--> Next select Project. The project needs to be clicked after opening all the types of projects in Visual studio or click Ctrl+Shift+N.



Step 2 - After opening New Project, select Installed-->Templates-->Visual C#-->Android-->choose the Blank app (Android).

Subsequently, give your Android app name (Ex:sample) and give the path of your project. Afterwards, click OK.



Step 3 - Now, go to Solution explorer. In Solution Explorer, get all the files and sources in your project.

Now, select Resource-->Layout-->double click to open main.axml page. You want select the source to write XAML code.

If you want design, choose the designer Window and you can design your app.



Step 4 - After opening main.axml,the  file will open the main page designer. In this page, you can select which type you want and you can design this page.

Now, delete the Default hello world button. Go to main.axml page source panel and you can see the button coding. You need to delete it.

After deleting, XAML code, delete C# button action code.

Go to MainActivity.cs page, you will delete the button code.



Step 5 - Now, go to the toolbox Window. The toolbox window has the all types of tools and controls.You will go to the toolbox window, next scroll down

You will see the all tools and controls.

You will drag and drop the button.



Step 6 - Now, drag and drop the LinearLayout (Vertical).



Step 7 - You will drag and drop the image view in LinearLayout.



Step 8 - Now, add the image in your app.

Go to Solution Explorer, select the Resource-->drawable. Now, after the right click-->add--> Existing Item or (Shift + Alt + A)



Step 9 - Now, browse the image. Go to the your image path (location) and select the image. Afterwards, click the add button.



Step 10 - Afterwards, add the image, go to the properties Window. You will add the image source path.
Imageview1-->Main-->src.

Afterwards, click src and Resource window will open. Now, you can select the uploaded image. Subsequently, click OK.



Step 11 - Now, go to the main.axml page source tab and you will edit the button Id and imageview Id (Ex: CheckBox android:id="@+id/checkbox" ) or note it.



Main.axml

<Button android:text="Rotate" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/button1" />
<LinearLayout android:orientation="vertical" android:minWidth="25px" android:minHeight="25px" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/linearLayout1" />
<ImageView android:src="@drawable/xplat" android:layout_width="match_parent" android:layout_height="160.5dp" android:id="@+id/imageView1" />

Step 12 - Now, add one Resource folder. It's name is called rotate.xml.



Solution explorer-->Resource-->Right click -->add -->New folder.(ex: Anim).

Step 13 - Now, add one XML file.

Go to solution explorer-->Resource-->Anim-->Right click -->add-->New Item.

Select XML file (ex: rotate.xml) and click add.



Step 14 - Write the code, given below in rotate.xml page.

rotate.xml

<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator">
    <rotate android:fromDegrees="0" android:toDegrees="360" android:pivotX="50%" android:pivotY="50%" android:duration="2000" android:startOffset="0" /> </set>

Step 15 - Now, go to MainActivity.cs page and write the code, given below-

MainActivity.cs

using Android.Views.Animations;
//OnCreate Method
protected override void OnCreate(Bundle bundle) {
    base.OnCreate(bundle);
    // Set our view from the "main" layout resource
    SetContentView(Resource.Layout.Main);
    var image = FindViewById < ImageView > (Resource.Id.imageView1);
    // Set things up so that when this button is clicked the image roates.
    var rotateAboutCornerButton = FindViewById < Button > (Resource.Id.button1);
    var rotateAboutCornerAnimation = AnimationUtils.LoadAnimation(this, Resource.Animation.rotate);
    rotateAboutCornerButton.Click += (sender, args) => image.StartAnimation(rotateAboutCornerAnimation);
}

Step 16 - If you have an Android virtual device, you can run the virtual device. If you don't have it, run your Android phone. 

Connect Android phone, via USB cable in your system or laptop. If you connect Andriod mobile phone, it will show the message Allow USB debugging? 

If you run the app in this mobile, check "always allow from this computer". Now, click OK button.

Now, go to the Visual Studio.

If you connect your Android phone, it will show the run menu (Ex:LENOVO A6020a40(Android 5.1-API 22)). 
Now, go to click the connected Android phone and it will run in your Android phone.



Output - In this, app is run but takes sometime because the app will be built in your phone and you need to install the app in your phone,
so it will take some time.

After running your app in your phone, it shows the app with the image.



Now, you will click the rotate button. The image will rotate for one round.



Summary - Thus, this was the process of Rotating an image, using animation control in Xamarin Android app, using Visual Studio 2015.