Post
Ask Question

Xamarin Android: Create Android Card Flip Animation Using Gesture Event - Part Two

Let’s start,

First, we create a gesture event. Refer to part one,

Step 1: We already created the project and did some pages. Here, we create a card backend page and animation XML file.

Step 2: Create Card_Back.axml page. Go to Solution Explorer-> Project Name-> Resources-> Layout. Right click to Add-> New Item and open the new dialog box.

Step 3: This dialog box is required to select Android Layout and give the  name for Card_back. axml.



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

Step 5: Here, we will create four animations. Thus, we create XML resource. Go to Solution Explorer-> Project Name-> Resources-> Anim. Right click to Add-> New Item and open a new dialog box. This dialog box is required to select XML and give the name for Card_flip_left_in.xml, Card_flip_left_out.xml, Card_flip_right_in.xml and Card_flip_right_out.xml.

 
 
Step 6: Go to Solution Explorer-> Project Name-> Resources-> values. Right click to Add->New Item and select XML. Give the name for Integers.xml.



Step 7: Open Solution Explorer-> Project Name-> Resources-> Anim -> card_flip_left_in.xml. Click to open and add the code, given below:
  1. <set xmlns:android="http://schemas.android.com/apk/res/android">    
  2.     
  3. <!-- Before rotating, immediately set the alpha to 0. -->      
  4.    <objectAnimator      
  5.       android:valueFrom="1.0"      
  6.       android:valueTo="0.0"      
  7.       android:propertyName="alpha"      
  8.       android:duration="0" />      
  9.    <!-- Rotate. -->      
  10.    <objectAnimator      
  11.       android:valueFrom="-180"      
  12.       android:valueTo="0"      
  13.       android:propertyName="rotationY"      
  14.       android:interpolator="@android:interpolator/accelerate_decelerate"      
  15.       android:duration="@integer/card_flip_time_full" />      
  16.    <!-- Half-way through the rotation (see startOffset), set the alpha to 1. -->      
  17.    <objectAnimator      
  18.       android:valueFrom="0.0"      
  19.       android:valueTo="1.0"      
  20.       android:propertyName="alpha"      
  21.       android:startOffset="@integer/card_flip_time_half"      
  22.       android:duration="1" />      
  23. </set>    

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

  1. <set xmlns:android="http://schemas.android.com/apk/res/android">      
  2. <!-- Rotate. -->      
  3.    <objectAnimator      
  4.       android:valueFrom="0"      
  5.       android:valueTo="180"      
  6.       android:propertyName="rotationY"      
  7.       android:interpolator="@android:interpolator/accelerate_decelerate"     
  8.       android:duration="@integer/card_flip_time_full" />      
  9.    <!-- Half-way through the rotation (see startOffset), set the alpha to 0. -->      
  10.    <objectAnimator      
  11.       android:valueFrom="1.0"      
  12.       android:valueTo="0.0"      
  13.       android:propertyName="alpha"      
  14.       android:startOffset="@integer/card_flip_time_half"      
  15.       android:duration="1" />      
  16. </set>   
Step 9: Open Solution Explorer-> Project Name->Resources->Anim -> card_flip_right_in.xml. Click to open add the code, given below:
  1. <set xmlns:android="http://schemas.android.com/apk/res/android">     
  2.    <!-- Before rotating, immediately set the alpha to 0. -->      
  3.    <objectAnimator      
  4.       android:valueFrom="1.0"      
  5.       android:valueTo="0.0"      
  6.       android:propertyName="alpha"      
  7.       android:duration="0" />      
  8.    <!-- Rotate. -->      
  9.    <objectAnimator      
  10.       android:valueFrom="180"      
  11.       android:valueTo="0"      
  12.       android:propertyName="rotationY"      
  13.       android:interpolator="@android:interpolator/accelerate_decelerate"      
  14.       android:duration="@integer/card_flip_time_full" />      
  15.    <!-- Half-way through the rotation (see startOffset), set the alpha to 1. -->      
  16.    <objectAnimator      
  17.       android:valueFrom="0.0"      
  18.       android:valueTo="1.0"      
  19.       android:propertyName="alpha"      
  20.       android:startOffset="@integer/card_flip_time_half"      
  21.       android:duration="1" />      
  22. </set>    

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

  1. <set xmlns:android="http://schemas.android.com/apk/res/android">      
  2.    <!-- Rotate. -->      
  3.    <objectAnimator      
  4.       android:valueFrom="0"      
  5.       android:valueTo="-180"      
  6.       android:propertyName="rotationY"      
  7.       android:interpolator="@android:interpolator/accelerate_decelerate"     
  8.       android:duration="@integer/card_flip_time_full" />      
  9.    <!-- Half-way through the rotation (see startOffset), set the alpha to 0. -->      
  10.    <objectAnimator      
  11.       android:valueFrom="1.0"      
  12.       android:valueTo="0.0"      
  13.       android:propertyName="alpha"      
  14.       android:startOffset="@integer/card_flip_time_half"      
  15.       android:duration="1" />      
  16. </set>    

