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

Steps

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.

<com.wenchao.cardstack.CardStack
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding = "20dp"
android:clipChildren="false"
android:clipToPadding="false"
/>

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.

layout_card.xml

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

<TextView
android:id="@+id/tv_card_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:textSize="24sp"
/>

</RelativeLayout>

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/

SwipeCardAdapter.java

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

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

        TextView tv_card_number = (TextView)(contentView.findViewById(R.id.tv_card_number));
        tv_card_number.setText(card_list.get(position).toString());
        return contentView;
    }


    @Override
    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;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(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);
        cardstack.setContentResource(R.layout.layout_card);
        cardstack.setStackMargin(18);
        cardstack.setListener(this);

        swipe_card_adapter = new SwipeCardAdapter(getApplicationContext(),0,card_list);
        cardstack.setAdapter(swipe_card_adapter);
        
    }

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

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

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

    @Override
    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();

        }


    }

    @Override
    public void topCardTapped() {

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

    }
}