Tinder Swipe View is one of the most used UI components in many Android apps. This feature provides us to easily represent the data in a huge list form. In this article, we will take a look at implementing this Swipe View feature in our Android App.
What we are going to build in this article?
We will be building a simple application in which we will be displaying a stack of cards in which we will be displaying the different courses which are available on Geeks for Geeks. On that cards, we will be adding a swipe-like feature similar to that of Tinder. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.
Step by Step Implementation
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.
Step 2: Add below dependency in build.gradle
Navigate to the app > Gradle Scripts > build.gradle and add the below dependency in the dependencies section.
implementation ‘com.daprlabs.aaron:cardstack:0.3.1-beta0’
After adding the above dependency now sync your project and we will move towards our activity_main.xml.
Step 3: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
XML
<?xml version="1.0" encoding="utf-8"?><RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <!--on below line we are creating a swipe frame layout for providing a swipe action--> <com.daprlabs.cardstack.SwipeFrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!--below widget is used for creating a swipe deck--> <!--in below widget card spacing is the spacing between cards max visible is the max number of cards which are visible render above is to render the cards rotation degree is the angle of card rotation when card is swiped--> <com.daprlabs.cardstack.SwipeDeck android:id="@+id/swipe_deck" android:layout_width="match_parent" android:layout_height="480dp" android:padding="20dp" swipedeck:card_spacing="10dp" swipedeck:max_visible="3" swipedeck:render_above="true" swipedeck:rotation_degrees="15" /> </com.daprlabs.cardstack.SwipeFrameLayout> </RelativeLayout> |
Step 4: Creating a modal class for storing our data
Navigate to the app > java > your app’s package name > Right-click on it > New > Java class and name it as CourseModal and add the below code to it. Comments are added in the code to get to know in more detail.
Java
public class CourseModal { // variables for our coursename, // description,tracks and duration,imageId. private String courseName; private String courseDuration; private String courseTracks; private String courseDescription; public int getImgId() { return imgId; } public void setImgId(int imgId) { this.imgId = imgId; } private int imgId; // creating getter and setter methods public String getCourseName() { return courseName; } public void setCourseName(String courseName) { this.courseName = courseName; } public String getCourseDuration() { return courseDuration; } public void setCourseDuration(String courseDuration) { this.courseDuration = courseDuration; } public String getCourseTracks() { return courseTracks; } public void setCourseTracks(String courseTracks) { this.courseTracks = courseTracks; } public String getCourseDescription() { return courseDescription; } public void setCourseDescription(String courseDescription) { this.courseDescription = courseDescription; } // constructor. public CourseModal(String courseName, String courseDuration, String courseTracks, String courseDescription, int imgId) { this.courseName = courseName; this.courseDuration = courseDuration; this.courseTracks = courseTracks; this.courseDescription = courseDescription; this.imgId = imgId; }} |
Step 5: Creating a new layout file for each swipeable item
Now for displaying the cards in the stack to swipe we have to create a layout file. Navigate to the app > res > layout > new > layout resource file and name it as course_rv_item and add the below code to it. Comments are added in the code to get to know in more detail.
XML
<?xml version="1.0" encoding="utf-8"?><androidx.cardview.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="5dp" android:elevation="8dp" app:cardCornerRadius="4dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="3dp" android:orientation="vertical"> <!--image view for course image--> <ImageView android:id="@+id/idIVCourse" android:layout_width="match_parent" android:layout_height="200dp" android:scaleType="centerCrop" /> <!--text view for our course name--> <TextView android:id="@+id/idTVCourseName" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="3dp" android:text="Course Name" android:textColor="@color/black" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:weightSum="2"> <!--text view for our course tracks--> <TextView android:id="@+id/idTVCourseTracks" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:padding="3dp" android:text="Course Tracks" android:textColor="@color/black" /> <!--text view for our course duration--> <TextView android:id="@+id/idTVCourseDuration" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:padding="3dp" android:text="Duration" android:textColor="@color/black" /> </LinearLayout> <!--text view for our course description--> <TextView android:id="@+id/idTVCourseDescription" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:padding="3dp" android:text="Description" android:textColor="@color/black" /> </LinearLayout> </androidx.cardview.widget.CardView> |
Step 6: Creating an adapter class
Now for setting data to each card present in the stack, we have to create our adapter class. Navigate to the app > java > your app’s package name > Right-click on it > New > Java class and name it as DeckAdapter and add the below code to it. Comments are added in the code to get to know in more detail.
Java
import android.content.Context;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.ImageView;import android.widget.TextView; import java.util.ArrayList; public class DeckAdapter extends BaseAdapter { // on below line we have created variables // for our array list and context. private ArrayList<CourseModal> courseData; private Context context; // on below line we have created constructor for our variables. public DeckAdapter(ArrayList<CourseModal> courseData, Context context) { this.courseData = courseData; this.context = context; } @Override public int getCount() { // in get count method we are returning the size of our array list. return courseData.size(); } @Override public Object getItem(int position) { // in get item method we are returning the item from our array list. return courseData.get(position); } @Override public long getItemId(int position) { // in get item id we are returning the position. return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { // in get view method we are inflating our layout on below line. View v = convertView; if (v == null) { // on below line we are inflating our layout. v = LayoutInflater.from(parent.getContext()).inflate(R.layout.course_rv_item, parent, false); } // on below line we are initializing our variables and setting data to our variables. ((TextView) v.findViewById(R.id.idTVCourseName)).setText(courseData.get(position).getCourseName()); ((TextView) v.findViewById(R.id.idTVCourseDescription)).setText(courseData.get(position).getCourseDescription()); ((TextView) v.findViewById(R.id.idTVCourseDuration)).setText(courseData.get(position).getCourseDuration()); ((TextView) v.findViewById(R.id.idTVCourseTracks)).setText(courseData.get(position).getCourseTracks()); ((ImageView) v.findViewById(R.id.idIVCourse)).setImageResource(courseData.get(position).getImgId()); return v; }} |
Step 7: Working with the MainActivity.java file
Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.
Java
import android.os.Bundle;import android.util.Log;import android.widget.Toast; import androidx.appcompat.app.AppCompatActivity; import com.daprlabs.cardstack.SwipeDeck; import java.util.ArrayList; public class MainActivity extends AppCompatActivity { // on below line we are creating variable // for our array list and swipe deck. private SwipeDeck cardStack; private ArrayList<CourseModal> courseModalArrayList; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // on below line we are initializing our array list and swipe deck. courseModalArrayList = new ArrayList<>(); cardStack = (SwipeDeck) findViewById(R.id.swipe_deck); // on below line we are adding data to our array list. courseModalArrayList.add(new CourseModal("C++", "30 days", "20 Tracks", "C++ Self Paced Course", R.drawable.gfg)); courseModalArrayList.add(new CourseModal("Java", "30 days", "20 Tracks", "Java Self Paced Course", R.drawable.gfg)); courseModalArrayList.add(new CourseModal("Python", "30 days", "20 Tracks", "Python Self Paced Course", R.drawable.gfg)); courseModalArrayList.add(new CourseModal("DSA", "30 days", "20 Tracks", "DSA Self Paced Course", R.drawable.gfg)); courseModalArrayList.add(new CourseModal("PHP", "30 days", "20 Tracks", "PHP Self Paced Course", R.drawable.gfg)); // on below line we are creating a variable for our adapter class and passing array list to it. final DeckAdapter adapter = new DeckAdapter(courseModalArrayList, this); // on below line we are setting adapter to our card stack. cardStack.setAdapter(adapter); // on below line we are setting event callback to our card stack. cardStack.setEventCallback(new SwipeDeck.SwipeEventCallback() { @Override public void cardSwipedLeft(int position) { // on card swipe left we are displaying a toast message. Toast.makeText(MainActivity.this, "Card Swiped Left", Toast.LENGTH_SHORT).show(); } @Override public void cardSwipedRight(int position) { // on card swiped to right we are displaying a toast message. Toast.makeText(MainActivity.this, "Card Swiped Right", Toast.LENGTH_SHORT).show(); } @Override public void cardsDepleted() { // this method is called when no card is present Toast.makeText(MainActivity.this, "No more courses present", Toast.LENGTH_SHORT).show(); } @Override public void cardActionDown() { // this method is called when card is swiped down. Log.i("TAG", "CARDS MOVED DOWN"); } @Override public void cardActionUp() { // this method is called when card is moved up. Log.i("TAG", "CARDS MOVED UP"); } }); }} |
Now run your app and see the output of the app.
Output:
