Xamarin Android: Create Xamarin Android Animating Activities

Introduction

Android animations show the visual effects of transactions of the activities and fragments. Here, we will create four types of transactions.

LEFT TO RIGHT ANIMATION
RIGHT TO LEFT ANIMATION
BOTTOM TO TOP ANIMATION
TOP TO BOTTOM ANIMATION

Let’s start,

LEFT TO RIGHT ANIMATION

Step 1

Open Visual Studio->New Project->Templates->Visual C#->Android->Blank App

Select Blank App. Give the Project Name and Project Location.

Step 2: Go to Solution Explorer-> Project Name-> Resources, followed by Right click to Add-> New Folder and give the name for Anim.

Add

Step 3

First, we create Left to Right Animation. Thus, we create two XML resources. Go to Solution Explorer-> Project Name-> Resources-> Anim and right click to Add-> New Item, which will open the new dialog box. This dialog box is required to select XML and give the name for Side_in_left.xml and one more resource is Side_out_right.xml.

xml

add

Step 4

Add Lefttoright Design view. Go to Solution Explorer-> Project Name-> Resources-> Layout. Right click Add->New Item and open new dialog box. This dialog box is required to select XML and give the name for Lefttoright.axml.

Add

Step 5

Add Lefttoright Activity page. Go to Solution Explorer-> Project Name, followed by right clicking Add->New Item, open new dialog box. This dialog box will select activity and give the name for LeftToRightActivity.cs.

Step 6: Open Solution Explorer-> Project Name-> Resources->Anim -> Side_in_left.xml. Click to open and add the code, given below:

<?xml version="1.0" encoding="utf-8" ?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator">
<translate android:duration="600"
android:fromXDelta="-100%"
android:toXDelta="0%"/>
</set>

Step 7: Open Solution Explorer-> Project Name-> Resources-> Anim -> Side_out_right.xml and click to open. Add the code, given below:

<?xml version="1.0" encoding="utf-8" ?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator">
<translate android:duration="600"
android:fromXDelta="0%"
android:toXDelta="100%"/>
</set>

Step 8: Open Solution Explorer-> Project Name-> Resources-> Layout -> Lefttoright.axml. Click to open and add the code, given below:

<TextView
android:text="LEFT TO RIGHT"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/textView1" />

Step 9: Open Solution Explorer-> Project Name-> LeftToRightActivity.cs. Click to open and add the code, given below:

SetContentView(Resource.Layout.Lefttoright);

RIGHT TO LEFT ANIMATION

Step 10: Go to Solution Explorer-> Project Name-> Resources-> Anim, followed by right click to add-> New Item. Open the new dialog box. This dialog box is required to select XML and give the name for Side_in_right.xml and one more resource is Side_out_left.xml

Step 11: Now, add RighttoLeft Design view. Go to Solution Explorer-> Project Name-> Resources-> Layout and right click to Add-> New Item, followed by opening the new dialog box. This dialog box is required to select XML and give the name for RighttoLeft.axml.

Step 12: Now, add RighttoLeft Activity page. Go to Solution Explorer-> Project Name, followed by right clicking to Add-> New Item, followed by opening the new dialog box. This dialog box is required to select activity and give the name for RighttoLeftActivity.cs.

Step 13: Now, open Solution Explorer-> Project Name->Resources->Anim -> Side_in_right.xml and click to open. Add the code, given below:

<?xml version="1.0" encoding="utf-8" ?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator">
<translate android:duration="600"
android:fromXDelta="100%"
android:toXDelta="0%" />
</set>

Step 14: Open Solution Explorer-> Project Name->Resources->Anim -> Side_out_left.xml and click to open. Add the code, given below:

<?xml version="1.0" encoding="utf-8" ?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator">
<translate android:duration="600"
android:fromXDelta="0%"
android:toXDelta="-100%"/>
</set>

Step 15: Open Solution Explorer-> Project Name->Resources->Layout -> RighttoLeft.axml and click to open. Add the code, given below:

<TextView
android:text="RIGHT TO LEFT"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/textView1" />

Step 16: Open Solution Explorer-> Project Name-> RighttoLeftActivity.cs and click to open. Add the code, given below:

SetContentView(Resource.Layout.Righttoleft);

BOTTOM TO TOP ANIMATION

Step 17: Go to Solution Explorer-> Project Name->Resources-> Anim, followed by right click to Add-> New Item, open new dialog box. This dialog box is required to select XML and give the name for Pushup_in.xml. One more resource is Pushup_out.xml.

Step 18: Add bottomtotop design view. Go to Solution Explorer-> Project Name->Resources-> Layout, followed by right clicking to Add->New Item. Open the new dialog box. This dialog box is required to select XML and give the name for bottomtotop.axml.

Step 19: Add bottomtotopActivity page. Go to Solution Explorer-> Project Name, right click to Add-> New Item. New dialog box will open. This dialog box is required to select activity and give the name for bottomtotop.cs.

Step 20: Open Solution Explorer-> Project Name-> Resources-> Anim-> Pushup_in.xml. Click to open and add the code, given below:.

<?xml version="1.0" encoding="utf-8" ?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator">
<translate android:fromYDelta="100%p"
android:toYDelta="0"
android:duration="600"/>
</set>

Step 21: Open Solution Explorer-> Project Name->Resources->Anim -> Pushup_out.xml. Click to open and add the code, given below:

<?xml version="1.0" encoding="utf-8" ?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator">
<translate android:fromYDelta="0"
android:toYDelta="-100%p"
android:duration="600"/>
</set>

Step 22: Open Solution Explorer-> Project Name-> Resources-> Layout -> RighttoLeft.axml. Click to open and add the code, given below:

<TextView
android:text="BOTTOM TO TOP"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/textView1" />

