Animation is the most important part of the UI design which makes the application more interacting and user-friendly. If you are also interested in the animation and want to give some interaction for the user then this blog is for you. In this blog, we are going to discuss the Flip Card Animation in Android.
Implementation
Create a Layout file
Create a layout file for the flip card animation. On this file, we have to create the layout for the front and backside which you want to display with the animation.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<androidx.constraintlayout.widget.ConstraintLayout android:layout_width="wrap_content" android:layout_height="wrap_content"> <com.google.android.material.card.MaterialCardView android:id="@+id/back_face" android:layout_width="150dp" android:layout_height="150dp" android:layout_marginTop="@dimen/spacing_large" android:layout_marginBottom="@dimen/spacing_large" android:background="@color/material_background" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:cardBackgroundColor="@color/color_whiteBlack" app:cardElevation="@dimen/card_elevation_medium"> <androidx.appcompat.widget.AppCompatTextView android:id="@+id/category_label" fontPath="fonts/Montserrat-SemiBold.ttf" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorAccent" android:ellipsize="end" android:gravity="center" android:padding="@dimen/spacing_generic" android:text="@{data.categoryName}" android:textColor="@color/color_whiteBlack" android:textSize="@dimen/text_size_medium" android:textStyle="bold" android:onClick="@{()->handler.onClickCategory()}" tools:text="Fitness Equipment" /> </com.google.android.material.card.MaterialCardView> <com.google.android.material.card.MaterialCardView android:id="@+id/front_face" android:layout_width="150dp" android:layout_height="150dp" android:layout_marginTop="@dimen/spacing_large" android:layout_marginBottom="@dimen/spacing_large" android:background="@color/material_background" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:cardBackgroundColor="@color/color_whiteBlack" app:cardElevation="@dimen/card_elevation_medium"> <com.webkul.mobikul.customviews.ZoomImageView android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/material_background" android:clickable="true" android:focusableInTouchMode="true" android:focusable="true" app:imageUrl="@{data.url}" android:onClick="@{()->handler.onClickCategory()}" app:placeholder="@{data.dominantColor}" /> </com.google.android.material.card.MaterialCardView> </androidx.constraintlayout.widget.ConstraintLayout> |
Animation files creation
Create your animator file inside the animator directory in res. Now we have to create the animation files for the front and for the back part of our layout.
For the front animator create the Animator Resource file flip_front.xml like below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <objectAnimator android:valueFrom="0" android:valueTo="180" android:propertyName="rotationY" android:duration="1200" /> <objectAnimator android:valueFrom="1.0" android:valueTo="0.0" android:propertyName="alpha" android:startOffset="550" android:duration="1" /> </set> |
On the above file, we have created the rotation with an angle of 180 toward the y axis.
Create the back Animatore Resource file flip_back.xml like below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <objectAnimator android:valueFrom="1.0" android:valueTo="0.0" android:propertyName="alpha" android:duration="0" /> <objectAnimator android:valueFrom="180" android:valueTo="0" android:propertyName="rotationY" android:repeatMode="reverse" android:duration="1200" /> <objectAnimator android:valueFrom="0.0" android:valueTo="1.0" android:propertyName="alpha" android:startOffset="550" android:duration="0" /> </set> |
On the above file, we are using the objectAnimator for animation and using them toward the y-axis to go back to the front visible view.
Apply Animation
Now it’s time to apply the animation to the view. create the method to flip the card and apply the rotation animation for the views like below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
var flipFront = AnimatorInflater.loadAnimator(mContext, R.animator.flip_front) as AnimatorSet var flipBack = AnimatorInflater.loadAnimator(mContext, R.animator.flip_back) as AnimatorSet var isFront =true fun onClickCategory() { try { var scale = mContext.applicationContext.resources.displayMetrics.density frontFace.cameraDistance = 8000 * scale backFace.cameraDistance = 8000 * scale if (isFront) { flipFront.setTarget(R.id.front_face) flipBack.setTarget(R.id.back_face) flipFront.start() flipBack.start() isFront = false } else { flipFront.setTarget(R.id.back_face) flipBack.setTarget(R.id.front_face) flipBack.start() flipFront.start() isFront = true } } catch (e: Exception) { e.printStackTrace() } } |
In the front animator sets the target that you want to display on the front after the particular action.
Conclusion:
In this blog, we have learned about the implementation of the Flip Card Animation in Android.
For more information regarding the Android animation follow the link.
Thanks for reading this blog. You can also check other blogs from here.
Be the first to comment.