Step 11: Open Solution Explorer-> Project Name->Resources->values -> Integers.xml. Click to open and add the code, given below:

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <resources>  
  3.     <integer name="card_flip_time_full">300</integer>  
  4.     <integer name="card_flip_time_half">150</integer>  
  5. </resources>  

Step 12: Open Solution Explorer-> Project Name->Resources->drawable->Card_Back.axml. Click to open Design View. Give the following code:

  1. <?xml version="1.0" encoding="utf-8"?>      
  2.    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"      
  3.       android:orientation="vertical"      
  4.       android:layout_width="match_parent"      
  5.       android:layout_height="match_parent"      
  6.       android:background="@android:color/holo_blue_dark">      
  7.    <TextView      
  8.       android:text="Card Back"      
  9.       android:textAppearance="?android:attr/textAppearanceLarge"      
  10.       android:layout_width="match_parent"      
  11.       android:layout_height="wrap_content"      
  12.       android:id="@+id/textView2"      
  13.       android:gravity="center_horizontal" />      
  14.    <TextView      
  15.       android:text="Card Back Side"      
  16.       android:textAppearance="?android:attr/textAppearanceLarge"      
  17.       android:layout_width="match_parent"      
  18.       android:layout_height="wrap_content"      
  19.       android:id="@+id/textView2"      
  20.       android:gravity="center_horizontal|center_vertical" />      
  21. </LinearLayout>    

Step 13: Open MainActivity.cs page, below OnCreate(), create a new class for FlipCard.

  1. public void FlipCard()  
  2. {  
  3.     if (Showingback) {  
  4.         FragmentManager.PopBackStack();  
  5.         Showingback = false;  
  6.     } else {  
  7.         FragmentTransaction trans = FragmentManager.BeginTransaction();  
  8.         trans.SetCustomAnimations(Resource.Animation.card_flip_right_in, Resource.Animation.card_flip_right_out, Resource.Animation.card_flip_left_in, Resource.Animation.card_flip_left_out);  
  9.         trans.Replace(Resource.Id.frameLayout1, new CardBackFragment());  
  10.         trans.AddToBackStack(null);  
  11.         trans.Commit();  
  12.         Showingback = true;  
  13.     }  
  14. }  

Step 14: Define Back_card function to create new class fragment.


C# Code

  1. public class CardBackFragment: Fragment   
  2. {  
  3.     public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {  
  4.         View backcard_view = inflater.Inflate(Resource.Layout.Card_Back, container, false);  
  5.         backcard_view.Touch += Backcard_view_Touch;  
  6.         return backcard_view;  
  7.     }  
  8.     private void Backcard_view_Touch(object sender, View.TouchEventArgs e) {  
  9.         MainActivity myactivity = Activity as MainActivity;  
  10.         myactivity.gesturedetector.OnTouchEvent(e.Event);  
  11.     }  
  12. }  

Step 15: Open MyGestureListener and add the code, given below:


C# Code

  1. public class MyGestureListener: GestureDetector.SimpleOnGestureListener   
  2. {  
  3.     private MainActivity mainActivity;  
  4.     public MyGestureListener(MainActivity Activity) {  
  5.         mainActivity = Activity;  
  6.     }  
  7.     public override bool OnDoubleTap(MotionEvent e) {  
  8.         //Console.WriteLine("Double Tab");  
  9.         mainActivity.FlipCard();  
  10.         return true;  
  11.     }  
  12.     public override void OnLongPress(MotionEvent e) {  
  13.         Console.WriteLine("Long Press");  
  14.     }  
  15.     public override bool OnFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {  
  16.         Console.WriteLine("Fling");  
  17.         return base.OnFling(e1, e2, velocityX, velocityY);  
  18.     }  
  19.     public override bool OnScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {  
  20.         Console.WriteLine("Scroll");  
  21.         return base.OnScroll(e1, e2, distanceX, distanceY);  
  22.     }  
  23. }  

Step 16: Debug and run the app.



Finally, we successfully created Xamarin Android flip card animation between the fragments, using Gesture event.


Similar Articles