Step 23: Open Solution Explorer-> Project Name-> RighttoLeftActivity.cs. Click to open and add the code, given below:

SetContentView(Resource.Layout.bottomtotop);

TOP TO BOTTOM ANIMATION

Step 24: Go to Solution Explorer-> Project Name-> Resources-> Anim, followed by right click to Add-> New Item. Open new dialog box. This dialog box is required to select XML and give the name for Pushdown_in.xml. One more resource is Pushdown_out.xml.

Step 25: Add Toptobottom Design view.go to Solution Explorer-> Project Name->Resources->Layout then Right Click to Add->New Item then open new Dialog box. That Dialog box to Select XML and give Name for Toptobottom.axml.

Step 26: Add Toptobottom Activity page. Go to Solution Explorer-> Project Name, followed by right clicking to Add->New Item, open new dialog box. This dialog box is required to select activity and give name for Toptobottom Activity.cs.

Step 27: Open Solution Explorer-> Project Name->Resources-> Anim -> Pushdown_in.xml. Click to open and add the code, given below:

<?xml version="1.0" encoding="utf-8" ?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator">
<translate android:fromYDelta="-100%p"
android:toYDelta="0"
android:duration="600"/>
</set>

Step 28: Open Solution Explorer-> Project Name->Resources-> Anim -> Pushdown_out.xml. Click to open and add the code, given below:

<?xml version="1.0" encoding="utf-8" ?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator">
<translate android:fromYDelta="0"
android:toYDelta="100%p"
android:duration="600" />
</set>

Step 29: Open Solution Explorer-> Project Name-> Resources-> Layout -> RighttoLeft.axml. Click to open and add the code, given below:

<TextView
android:text="TOP TO BOTTOM"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/textView1" />

Step 30: Open Solution Explorer-> Project Name-> RighttoLeftActivity.cs. Click to open and add the code, given below:

SetContentView(Resource.Layout. Toptobottom);

Step 31: Finally, create button click event each animation. Open Main.axml.Solution Explorer-> Project Name->Resources->Layout -> Main.axml. Click to open and add the code,, given below:

<Button
android:text="RIGHT TO LEFT"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/righttoleft" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/bottomtotop"
android:text="BOTTOM TO TOP" />
<Button
android:text="LEFT TO RIGHT"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/lefttoright" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/toptobottom"
android:text="TOP TO BOTTOM" />

Step 32: Open Solution Explorer-> Project Name-> MainActivity.cs. Click to open and add the code, given below:

public class MainActivity: Activity {
int count = 1;
Button Righttoleft;
Button bottomtotop;
Button lefttoright;
Button toptobottom;
protected override void OnCreate(Bundle bundle) {
base.OnCreate(bundle);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);
Righttoleft = FindViewById < Button > (Resource.Id.righttoleft);
bottomtotop = FindViewById < Button > (Resource.Id.bottomtotop);
lefttoright = FindViewById < Button > (Resource.Id.lefttoright);
toptobottom = FindViewById < Button > (Resource.Id.toptobottom);
Righttoleft.Click += Righttoleft_Click;
bottomtotop.Click += bottomtotop_Click;
lefttoright.Click += Lefttoright_Click;
toptobottom.Click += Toptobottom_Click;
}
private void Toptobottom_Click(object sender, EventArgs e) {
Intent intent;
intent = new Intent(this, typeof(ToptoBottomActivity));
StartActivity(intent);
OverridePendingTransition(Resource.Animation.@Pushdown_in, Resource.Animation.@Pushdown_out);
}
private void Lefttoright_Click(object sender, EventArgs e) {
Intent intent;
intent = new Intent(this, typeof(LeftToRightActivity));
StartActivity(intent);
OverridePendingTransition(Resource.Animation.@Side_in_left, Resource.Animation.@Side_out_right);
}
private void bottomtotop_Click(object sender, EventArgs e) {
Intent intent;
intent = new Intent(this, typeof(BottomToTopActivity));
StartActivity(intent);
OverridePendingTransition(Resource.Animation.@Pushup_in, Resource.Animation.@Pushup_out);
}
private void Righttoleft_Click(object sender, EventArgs e) {
Intent intent;
intent = new Intent(this, typeof(RighttoLeftActivity));
StartActivity(intent);
OverridePendingTransition(Resource.Animation.@Side_in_right, Resource.Animation.@Side_out_left);
}
}

Step 33: Press F5 or build and run the Application.

Finally, we successfully created Xamarin Android Animating activities.

23 Comments

Join the conversation! Your thoughts help the community grow.

Leo Castro8y ago
I registered to comment, thank you for these tutorials you do. I have used many of them in my android application at work. Good job, and thanks from the U.S.!
- Anbu Mani8y ago
  Thank you so much this kind of comments :-)
Hemant Mahajan10y ago
Good article man!
Subash10y ago
I tried MS2013 i feel little difficulties
- Anbu Mani10y ago
  Wht error you face?
- Anbu Mani10y ago
  Can you show your error?
Subash10y ago
Waht is the framework used for this?
Subash10y ago
Nice anbu we want to add refernce?
- Anbu Mani10y ago
  Hi,no need to add any refer...
Asad Ali10y ago
Good one
- Anbu Mani10y ago
  Thanks
Shobana J10y ago
Nice one
- Anbu Mani10y ago
  Thanks
kalu singh rao10y ago
Nice...
- Anbu Mani10y ago
  Thanks
Abhijeet Singh10y ago
Good one...
- Anbu Mani10y ago
  Thanks
Anu V10y ago
Nice article
- Anbu Mani10y ago
  Thanks
Anbu Mani10y ago
Thanks
Bhavik Patel10y ago
Nice shared.
Vignesh Mani10y ago
Nice
- Anbu Mani10y ago
  Thanks