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, thanks for video.I have 2 questions.
1) How Can we show these cards again(replay)
2) How can we show these cards randomly?
Hi Tuncay. Both are easy things. But require some work. I will list down the steps below.
How Can we show these cards again(replay)
1. Maintain a count of dismissing cards using some int value which will increment 1 when a card is dismissed.
2. When that count is equal to array list,it means that cardstack is empty.So always check count is equal to arraylist size(using if loop) while dismissing. If equals do the next step
3. When list size is equal to count just simply reset the adapter. it will load cards again. (Note that arraylist should have items)
How can we show these cards randomly?
Cards will be listed in the order in which you are adding to arraylist. If you are picking data from sql then pick it randomly and add to arraylist.
how to come back to main activity if the card is finish
can i swipe this card on top ?
How to add Image can you please write its code.
just add images it adapter bro
How can add overlay image while swiping in any direction?
Thanks in Advance.
You can have an imageview in the parent layout(Relative layout) where Cardstack is placed.and set its visibility view only on the following overriden function on the above code
@Override public boolean swipeContinue(int section, float distanceX, float distanceY) { return true; }You can identify the direction also in the same function. And you can make the visibility gone on discard function.
toolbar line number 22 is giving error (Not Accepting toolbar R.id.toolbar).
Hello Divyanshu,
Please remove (line 11 and 12) .You need to use that line only if you are having a toolbar in your layout file
How to perform swipe left or Swipe right on button click
Try the following code on your button click
For swiping right
For swiping left
Thank you so much Sir, I’ll try that and do let u know 🙂
Hi ,this is a good one, this is what i was searching for a long time. I’m strucked at a point lets say i got 3 cards, i want to get cards1, cards2,cards3, in inceasing order and when i swipe left i have to get back the card that i swiped right .i.e. card3,card2,card1. I’m completely new to android, so please help me
Hi akhil
You can easily achieve this .Please follow below steps.
1. Go to function named discarded, There you can find the toast messages which is identifying wehtr the card is swiped left,right or bottom.
2.Pick the direction where you want to add back the card and there you add the removed card to arraylist card_list.
3.set adapter notifydatasetchanged.
The above steps will make you get stacked the removed cards
Does the above logic work for this,
lets say i swiped card1 to left and then in the next swipe to right i want the card1 back. Is it possible with the above method?
yes it will work
how can i get the text which attach with the card?
hi hong,
I updated the content ,now you will be able to get the text attached with the card in discarded function when a card is discarded. Please use the updated content.(Changes are made in MainActivity.java and SwipeCardAdapter.java classes).
Thanku.
hi ramees,
thank you for your reply. but i have another question. is there any way can convert the string into text? because i trying to get the text and paste it to website to search.
regards,
hong
converting string to text? You can set this string directly to TextView or EditText in android.
thank you for the reply. i have done that part. Can i put more than 1 parameter to add more stuff inside the cardlist.add?
Yes you can,Follow the steps.
1. Create a model class with the parameters you required
2. Instead of
you need to use
3. Set that arraylist to your adapter
Check this link: Custom Listview Which will show you how to create arraylist containing multiple parameters