Flip Card Animation in Android

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.

<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>

<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:

<?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>

<?xml version="1.0" encoding="utf-8"?>

<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:

<?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>

<?xml version="1.0" encoding="utf-8"?>

<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:

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()
        }
    }

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.

Akshay Kumar 31 January 2022

. . .

Flip Card Animation in Android

Implementation

Create a Layout file

Animation files creation

Apply Animation

Conclusion:

Leave a Comment Cancel Reply

Message Sent!