Infinite Card Switching UI for Android with Custom Animation

Android has a great market in comparison to any other operating system. So, exciting new stuff is always required for developing the applications. However, working on such limited space that with thousand of screen sizes to work on is a bit hectic. A responsive design and components always make it easy. Today, we’re here with a new creative idea of an infinite card switch for your android projects.

A normal slideshow is a bit outdated. Although, numerous amazing slideshows are card-changing libraries are available. This infinite card switching library just stands out above them. As a user, these new creations make the application a lot better and engaging. Even though the card slider is easily available, you won’t regret applying this one to the projects. An infinite always makes the engagement rate higher and combined with great functionality makes it better.

Furthermore, talking about the infinite card switching UI, you will get how much better it actually is. Cards are stacked one onto another instead of side by side. Also, all the cards are directly accessible without having to go through each one of them. In addition, the UI design and animations are really soothing. You can get the idea of the animation and functionality of the project from the preview given below.

Preview

Here, you can see how satisfying the animation is on the project. However, this isn’t limited to having an amazing UI but also provides great functionality. The infinite card slider makes every card stacked easily accessible.

Installation

Gradle via JitPack

Add it to your root build.gradle at the end of repositories:

allprojects {
	repositories {
		...
		maven { url 'https://jitpack.io' }
	}
}

Add the dependency

dependencies {
    implementation 'com.github.BakerJQ:Android-InfiniteCards:1.0.5'
}

Attributes

Before diving into the usage portion, these short descriptions of the attributes will help you easily move forward. It’s always better to know what the attribute does ahead of actually applying the project.

• animType : animation type

• front : move the selected card to first

• switchPosition : move the selected card to first, and the first card to the selected position

• frontToLast : move the first card to last position

• cardRatio : ratio of the card

• animDuration : duration of each card's animation

• animAddRemoveDelay : delay of animation of add and remove between each card

• animAddRemoveDuration : duration of add and remove each card's animation

Usage

Moving on to the the usage position. The library is pretty simple to use even if you require any customization or stick with the default code. Simplify follow the below steps and you are good to go.

Layout in xml

<com.bakerj.infinitecards.InfiniteCardView
        android:id="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        infiniteCard:animDuration="1000"
        infiniteCard:cardRatio="1"/>

Set Adapter

Just extends the BaseAdapter

class MyAdapter extends BaseAdapter{
  ...
}
mAdapter = new MyAdapter(resId);
mCardView.setAdapter(mAdapter);

Animation transformers and interpolators

Default
If you just use all default animations, just do nothing.

mCardView.setAnimInterpolator(new LinearInterpolator());
mCardView.setTransformerToFront(new DefaultTransformerToFront());
mCardView.setTransformerToBack(new DefaultTransformerToBack());
mCardView.setZIndexTransformerToBack(new DefaultZIndexTransformerCommon())

Customisation
mCardView.setTransformerToBack(new AnimationTransformer() {
    @Override
    public void transformAnimation(View view, float fraction, int cardWidth, int cardHeight, int fromPosition, int toPosition) {
        int positionCount = fromPosition - toPosition;
        float scale = (0.8f - 0.1f * fromPosition) + (0.1f * fraction * positionCount);
        ViewHelper.setScaleX(view, scale);
        ViewHelper.setScaleY(view, scale);
        if (fraction < 0.5) {
            ViewCompat.setRotationX(view, 180 * fraction);
        } else {
            ViewCompat.setRotationX(view, 180 * (1 - fraction));
        }
    }

    @Override
    public void transformInterpolatedAnimation(View view, float fraction, int cardWidth, int cardHeight, int fromPosition, int toPosition) {
        int positionCount = fromPosition - toPosition;
        float scale = (0.8f - 0.1f * fromPosition) + (0.1f * fraction * positionCount);
        ViewHelper.setTranslationY(view, -cardHeight * (0.8f - scale) * 0.5f - cardWidth * (0.02f *
                fromPosition - 0.02f * fraction * positionCount));
    }
});
mCardView.setZIndexTransformerToBack(new ZIndexTransformer() {
    @Override
    public void transformAnimation(CardItem card, float fraction, int cardWidth, int cardHeight, int fromPosition, int toPosition) {
        if (fraction < 0.4f) {
            card.zIndex = 1f + 0.01f * fromPosition;
        } else {
            card.zIndex = 1f + 0.01f * toPosition;
        }
    }

    @Override
    public void transformInterpolatedAnimation(CardItem card, float fraction, int cardWidth, int cardHeight, int fromPosition, int toPosition) {

    }
});

Download complete project source code from GitHub