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
- Create new project in android studio
- Configure gradle with necessary libraries.
- Add the card stack widget to your layout file
- Create the child layout for the card
- Create the adapter for the cardstack
- 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(); } }

Hi,
I found this very straight forward to add into my exiting solution, but I found the direction bounds very sensitive, when I drag the card left or right, it often says it is being dragged o the bottom. Is there a way to change the sensitivity?
Thanks
how can i swipe with scroll with this cardstack..
hello sir, can i make a swippable page like a Bumble android app by this cardstack… please share a suggestion regarding that…
Hi Ramees,
I got stuck in the very first step. I tried adding the library to my build.gradle (Module:app)
I am seeing below error after clicking on Sync now
ERROR: Failed to resolve: com.github.wenchaojiang:AndroidSwipeableCardStack:0.1.4
Show in Project Structure dialog
Below is my build.gradle code. kindly let me know if there are any mistakes
ERROR: Failed to resolve: com.github.wenchaojiang:AndroidSwipeableCardStack:0.1.4
Show in Project Structure dialog
Forgot to add build.gradle
apply plugin: ‘com.android.application’
android {
compileSdkVersion 28
defaultConfig {
applicationId “com.example.swipingcards”
minSdkVersion 21
targetSdkVersion 28
versionCode 1
versionName “1.0”
testInstrumentationRunner “android.support.test.runner.AndroidJUnitRunner”
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile(‘proguard-android-optimize.txt’), ‘proguard-rules.pro’
}
}
}
dependencies {
implementation fileTree(dir: ‘libs’, include: [‘*.jar’])
implementation ‘com.android.support:appcompat-v7:28.0.0’
testImplementation ‘junit:junit:4.12’
androidTestImplementation ‘com.android.support.test:runner:1.0.2’
androidTestImplementation ‘com.android.support.test.espresso:espresso-core:3.0.2’
implementation ‘com.github.wenchaojiang:AndroidSwipeableCardStack:0.1.4’
}