Swipeable card stack example in android

Swipeable card stack is one of the popular custom functionality in android which is introduced by famous tinder application. In  tinder application there is a functionality of stacking cards and discarding the cards by swiping to left or right will make a decision on something. In this tutorial we will learn how to implement a swipeable card stack app in android like tinder app using a library AndroidSwipeableCardStack.

If you find the tutorial useful please subscribe to our YouTube channel


  1. Create new project in android studio
  2. Configure gradle with necessary libraries.
  3. Add the card stack widget to your layout file
  4. Create the child layout for the card
  5. Create the adapter for the cardstack
  6. Implement the listener in your java file

Create New project in android studio

Refer Android beginners app development guide if you are beginner or if you don’t know how to create project in android studio.

Configure gradle with necessary libraries

Since we are using a library we need to add the following compile statement and repository to the build.gradle file

compile 'com.github.wenchaojiang:AndroidSwipeableCardStack:0.1.4'

Add the following repository also to your build.gradle

repositories {
maven { url "https://jitpack.io" }

Add the card stack widget to your layout file

Now we need to add the following custom widget to your layout file.

android:padding = "20dp"

Create the child layout for the card

Next you need to create the inner layout for your card . This will be layout which will be used in the adapter which we are going to create in next step

Note : Here i am using only a textview, you can have any widget like imageview button etc inside card layout.


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#C0C0C0" >



Create adapter for card stack

Like listview and gridview here we are displaying an array of data . So it is important to have an adapter for setting the dynamic data to the cardview. So we need to create an adapter class under java/your package/


public class SwipeCardAdapter extends ArrayAdapter<String> {

    ArrayList<String> card_list;

    public SwipeCardAdapter(Context context, int resource,ArrayList<String> card_list) {
        super(context, resource);
        this.card_list = card_list;

    public View getView(int position, final View contentView, ViewGroup parent){

        TextView tv_card_number = (TextView)(contentView.findViewById(R.id.tv_card_number));
        return contentView;

    public int getCount() {
        return this.card_list.size();


Create event listener to the cardstack

Now simply use the below code in your activity class file. You need to implement CardStack.CardEventListener

public class MainActivity extends AppCompatActivity implements CardStack.CardEventListener {

    ArrayList<String> card_list;
    CardStack cardstack;
    SwipeCardAdapter swipe_card_adapter;

    protected void onCreate(Bundle savedInstanceState) {
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        card_list = new ArrayList<>();

        card_list.add("card 1");
        card_list.add("card 2");
        card_list.add("card 3");
        card_list.add("card 4");
        card_list.add("card 5");

        cardstack = (CardStack) findViewById(R.id.container);

        swipe_card_adapter = new SwipeCardAdapter(getApplicationContext(),0,card_list);

    public boolean swipeEnd(int section, float distance) {
        return true;

    public boolean swipeStart(int section, float distance) {
        return true;

    public boolean swipeContinue(int section, float distanceX, float distanceY) {
        return true;

    public void discarded(int mIndex, int direction) {

        int swiped_card_postion = mIndex -1;

        //getting the string attached with the card

        String swiped_card_text = card_list.get(swiped_card_postion).toString();

        if (direction == 1) {

            Toast.makeText(getApplicationContext(),swiped_card_text+ " Swipped to Right",Toast.LENGTH_SHORT).show();

        } else if (direction == 0) {

            Toast.makeText(getApplicationContext(),swiped_card_text+" Swipped to Left",Toast.LENGTH_SHORT).show();

        } else {

            Toast.makeText(getApplicationContext(),swiped_card_text+" Swipped to Bottom",Toast.LENGTH_SHORT).show();



    public void topCardTapped() {

        Toast.makeText(getApplicationContext(),"Clicked top card",Toast.LENGTH_SHORT).show();


About the author

Hi guys, i am the author of codesfor. I am a B.Tech graduate currently working as an App developer. Apart from job i am a blogger and a freelancer.


  1. Chris July 3, 2020 Reply
  2. shivam sharma February 18, 2020 Reply
  3. shivam sharma February 17, 2020 Reply
  4. Abdul April 7, 2019 Reply
    • Abdul April 7, 2019 Reply

Add a Comment

Your email address will not be published. Required fields are marked *