Xamarin

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.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs